@oprt/react 0.2.1 → 0.4.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/ComboBox/ComboBox.js

@@ -179,7 +179,15 @@ var ComboBox = forwardRef((props, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("p", { role: "status", className: loading ? "m-0 text-oprt-text-dim" : "sr-only", children: loading ? "Loading options." : null }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "status",
+            "data-react-aria-top-layer": "",
+            className: loading ? "m-0 text-oprt-text-dim" : "sr-only",
+            children: loading ? "Loading options." : null
+          }
+        ),
         /* @__PURE__ */ jsx(
           MotionPopover,
           {

package/dist/DataGrid/DataGrid.js

@@ -18,6 +18,7 @@ import {
 import { Select, SelectOption } from "../Select/Select.js";
 import { sortedOrder } from "../DataTable/sort.js";
 import { devValidate } from "../_internal/devValidate.js";
+import { useLoadingStatusText } from "../_internal/loadingStatus.js";
 import { DataGridManifest } from "./DataGrid.manifest.js";
 import { PageControls } from "./PageControls.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -76,7 +77,7 @@ var DataGrid = forwardRef((allProps, ref) => {
     columns,
     data,
     getRowId,
-    caption = "Data grid",
+    caption: captionProp,
     selectedRowIds,
     onSelectionChange,
     sort,
@@ -106,6 +107,7 @@ var DataGrid = forwardRef((allProps, ref) => {
   if (process.env.NODE_ENV !== "production") {
     devValidate("DataGrid", DataGridManifest.DataGrid.props, allProps);
   }
+  const caption = captionProp ?? "Data grid";
   const [localSelection, setLocalSelection] = useState([]);
   const [localSort, setLocalSort] = useState(null);
   const [localPage, setLocalPage] = useState(1);
@@ -152,6 +154,13 @@ var DataGrid = forwardRef((allProps, ref) => {
   const safePageSize = Number.isFinite(pageSize) && pageSize >= 1 ? Math.floor(pageSize) : 10;
   const count = mode === "server" && rowCount !== void 0 && Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : data.length;
   const pageCount = Math.max(1, Math.ceil(count / safePageSize));
+  const what = captionProp ?? "results";
+  const loadingNote = `Loading ${what}.`;
+  const loadingStatus = useLoadingStatusText({
+    loading,
+    loadingText: loadingNote,
+    loadedText: `${captionProp ?? "Results"} loaded. ${count} ${count === 1 ? "row" : "rows"}.`
+  });
   const requestedPage = page ?? localPage;
   const currentPage = Math.min(
     pageCount,
@@ -431,7 +440,8 @@ var DataGrid = forwardRef((allProps, ref) => {
             } : {}
           }
         ),
-        /* @__PURE__ */ jsx("p", { role: "status", className: loading ? "m-0 text-oprt-text-dim" : "sr-only", children: loading ? "Loading results." : "" }),
+        /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: loadingStatus }),
+        loading && /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "m-0 text-oprt-text-dim", children: loadingNote }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2u", children: [
           /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums text-oprt-text-dim", children: [
             count,

package/dist/DataGrid/DataGrid.manifest.js

@@ -34,7 +34,7 @@ var DataGridManifest = {
       caption: {
         type: "string",
         default: "Data grid",
-        description: "Accessible native table caption and controls group name."
+        description: "Accessible native table caption and controls group name. Also names what is loading in the loading and loaded messages."
       },
       selectedRowIds: {
         type: "array",
@@ -111,7 +111,7 @@ var DataGridManifest = {
       loading: {
         type: "boolean",
         default: false,
-        description: "Marks the table busy, announces loading, and disables grid-owned controls and row activation while retaining supplied data."
+        description: 'Marks the table busy and disables grid-owned controls and row activation while retaining supplied data. A load the person asks for (a reload, a page, a filter: `loading` turns on after the grid has rendered) says "Loading <caption>." once (or "Loading results." when no caption is given) and, when it ends, "<caption> loaded. N rows." once. The load that is under way when the grid first renders is busy but silent, as is the arrival of its rows.'
       },
       disabled: {
         type: "boolean",

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/Skeleton/Skeleton.js

@@ -19,26 +19,55 @@ var barStyles = cva(
     defaultVariants: { variant: "block" }
   }
 );
+var NOT_APPLIED = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "role",
+  "aria-live",
+  "aria-busy"
+];
+var reportedNotApplied = /* @__PURE__ */ new Set();
+function reportNotApplied(prop, received) {
+  if (process.env.NODE_ENV === "production" || reportedNotApplied.has(prop)) return;
+  reportedNotApplied.add(prop);
+  console.error(
+    JSON.stringify(
+      {
+        component: "Skeleton",
+        error: "PROP_NOT_APPLIED",
+        prop,
+        received: typeof received === "string" ? received : String(received),
+        suggestion: 'Skeleton is decorative: hidden from assistive technology, with no role or name, so it stays silent and a page of them does not say "Loading" once each. Mark the area that is loading aria-busy and say "Loading <what>" once in a status that is already on the page (see the Skeleton page).'
+      },
+      null,
+      2
+    )
+  );
+}
 var Skeleton = forwardRef((allProps, ref) => {
-  const { className, variant = "block", width, height, lines = 3, ...props } = allProps;
+  const { className, variant = "block", width, height, lines = 3, ...rest } = allProps;
+  const props = { ...rest };
   if (process.env.NODE_ENV !== "production") {
     devValidate("Skeleton", SkeletonManifest.Skeleton.props, { ...allProps });
+    for (const name of NOT_APPLIED) {
+      if (props[name] !== void 0) reportNotApplied(name, props[name]);
+    }
   }
+  for (const name of NOT_APPLIED) delete props[name];
+  delete props["aria-hidden"];
   if (variant === "text") {
     const count = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 3;
     return /* @__PURE__ */ jsx(
       "div",
       {
+        ...props,
         ref,
-        role: "status",
-        "aria-busy": "true",
-        "aria-label": "Loading",
+        "aria-hidden": "true",
         className: clsx("flex flex-col gap-1u", className),
-        ...props,
         children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
           "div",
           {
-            "aria-hidden": "true",
             className: clsx(barStyles({ variant: "text" }), i === count - 1 && "w-2/3")
           },
           i
@@ -50,25 +79,7 @@ var Skeleton = forwardRef((allProps, ref) => {
   if (width !== void 0) style.width = width;
   if (height !== void 0) style.height = height;
   const hasStyle = width !== void 0 || height !== void 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": "Loading",
-      className: clsx("flex flex-col", className),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: barStyles({ variant: "block" }),
-          ...hasStyle ? { style } : {}
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { ...props, ref, "aria-hidden": "true", className: clsx("flex flex-col", className), children: /* @__PURE__ */ jsx("div", { className: barStyles({ variant: "block" }), ...hasStyle ? { style } : {} }) });
 });
 Skeleton.displayName = "Skeleton";
 export {

package/dist/Skeleton/Skeleton.manifest.js

@@ -1,7 +1,7 @@
 // src/Skeleton/Skeleton.manifest.ts
 var SkeletonManifest = {
   Skeleton: {
-    description: "Loading placeholder. block renders one pulsing bar; text stacks `lines` bars with a shortened last line. Bars fill their container and never widen it, whatever width the caller asks for, and are drawn in a system color in forced-colors mode.",
+    description: 'Loading placeholder, purely visual and silent: hidden from assistive technology, with no role, name or text, so a screen of placeholders does not say "Loading" once each. block renders one pulsing bar; text stacks `lines` bars with a shortened last line. Bars fill their container and never widen it, whatever width the caller asks for, and are drawn in a system color in forced-colors mode. The area that is loading says it: mark the area `aria-busy`, keep one polite status outside it (on the page before it has anything to say) that says "Loading <what>" and then that the content has arrived.',
     props: {
       variant: { type: "enum", values: ["block", "text"], default: "block" },
       width: {
@@ -18,11 +18,19 @@ var SkeletonManifest = {
         type: "number",
         default: 3,
         description: "Number of stacked bars in the text variant, rounded down with a minimum of 1. Non-finite values fall back to 3."
+      },
+      "aria-label": {
+        type: "string",
+        description: 'Deprecated and not applied. A Skeleton used to be a status named "Loading" (or this label); it is decorative now. In development a structured error says so, once. Name the loading area instead. The same holds for aria-labelledby, aria-describedby, role, aria-live and aria-busy.'
+      },
+      role: {
+        type: "string",
+        description: "Deprecated and not applied: a Skeleton is decorative and has no role. See aria-label."
       }
     },
     composable_with: ["Card", "DataTable"],
     never_inside: ["Button", "Badge"],
-    example: '<Skeleton variant="text" lines={3} />'
+    example: '<section aria-labelledby="tracks-title">\n  <h2 id="tracks-title">Tracks</h2>\n  <p role="status" className="sr-only">{note}</p>\n  <div aria-busy={loading}>\n    {loading ? <Skeleton variant="text" lines={3} /> : <TrackList tracks={tracks} />}\n  </div>\n</section>'
   }
 };
 export {

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/_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/loadingStatus.js

@@ -0,0 +1,30 @@
+"use client";
+
+// src/_internal/loadingStatus.ts
+import { useState } from "react";
+import { useHoldBackNewText } from "./liveRegion.js";
+function useLoadingStatusText({
+  loading,
+  loadingText,
+  loadedText
+}) {
+  const held = useHoldBackNewText(true);
+  const [seen, setSeen] = useState({ loading, first: loading, arrival: "" });
+  let current = seen;
+  if (seen.loading !== loading) {
+    current = {
+      loading,
+      first: false,
+      arrival: loading || seen.first ? "" : loadedText
+    };
+    setSeen(current);
+  } else if (!loading && seen.arrival !== "" && seen.arrival !== loadedText) {
+    current = { ...seen, arrival: "" };
+    setSeen(current);
+  }
+  if (held || current.first) return "";
+  return loading ? loadingText : current.arrival;
+}
+export {
+  useLoadingStatusText
+};

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;