@recipe-book/react 0.1.1 → 0.1.2

package/dist/index.d.cts

@@ -222,7 +222,7 @@ type RecipeState = {
  *   its ingredients at those settings, and its numbered steps.
  *
  * @example
- * import type { Recipe as ParsedRecipe } from '@recipe-book/react/core'
+ * import type { ParsedRecipe } from '@recipe-book/react/core'
  * import * as Recipe from '@recipe-book/react'
  *
  * function ServingsSummary({ recipe }: { recipe: ParsedRecipe }) {
@@ -344,7 +344,8 @@ type RecipeIngredientProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySe
     item: IngredientItem;
     /**
      * Renders the line as its one element child, such as `<motion.li layout />`,
-     * instead of an `<li>`. A prop on the child wins, except that the line's
+     * instead of an `<li>`. Render an `<li>` or a component that renders one, so
+     * the list keeps its items. A prop on the child wins, except that the line's
      * `tabIndex` wins, `className`s join, `style` merges key by key with the
      * child winning, both event handlers run (the child's first), and both refs
      * are set. The child's own children replace the line's, so an empty child
@@ -1059,7 +1060,8 @@ type RecipeStepProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySetInner
     item: StepItem;
     /**
      * Renders the step as its one element child, such as `<motion.li layout />`,
-     * instead of an `<li>`. A prop on the child wins, except that the step's
+     * instead of an `<li>`. Render an `<li>` or a component that renders one, so
+     * the list keeps its items. A prop on the child wins, except that the step's
      * `tabIndex` wins, `className`s join, `style` merges key by key with the
      * child winning, both event handlers run (the child's first), and both refs
      * are set. The child's own children replace the step's, so an empty child
@@ -1185,15 +1187,17 @@ type RecipeSystemOptionProps = Omit<ComponentPropsWithoutRef<'button'>, 'value'
     autoComplete?: string | undefined;
     /**
      * Renders the radio as its one element child, such as
-     * `<motion.button layout />`, instead of a `<button>`. A prop on the child
-     * wins, except that the option's `tabIndex` wins, `className`s join, `style`
-     * merges key by key with the child winning, both event handlers run (the
-     * child's first), and both refs are set. The option sets `tabIndex` to keep
-     * one radio in the tab order once React hydrates the page; before that,
-     * every enabled checked option is in it. The child's own children replace
-     * the option's, so an empty child gets the system's label. With anything but
-     * one element child, it renders its own `<button>`, with a warning in
-     * development.
+     * `<motion.button layout />`, instead of a `<button>`. Render a `<button>` or
+     * a component that renders one, so Space and Enter check it, and a disabled
+     * option reads as disabled to screen readers and doesn't take focus on a
+     * click. A prop on the child wins, except that the option's `tabIndex` wins,
+     * `className`s join, `style` merges key by key with the child winning, both
+     * event handlers run (the child's first), and both refs are set. The option
+     * sets `tabIndex` to keep one radio in the tab order once React hydrates the
+     * page; before that, every enabled checked option is in it. The child's own
+     * children replace the option's, so an empty child gets the system's label.
+     * With anything but one element child, it renders its own `<button>`, with a
+     * warning in development.
      *
      * @defaultValue `false`
      *

package/dist/index.d.ts

@@ -222,7 +222,7 @@ type RecipeState = {
  *   its ingredients at those settings, and its numbered steps.
  *
  * @example
- * import type { Recipe as ParsedRecipe } from '@recipe-book/react/core'
+ * import type { ParsedRecipe } from '@recipe-book/react/core'
  * import * as Recipe from '@recipe-book/react'
  *
  * function ServingsSummary({ recipe }: { recipe: ParsedRecipe }) {
@@ -344,7 +344,8 @@ type RecipeIngredientProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySe
     item: IngredientItem;
     /**
      * Renders the line as its one element child, such as `<motion.li layout />`,
-     * instead of an `<li>`. A prop on the child wins, except that the line's
+     * instead of an `<li>`. Render an `<li>` or a component that renders one, so
+     * the list keeps its items. A prop on the child wins, except that the line's
      * `tabIndex` wins, `className`s join, `style` merges key by key with the
      * child winning, both event handlers run (the child's first), and both refs
      * are set. The child's own children replace the line's, so an empty child
@@ -1059,7 +1060,8 @@ type RecipeStepProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySetInner
     item: StepItem;
     /**
      * Renders the step as its one element child, such as `<motion.li layout />`,
-     * instead of an `<li>`. A prop on the child wins, except that the step's
+     * instead of an `<li>`. Render an `<li>` or a component that renders one, so
+     * the list keeps its items. A prop on the child wins, except that the step's
      * `tabIndex` wins, `className`s join, `style` merges key by key with the
      * child winning, both event handlers run (the child's first), and both refs
      * are set. The child's own children replace the step's, so an empty child
@@ -1185,15 +1187,17 @@ type RecipeSystemOptionProps = Omit<ComponentPropsWithoutRef<'button'>, 'value'
     autoComplete?: string | undefined;
     /**
      * Renders the radio as its one element child, such as
-     * `<motion.button layout />`, instead of a `<button>`. A prop on the child
-     * wins, except that the option's `tabIndex` wins, `className`s join, `style`
-     * merges key by key with the child winning, both event handlers run (the
-     * child's first), and both refs are set. The option sets `tabIndex` to keep
-     * one radio in the tab order once React hydrates the page; before that,
-     * every enabled checked option is in it. The child's own children replace
-     * the option's, so an empty child gets the system's label. With anything but
-     * one element child, it renders its own `<button>`, with a warning in
-     * development.
+     * `<motion.button layout />`, instead of a `<button>`. Render a `<button>` or
+     * a component that renders one, so Space and Enter check it, and a disabled
+     * option reads as disabled to screen readers and doesn't take focus on a
+     * click. A prop on the child wins, except that the option's `tabIndex` wins,
+     * `className`s join, `style` merges key by key with the child winning, both
+     * event handlers run (the child's first), and both refs are set. The option
+     * sets `tabIndex` to keep one radio in the tab order once React hydrates the
+     * page; before that, every enabled checked option is in it. The child's own
+     * children replace the option's, so an empty child gets the system's label.
+     * With anything but one element child, it renders its own `<button>`, with a
+     * warning in development.
      *
      * @defaultValue `false`
      *

package/dist/index.js

@@ -7,6 +7,13 @@ import {
   useMemo as useMemo2
 } from "react";
 
+// src/display-name.ts
+function setDisplayName(component, name) {
+  const target = component;
+  target.displayName = name;
+  Object.defineProperty(target.render ?? component, "name", { value: name });
+}
+
 // src/labels.ts
 var defaultLabels = {
   servings: "Servings",
@@ -342,6 +349,9 @@ function useRecipe() {
     "useRecipe() must be called inside <Recipe.Root>. To use recipe state without a Root, call useRecipeState()."
   );
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(RecipeBookProvider, "Recipe.RecipeBookProvider");
+}
 
 // src/parts/image.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -363,6 +373,9 @@ var Image = /* @__PURE__ */ forwardRef(function Image2({
     }
   );
 });
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Image, "Recipe.Image");
+}
 
 // src/parts/ingredients.tsx
 import {
@@ -409,7 +422,7 @@ var Slot = /* @__PURE__ */ forwardRef(function Slot2({ children, ...props }, ref
     }
   }
   const childRef = Object.getOwnPropertyDescriptor(child.props, "ref")?.value ?? child.ref;
-  merged.ref = useCallback3(
+  const mergedRef = useCallback3(
     (node) => {
       const refs = [ref, childRef];
       const cleanups = refs.map((each) => setRef(each, node));
@@ -427,6 +440,9 @@ var Slot = /* @__PURE__ */ forwardRef(function Slot2({ children, ...props }, ref
     },
     [ref, childRef]
   );
+  if (ref != null) {
+    merged.ref = mergedRef;
+  }
   return cloneElement(child, merged);
 });
 function setRef(ref, node) {
@@ -455,6 +471,9 @@ function describeChildren(children) {
 function isEmpty(children) {
   return children == null || typeof children === "boolean";
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Slot, "Slot");
+}
 
 // src/use-format-ingredient.ts
 import {
@@ -592,9 +611,6 @@ function ingredientText(name, attribute, read) {
       text
     ] }) : cloneElement(child, void 0, child.props.children, text) });
   }
