@hubspot/ui-extensions 0.11.0 → 0.11.1

package/dist/experimental/testing/internal/query.d.ts

@@ -0,0 +1,57 @@
+import type { HubSpotReactComponent, UnknownComponentProps } from '../../../__synced__/types/shared.synced';
+import type { ElementMatcher, RenderedElementNode } from '../types';
+import type { RenderedParentNodeInternal } from './types-internal';
+/**
+ * Finds the first descendant element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first element node that matches the given component or `null` if no match is found.
+ */
+export declare const maybeFind: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps> | null;
+/**
+ * Finds the first descendant element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first element node that matches the given component.
+ */
+export declare const find: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps>;
+/**
+ * Finds all descendant element nodes that match the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns An array of element nodes that match the given component.
+ */
+export declare const findAll: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps>[];
+/**
+ * Finds the first direct child element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first child element node that matches the given component.
+ */
+export declare const findChild: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps>;
+/**
+ * Finds the first direct child element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first child element node that matches the given component.
+ */
+export declare const maybeFindChild: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps> | null;
+/**
+ * Finds all direct child element nodes that match the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns An array of child element nodes that match the given component.
+ */
+export declare const findAllChildren: <TProps extends UnknownComponentProps>(parentNode: RenderedParentNodeInternal, targetComponent: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps> | undefined) => RenderedElementNode<TProps>[];

package/dist/experimental/testing/internal/query.js

