@freelygive/canvas-utils 0.3.3 → 0.3.4-dev.3b4d338c

package/README.md

@@ -7,11 +7,11 @@ Canvas utility components and test helpers for Drupal Canvas projects.
 Utility components are scaffolded into your project via
 [@freelygive/npm-scaffold](https://www.npmjs.com/package/@freelygive/npm-scaffold).
 
-| Component           | Description                                                |
-| ------------------- | ---------------------------------------------------------- |
+| Component           | Description                                                                               |
+|---------------------|-------------------------------------------------------------------------------------------|
 | `utils_editor_note` | Editor note component, `isCanvasEditorMode()` detection, and `useEditorFullHeight()` hook |
-| `utils_slots`       | `getSlotChildren()` for parsing Canvas slot content        |
-| `utils_entity`      | `useMainEntity()` hook for fetching the page's main entity |
+| `utils_slots`       | `getSlotChildren()` for parsing Canvas slot content                                       |
+| `utils_entity`      | `useMainEntity()` hook for fetching the page's main entity                                |
 
 ### `useEditorFullHeight(enabled)`
 
@@ -22,11 +22,18 @@ set to 80% of the viewport. Returns `undefined` when not in editor mode, so CSS
 handles it normally.
 
 ```jsx
-import { useEditorFullHeight, isCanvasEditorMode } from '@/components/utils_editor_note';
+import {
+  isCanvasEditorMode,
+  useEditorFullHeight,
+} from '@/components/utils_editor_note';
 
 const MyComponent = () => {
   const editorStyle = useEditorFullHeight(isCanvasEditorMode());
-  return <div className="min-h-screen" style={editorStyle}>...</div>;
+  return (
+    <div className="min-h-screen" style={editorStyle}>
+      ...
+    </div>
+  );
 };
 ```
 
@@ -115,7 +122,7 @@ Running `npm install` will scaffold the utility components into
 ### canvas-slots
 
 | Export                      | Description                                                                       |
-| --------------------------- | --------------------------------------------------------------------------------- |
+|-----------------------------|-----------------------------------------------------------------------------------|
 | `rawProp(value)`            | Wraps a value in the `["raw", value]` tuple format used by Canvas island props    |
 | `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object                       |
 | `createCanvasSlot(html)`    | Creates a React element simulating a Canvas slot for `getSlotChildren()` to parse |
@@ -123,7 +130,7 @@ Running `npm install` will scaffold the utility components into
 ### editor-mode
 
 | Export                | Description                                                                   |
-| --------------------- | ----------------------------------------------------------------------------- |
+|-----------------------|-------------------------------------------------------------------------------|
 | `withEditorMode`      | Storybook decorator — enables editor mode before render, cleans up on unmount |
 | `enableEditorMode()`  | Sets `window.drupalSettings.canvas` to simulate Canvas editor mode            |
 | `disableEditorMode()` | Removes `window.drupalSettings.canvas`                                        |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freelygive/canvas-utils",
-  "version": "0.3.3",
+  "version": "0.3.4-dev.3b4d338c",
   "description": "Canvas utility components and test helpers for Drupal Canvas projects.",
   "type": "module",
   "files": [

package/src/components/utils_entity/index.jsx

@@ -5,20 +5,23 @@ import useSWR from 'swr';
 /**
  * Fetch the main entity for the current page using SWR.
  * Uses Canvas mainEntity (when available) with fallback to title-based lookup.
- * @param {string} entityType - The JSON:API entity type (e.g., 'node--news_article')
- * @param {object} options - Fetch options
- * @param {string[]} options.includes - Relationships to include
- * @param {object} options.fields - Sparse fieldset map (e.g., { 'node--news_article': ['title'] })
+ *
+ * @param {string} entityType - The JSON:API entity type (e.g., 'node--news_article').
+ * @param {Object} [options] - Fetch options.
+ * @param {string[]} [options.includes] - Relationships to include.
+ * @param {Object} [options.fields] - Sparse fieldset map (e.g., { 'node--news_article': ['title'] }).
  * @returns {{ data: object|undefined, error: Error|undefined, isLoading: boolean }}
  */
 export const useMainEntity = (
   entityType,
   { includes = [], fields = {} } = {},
 ) => {
-  const pageData = getPageData();
-  const { pageTitle } = pageData;
-  // mainEntity will be available in future Canvas versions
-  const mainEntity = pageData.mainEntity;
+  // mainEntity will be available in future Canvas versions.
+  const pageData =
+    /** @type {{ pageTitle: string, mainEntity?: { uuid: string } }} */ (
+      getPageData()
+    );
+  const { pageTitle, mainEntity } = pageData;
   const entityId = mainEntity?.uuid || pageTitle || null;
 
   return useSWR(

package/src/components/utils_slots/index.jsx

@@ -11,8 +11,9 @@ const flattenChildren = (children) => {
   React.Children.forEach(children, (child) => {
     if (!child) return;
     // Check if it's a Fragment (type is Symbol(react.fragment))
-    if (child?.type === React.Fragment) {
-      result.push(...flattenChildren(child.props.children));
+    const el = /** @type {React.ReactElement} */ (child);
+    if (el.type === React.Fragment) {
+      result.push(...flattenChildren(el.props.children));
     } else {
       result.push(child);
     }