-  if (process.env.NODE_ENV !== "production") {
-    Object.defineProperty(IngredientText, "name", { value: name });
-  }
   return forwardRef(IngredientText);
 }
 var IngredientQuantity = /* @__PURE__ */ ingredientText(
@@ -646,6 +662,15 @@ var IngredientOptional = /* @__PURE__ */ ingredientText(
   // An empty label shows only the part's own children, such as an icon.
   ({ optional }, children) => optional === "" && isEmpty(children) ? void 0 : optional
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Ingredients, "Recipe.Ingredients");
+  setDisplayName(IngredientList, "Recipe.IngredientList");
+  setDisplayName(Ingredient, "Recipe.Ingredient");
+  setDisplayName(IngredientQuantity, "Recipe.IngredientQuantity");
+  setDisplayName(IngredientName, "Recipe.IngredientName");
+  setDisplayName(IngredientNote, "Recipe.IngredientNote");
+  setDisplayName(IngredientOptional, "Recipe.IngredientOptional");
+}
 
 // src/parts/json-ld.tsx
 import { toJsonLd } from "@recipe-book/core/schema-org";
@@ -702,6 +727,9 @@ function useWarningsReport(name, warnings) {
     reported.current = key;
   }, [name, warnings]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(JsonLd, "Recipe.JsonLd");