@@ -0,0 +1,231 @@
+import { __hubSpotComponentRegistry } from '../../../__synced__/remoteComponents.synced';
+import { isRenderedElementNode, isRenderedFragmentNode } from '../type-utils';
+import { ComponentNotFoundError, FindInvalidComponentError, InvalidComponentsError, } from './errors';
+/**
+ * Checks if the element matches the matcher.
+ *
+ * @param element The element to check.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns `true` if the element matches the matcher, `false` otherwise.
+ */
+const checkElementMatches = (element, matcher) => {
+    // If no matcher is provided, the element matches
+    if (!matcher) {
+        return true;
+    }
+    // Check if the matcher is a predicate function
+    if (typeof matcher === 'function') {
+        return matcher(element);
+    }
+    // Check if all the props in the matcher match the props in the element
+    return Object.keys(matcher).every((key) => element.props[key] === matcher[key]);
+};
+const addMatchToFindResult = (findResult, match, options) => {
+    if (options.findFirstOnly) {
+        findResult.match = match;
+    }
+    else {
+        findResult.allMatches.push(match);
+    }
+};
+/**
+ * Recursive helper for finding elements in the rendered tree.
+ * NOTE: The input `findResult` is mutated in place.
+ *
+ * @param parentNode The parent node to search in.
+ * @param options The options for the find operation.
+ * @param findResult The find result to mutate.
+ */
+const findInternalHelper = (parentNode, options, findResult) => {
+    const { children } = parentNode;
+    const { targetComponent, matcher, findFirstOnly, findDirectChildrenOnly } = options;
+    const targetComponentName = __hubSpotComponentRegistry.getComponentName(targetComponent);
+    for (const child of children) {
+        if (!isRenderedElementNode(child)) {
+            // Skip over non-element child nodes (just text nodes)
+            continue;
+        }
+        if (child.name === targetComponentName &&
+            checkElementMatches(child, matcher)) {
+            // We found a match, so add it to the find result
+            addMatchToFindResult(findResult, child, options);
+            if (findFirstOnly) {
+                return;
+            }
+        }
+        // We only search in nested children and fragment props if we're not only looking for children
+        if (!findDirectChildrenOnly) {
+            // Search for the component in the fragment props
+            const { props } = child;
+            const fragmentProps = __hubSpotComponentRegistry.getComponentFragmentPropNames(child.name);
+            for (const fragmentPropName of fragmentProps) {
+                const maybeFragment = props[fragmentPropName];
+                // NOTE: As part of the conversion process of converting remote nodes to rendered nodes, we
+                //       create a RenderedFragmentNode for each fragment prop and put that into the props object.
+                if (isRenderedFragmentNode(maybeFragment)) {
+                    findInternalHelper(maybeFragment, options, findResult);
+                    if (findFirstOnly && findResult.match) {
+                        return;
+                    }
+                }
+            }
+            // Search for the component in the child
+            findInternalHelper(child, options, findResult);
+            if (findFirstOnly && findResult.match) {
+                return;
+            }
+        }
+    }
+    return;
+};
+/**
+ * Internal utility that centralizes finding elements in the rendered tree (including error handling).
+ *
+ * @param parentNode The parent node to search in.
+ * @param options The options for the find operation.
+ * @returns The find result.
+ */
+const findInternal = (parentNode, options) => {
+    const { document } = parentNode;
+    const { targetComponent, findMethodName, shouldThrowErrorIfNotFound } = options;
+    const targetComponentName = __hubSpotComponentRegistry.getComponentName(targetComponent);
+    if (!targetComponentName) {
+        throw new FindInvalidComponentError({
+            findMethodName,
+        });
+    }
+    // We always validate the document before running the find operation since the document may
+    // have been updated asynchronously in the background.
+    if (document.hasInvalidComponentNames()) {
+        throw new InvalidComponentsError(document.rootNode);
+    }
+    // Initialize the find result that will be mutated in place
+    const findResult = {
+        match: null,
+        allMatches: [],
+    };
+    // Run the internal find helper to recursively search the rendered tree
+    findInternalHelper(parentNode, options, findResult);
+    if (findResult.match === null && shouldThrowErrorIfNotFound) {
+        throw new ComponentNotFoundError({
+            findMethodName: options.findMethodName,
+            parentNode,
+            componentName: targetComponentName,
+        });
+    }
+    return findResult;
+};
+/**
+ * Finds the first descendant element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first element node that matches the given component or `null` if no match is found.
+ */
+export const maybeFind = (parentNode, targetComponent, matcher) => {
+    const { match } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: true,
+        findDirectChildrenOnly: false,
+        findMethodName: 'maybeFind',
+        shouldThrowErrorIfNotFound: false,
+    });
+    return match;
+};
+/**
+ * Finds the first descendant element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first element node that matches the given component.
+ */
+export const find = (parentNode, targetComponent, matcher) => {
+    const { match } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: true,
+        findDirectChildrenOnly: false,
+        findMethodName: 'find',
+        shouldThrowErrorIfNotFound: true,
+    });
+    return match;
+};
+/**
+ * Finds all descendant element nodes that match the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns An array of element nodes that match the given component.
+ */
+export const findAll = (parentNode, targetComponent, matcher) => {
+    const { allMatches } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: false,
+        findDirectChildrenOnly: false,
+        findMethodName: 'findAll',
+        shouldThrowErrorIfNotFound: false,
+    });
+    return allMatches;
+};
+/**
+ * Finds the first direct child element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first child element node that matches the given component.
+ */
+export const findChild = (parentNode, targetComponent, matcher) => {
+    const { match } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: true,
+        findDirectChildrenOnly: true,
+        findMethodName: 'findChild',
+        shouldThrowErrorIfNotFound: true,
+    });
+    return match;
+};
+/**
+ * Finds the first direct child element node that matches the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns The first child element node that matches the given component.
+ */
+export const maybeFindChild = (parentNode, targetComponent, matcher) => {
+    const { match } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: true,
+        findDirectChildrenOnly: true,
+        findMethodName: 'maybeFindChild',
+        shouldThrowErrorIfNotFound: false,
+    });
+    return match;
+};
+/**
+ * Finds all direct child element nodes that match the given component.
+ *
+ * @param parentNode The parent node to search in.
+ * @param targetComponent The component to find.
+ * @param matcher An optional matcher to filter the elements.
+ * @returns An array of child element nodes that match the given component.
+ */
+export const findAllChildren = (parentNode, targetComponent, matcher) => {
+    const { allMatches } = findInternal(parentNode, {
+        targetComponent,
+        matcher,
+        findFirstOnly: false,
+        findDirectChildrenOnly: true,
+        findMethodName: 'findAllChildren',
+        shouldThrowErrorIfNotFound: false,
+    });
+    return allMatches;
+};

package/dist/experimental/testing/internal/root.d.ts

@@ -0,0 +1,8 @@
+import type { RenderedDocumentInternal, RenderedRootNodeInternal } from './types-internal';
+/**
+ * Creates a rendered root node.
+ *
+ * @param document The document that the root belongs to.
+ * @returns A rendered root node.
+ */
+export declare const createRootNode: (document: RenderedDocumentInternal) => RenderedRootNodeInternal;

package/dist/experimental/testing/internal/root.js

@@ -0,0 +1,44 @@
+import { RenderedNodeType } from '../types';
+import { EMPTY_CHILDREN } from './constants';
+import { debugLog } from './debug';
+import { printNode } from './print';
+import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from './query';
+/**
+ * Creates a rendered root node.
+ *
+ * @param document The document that the root belongs to.
+ * @returns A rendered root node.
+ */
+export const createRootNode = (document) => {
+    const rootNode = {
+        nodeType: RenderedNodeType.Root,
+        text: null,
+        children: EMPTY_CHILDREN,
+        document,
+        debugLog: (label) => {
+            debugLog(rootNode, label);
+        },
+        find: (targetComponent, matcher) => {
+            return find(rootNode, targetComponent, matcher);
+        },
+        findAll: (targetComponent, matcher) => {
+            return findAll(rootNode, targetComponent, matcher);
+        },
+        findChild: (targetComponent, matcher) => {
+            return findChild(rootNode, targetComponent, matcher);
+        },
+        findAllChildren: (targetComponent, matcher) => {
+            return findAllChildren(rootNode, targetComponent, matcher);
+        },
+        maybeFind: (targetComponent, matcher) => {
+            return maybeFind(rootNode, targetComponent, matcher);
+        },
+        maybeFindChild: (targetComponent, matcher) => {
+            return maybeFindChild(rootNode, targetComponent, matcher);
+        },
+        toString: () => {
+            return printNode(rootNode);
+        },
+    };
+    return rootNode;
+};

