react-headings 4.0.0-next.1 → 4.0.0-next.2

package/README.md

@@ -13,12 +13,12 @@
 
 > Never write `h1`–`h6` again.
 
-Search engines and screen readers rely on heading levels, but reusable components can't know how deep they'll be rendered. React Headings works out each level from your component tree, like the HTML [`headingoffset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/headingoffset) proposal, but in any browser today.
+Hardcoded heading levels break accessibility and SEO when components are reused. React Headings fixes this by computing each level from your component tree.
 
 ## Features
 
 - Supports server-side rendering
-- 384 bytes minified & brotlied
+- 370 bytes minified & brotlied
 - Typed with TypeScript
 - Works with any CSS solution (Tailwind, CSS-in-JS, etc.)
 - Plays nicely with component libraries
@@ -108,7 +108,7 @@ Accepts every `h1` prop and a `ref`, plus:
 
 Pass `offset` or `level`, not both. Nested offsets add up. `offset={0}` adds nothing, which is useful for conditional nesting.
 
-Invalid values never throw: fractions round down, and anything else invalid counts as `offset={0}` or `level={1}`.
+Invalid values never throw: they're ignored with a warning, as if not passed. `null` counts as not passed, without a warning.
 
 ### `useHeadingLevel()`
 
@@ -118,22 +118,11 @@ Returns the `level` (`1`–`6`) and `tag` (`"h1"`–`"h6"`) a `Heading` would re
 
 In development, React Headings warns in the console when:
 
-- a level is skipped, like an `h3` with no `h2` above it,
+- a level is skipped,
 - a level goes past 6,
 - an `offset` or `level` is invalid.
 
-Warnings are removed from production builds. Vite and webpack show them automatically in dev mode. In plain Node or Jest, run with `--conditions=development`.
-
-## Server Components
-
-Works in Server Components, including Server Components nested inside `HeadingLevel`. Only `useHeadingLevel()` needs a Client Component.
-
-## Differences from `headingoffset`
-
-- Levels follow the React tree, not the DOM, so portaled content inherits its level.
-- `Heading` always starts at level 1, while a native `h2` starts at 2.
-- Levels stop at 6, while `headingoffset` goes up to 9 through `aria-level`.
-- The output is a real `h1`–`h6` tag, so CSS like `h2 { … }` matches the level.
+Warnings are removed from production builds. Vite and webpack show them automatically in dev mode. In plain Node, run with `--conditions=development`.
 
 ## License
 

package/dist/index.development.js

@@ -10,11 +10,11 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var LevelContext = createContext(1);
-function getNormalizedOffset(offset) {
-  return Number.isFinite(offset) && offset > 0 ? Math.floor(offset) : 0;
+function isValidOffset(offset) {
+  return Number.isInteger(offset) && offset >= 0;
 }
-function getNormalizedLevel(level) {
-  return Number.isFinite(level) && level > 1 ? Math.floor(level) : 1;
+function isValidLevel(level) {
+  return Number.isInteger(level) && level >= 1;
 }
 var Heading = forwardRef(
   function({ render, ...props }, ref) {
@@ -28,17 +28,13 @@ function HeadingLevel({
   level,
   children
 }) {
-  let parentLevel = useContext(LevelContext), isReset = level !== void 0, normalizedOffset = getNormalizedOffset(offset), innerLevel = isReset ? getNormalizedLevel(level) : parentLevel + normalizedOffset;
-  return useInvalidPropWarning(
-    isReset ? "level" : "offset",
-    isReset ? level : offset,
-    isReset ? innerLevel : normalizedOffset
-  ), children = /* @__PURE__ */ jsx(
+  let parentLevel = useContext(LevelContext), isReset = isValidLevel(level), isOffsetValid = isValidOffset(offset), innerLevel = isReset ? level : parentLevel + (isOffsetValid ? offset : 1);
+  return useInvalidPropWarning("offset", offset, isOffsetValid), useInvalidPropWarning("level", level, isReset), children = /* @__PURE__ */ jsx(
     SkippedLevelScope,
     {
       firstLevel: isReset ? innerLevel : parentLevel + 1,
       isIsolated: isReset,
-      isPassthrough: !isReset && normalizedOffset === 0,
+      isPassthrough: !isReset && offset === 0,
       children
     }
   ), /* @__PURE__ */ jsx(LevelContext.Provider, { value: innerLevel, children });
@@ -93,12 +89,12 @@ function useHeadingChecks() {
     );
   }, [level]), useEffect(() => scopeRegistry?.register(level), [scopeRegistry, level]);
 }
-function useInvalidPropWarning(prop, value, normalizedValue) {
+function useInvalidPropWarning(prop, value, isValid) {
   useEffect(() => {
-    value !== normalizedValue && console.warn(
-      `react-headings: HeadingLevel received invalid ${prop} ${value}, treated as ${normalizedValue}.`
+    value != null && !isValid && console.warn(
+      `react-headings: HeadingLevel received invalid ${prop} ${value}, ignored.`
     );
-  }, [prop, value, normalizedValue]);
+  }, [prop, value, isValid]);
 }
 export {
   Heading as H,

package/dist/index.js

@@ -10,11 +10,11 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var LevelContext = createContext(1);
-function getNormalizedOffset(offset) {
-  return Number.isFinite(offset) && offset > 0 ? Math.floor(offset) : 0;
+function isValidOffset(offset) {
+  return Number.isInteger(offset) && offset >= 0;
 }
-function getNormalizedLevel(level) {
-  return Number.isFinite(level) && level > 1 ? Math.floor(level) : 1;
+function isValidLevel(level) {
+  return Number.isInteger(level) && level >= 1;
 }
 var Heading = forwardRef(
   function({ render, ...props }, ref) {
@@ -28,7 +28,7 @@ function HeadingLevel({
   level,
   children
 }) {
-  let parentLevel = useContext(LevelContext), isReset = level !== void 0, normalizedOffset = getNormalizedOffset(offset), innerLevel = isReset ? getNormalizedLevel(level) : parentLevel + normalizedOffset;
+  let parentLevel = useContext(LevelContext), isReset = isValidLevel(level), isOffsetValid = isValidOffset(offset), innerLevel = isReset ? level : parentLevel + (isOffsetValid ? offset : 1);
   return /* @__PURE__ */ jsx(LevelContext.Provider, { value: innerLevel, children });
 }
 function useHeadingLevel() {

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "react-headings",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.2",
   "type": "module",
-  "description": "Dynamic heading levels for React. A polyfill of the HTML headingoffset proposal.",
+  "description": "Dynamic heading levels for React.",
   "author": "Alex Nault",
   "keywords": [
     "react",
     "heading",
     "headings",
-    "headingoffset",
-    "headingreset",
     "level",
     "outline",
     "accessibility",
@@ -20,6 +18,7 @@
   "license": "MIT",
   "repository": "https://github.com/alexnault/react-headings",
   "homepage": "https://github.com/alexnault/react-headings#readme",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",