+}
 
 // src/parts/root.tsx
 import {
@@ -769,7 +797,7 @@ function useParseReport(result) {
     if (result.success) {
       const count = result.warnings.length;
       console.warn(
-        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders, but a warning can mean a misspelled field.`,
+        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders. https://recipe-book.siraj.page/errors/#issue-codes gives the fix for each warning's code.`,
         result.warnings
       );
     } else {
@@ -777,6 +805,9 @@ function useParseReport(result) {
     }
   }, [result]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Root, "Recipe.Root");
+}
 
 // src/parts/servings.tsx
 import {
@@ -904,6 +935,10 @@ function optionText(choice, { servings, yield: makes }, base, labels, locale) {
   }
   return `${formatServings({ amount: choice }, format)}\xD7`;
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(ServingsSelect, "Recipe.ServingsSelect");
+  setDisplayName(ServingsInput, "Recipe.ServingsInput");
+}
 
 // src/parts/step-text.tsx
 import {
@@ -969,9 +1004,15 @@ var StepName = /* @__PURE__ */ forwardRef(
       StepContext,
       "<Recipe.StepName> must be rendered inside <Recipe.Step>."
     );
-    return step.name === void 0 ? null : /* @__PURE__ */ jsx8("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+    return step.name !== void 0 && /* @__PURE__ */ jsx8("b", { ...props, "data-recipe-name": "", ref, children: step.name });
   }
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Steps, "Recipe.Steps");
+  setDisplayName(StepList, "Recipe.StepList");
+  setDisplayName(Step, "Recipe.Step");
+  setDisplayName(StepName, "Recipe.StepName");
+}
 
 // src/parts/step-text.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -1004,6 +1045,9 @@ function Temperature({ segment }) {
     }) + (fan && labels.fan ? ` ${labels.fan}` : "");
   }).filter(Boolean).join(" / ") });
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(StepText, "Recipe.StepText");
+}
 
 // src/parts/system-toggle.tsx
 import {
@@ -1129,6 +1173,10 @@ function moveOnArrowKey(event) {
   if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
     return;
   }
+  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
+  if (group === null) {
+    return;
+  }
   const { key } = event;
   let step;
   if (key === "ArrowDown") {
@@ -1136,17 +1184,16 @@ function moveOnArrowKey(event) {
   } else if (key === "ArrowUp") {
     step = -1;
   } else if (key === "ArrowRight") {
-    step = isRtl(event.currentTarget) ? -1 : 1;
+    step = isRtl(group) ? -1 : 1;
   } else if (key === "ArrowLeft") {
-    step = isRtl(event.currentTarget) ? 1 : -1;
+    step = isRtl(group) ? 1 : -1;
   } else {
     return;
   }
-  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
   const options = Array.from(
-    group?.querySelectorAll(
+    group.querySelectorAll(
       "[data-recipe-system-option]:not([data-disabled])"
-    ) ?? []
+    )
   );
   const index = options.indexOf(event.currentTarget);
   if (index === -1) {
@@ -1158,7 +1205,11 @@ function moveOnArrowKey(event) {
   next?.click();
 }
 function isRtl(element) {
-  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+  return getComputedStyle(element).direction === "rtl";
+}
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(SystemToggle, "Recipe.SystemToggle");
+  setDisplayName(SystemOption, "Recipe.SystemOption");
 }
 export {
   Image,