package/dist/experimental/testing/internal/text.d.ts

@@ -0,0 +1,9 @@
+import { type RemoteRoot, type RemoteText } from '@remote-ui/core';
+import { type RenderedTextNode } from '../types';
+/**
+ * Creates a rendered text node.
+ *
+ * @param remoteText The remote text node or string to create a text node from.
+ * @returns A rendered text node.
+ */
+export declare const createTextNode: (remoteText: RemoteText<RemoteRoot> | string) => RenderedTextNode;

package/dist/experimental/testing/internal/text.js

@@ -0,0 +1,16 @@
+import { RenderedNodeType } from '../types';
+/**
+ * Creates a rendered text node.
+ *
+ * @param remoteText The remote text node or string to create a text node from.
+ * @returns A rendered text node.
+ */
+export const createTextNode = (remoteText) => {
+    const text = typeof remoteText === 'string' ? remoteText : remoteText.text;
+    const textNode = {
+        nodeType: RenderedNodeType.Text,
+        text,
+        toString: () => text,
+    };
+    return textNode;
+};

package/dist/experimental/testing/types.d.ts

@@ -1,4 +1,4 @@
-import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../../types';
+import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../../__synced__/types/shared.synced';
 /**
  * The type of a rendered node.
  */

package/dist/hubspot.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import type { ExtensionPoints, ExtensionPointApi, ServerlessRunnerParams, HubSpotFetchRequestURI, HubSpotFetchOptions } from './types';
+import type { ExtensionPoints, ExtensionPointApi, ServerlessRunnerParams, HubSpotFetchRequestURI, HubSpotFetchOptions } from './__synced__/types/index.synced';
 export declare function extend_V2<ExtensionPointName extends keyof ExtensionPoints>(renderExtensionCallback: (api: ExtensionPointApi<ExtensionPointName>) => ReactElement<any>): any;
 export declare function serverless<T = any>(name: ServerlessRunnerParams['name'], options?: Omit<ServerlessRunnerParams, 'name'>): Promise<T>;
 export declare function fetch(url: HubSpotFetchRequestURI, options?: HubSpotFetchOptions): Promise<Response>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import './clientTypes';
 export { hubspot } from './hubspot';
 export { logger } from './logger';
-export * from './coreComponents';
-export * from './types';
+export * from './__synced__/types/index.synced';
+export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from './__synced__/remoteComponents.synced';

package/dist/index.js

@@ -2,5 +2,5 @@
 import './clientTypes';
 export { hubspot } from './hubspot';
 export { logger } from './logger';
-export * from './coreComponents';
-export * from './types';
+export * from './__synced__/types/index.synced';
+export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from './__synced__/remoteComponents.synced';

package/dist/pages/home/index.d.ts

@@ -1 +1 @@
-export type { HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, } from '../../__synced__/appHomeRemoteComponents.synced';
+export { HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, } from '../../__synced__/appHomeRemoteComponents.synced';

package/dist/pages/home/index.js

@@ -1 +1 @@
-export {};
+export { HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, } from '../../__synced__/appHomeRemoteComponents.synced';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -8,6 +8,7 @@
   "scripts": {
     "clean": "rm -rf dist/",
     "build": "npm run clean && tsc",
+    "check:tsc": "tsc",
     "watch": "npm run clean && tsc --watch",
     "prepare": "npm run build",
     "lint": "echo 'No linter configured for @hubspot/ui-extensions'",
@@ -29,15 +30,16 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@remote-ui/core": "2.2.7",
     "@remote-ui/react": "5.0.2",
-    "react": "18.2.0"
+    "react": "18.3.1"
   },
   "engines": {
     "node": ">=16"
   },
   "peerDependencies": {
     "@remote-ui/react": "^5.0.0",
-    "react": "^18.2.0",
+    "react": "18.3.1",
     "typescript": "^5.0.4"
   },
   "peerDependenciesMeta": {
@@ -58,9 +60,12 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.13",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "18.3.1",
     "react-reconciler": "^0.29.0",
     "ts-jest": "^29.1.1",
     "tsd": "^0.33.0",
@@ -69,5 +74,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "aeebbd7fb6aefc9aeb948cc9ca4028e94d5320cc"
+  "gitHead": "5a5fb7266fc9f45165f4cc5dc011773beccf5057"
 }