@hubspot/ui-extensions-sdk-api-metadata 0.12.0 → 0.12.2

package/dist/__tests__/component-props-docs.spec.js

@@ -1,14 +1,295 @@
 import path from 'node:path';
 import { ComponentName, getComponentPropsDocumentation } from "../index.js";
 const snapshotsDir = path.join(__dirname, '__snapshots__');
-const runComponentPropsSnapshotTest = (componentName) => {
+const runComponentPropsSnapshotTest = async (componentName) => {
     const propsDocumentation = getComponentPropsDocumentation(componentName);
-    expect(`${JSON.stringify(propsDocumentation, null, 2)}\n`).toMatchFileSnapshot(path.join(snapshotsDir, `${componentName}.snapshot.json`));
+    await expect(`${JSON.stringify(propsDocumentation, null, 2)}\n`).toMatchFileSnapshot(path.join(snapshotsDir, `${componentName}.snapshot.json`));
 };
 describe('getComponentPropsDocumentation', () => {
-    it('should return the correct component prop documentation for the Accordion component', () => {
-        runComponentPropsSnapshotTest(ComponentName.Accordion);
+    it('should return the correct component prop documentation for the Accordion component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Accordion);
+    });
+    it('should return the correct component prop documentation for the Alert component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Alert);
+    });
+    it('should return the correct component prop documentation for the AutoGrid component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.AutoGrid);
+    });
+    it('should return the correct component prop documentation for the BarChart component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.BarChart);
+    });
+    it('should return the correct component prop documentation for the Box component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Box);
+    });
+    it('should return the correct component prop documentation for the Button component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Button);
+    });
+    it('should return the correct component prop documentation for the ButtonRow component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ButtonRow);
+    });
+    it('should return the correct component prop documentation for the Card component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Card);
+    });
+    it('should return the correct component prop documentation for the Center component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Center);
+    });
+    it('should return the correct component prop documentation for the Checkbox component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Checkbox);
+    });
+    it('should return the correct component prop documentation for the CrmActionButton component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmActionButton);
+    });
+    it('should return the correct component prop documentation for the CrmActionLink component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmActionLink);
+    });
+    it('should return the correct component prop documentation for the CrmAssociationPivot component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmAssociationPivot);
+    });
+    it('should return the correct component prop documentation for the CrmAssociationPropertyList component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmAssociationPropertyList);
+    });
+    it('should return the correct component prop documentation for the CrmAssociationStageTracker component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmAssociationStageTracker);
+    });
+    it('should return the correct component prop documentation for the CrmAssociationTable component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmAssociationTable);
+    });
+    it('should return the correct component prop documentation for the CrmCardActions component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmCardActions);
+    });
+    it('should return the correct component prop documentation for the CrmDataHighlight component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmDataHighlight);
+    });
+    it('should return the correct component prop documentation for the CrmPropertyList component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmPropertyList);
+    });
+    it('should return the correct component prop documentation for the CrmReport component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmReport);
+    });
+    it('should return the correct component prop documentation for the CrmSimpleDeadline component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmSimpleDeadline);
+    });
+    it('should return the correct component prop documentation for the CrmStageTracker component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmStageTracker);
+    });
+    it('should return the correct component prop documentation for the CrmStatistics component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CrmStatistics);
+    });
+    it('should return the correct component prop documentation for the CurrencyInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.CurrencyInput);
+    });
+    it('should return the correct component prop documentation for the DateInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.DateInput);
+    });
+    it('should return the correct component prop documentation for the DescriptionList component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.DescriptionList);
+    });
+    it('should return the correct component prop documentation for the DescriptionListItem component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.DescriptionListItem);
+    });
+    it('should return the correct component prop documentation for the Divider component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Divider);
+    });
+    it('should return the correct component prop documentation for the Dropdown component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Dropdown);
+    });
+    it('should return the correct component prop documentation for the DropdownButtonItem component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.DropdownButtonItem);
+    });
+    it('should return the correct component prop documentation for the EmptyState component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.EmptyState);
+    });
+    it('should return the correct component prop documentation for the ErrorState component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ErrorState);
+    });
+    it('should return the correct component prop documentation for the ExpandableText component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ExpandableText);
+    });
+    it('should return the correct component prop documentation for the FileInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.FileInput);
+    });
+    it('should return the correct component prop documentation for the Flex component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Flex);
+    });
+    it('should return the correct component prop documentation for the Form component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Form);
+    });
+    it('should return the correct component prop documentation for the Grid component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Grid);
+    });
+    it('should return the correct component prop documentation for the GridItem component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.GridItem);
+    });
+    it('should return the correct component prop documentation for the HeaderActions component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.HeaderActions);
+    });
+    it('should return the correct component prop documentation for the Heading component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Heading);
+    });
+    it('should return the correct component prop documentation for the Icon component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Icon);
+    });
+    it('should return the correct component prop documentation for the Iframe component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Iframe);
+    });
+    it('should return the correct component prop documentation for the Illustration component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Illustration);
+    });
+    it('should return the correct component prop documentation for the Image component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Image);
+    });
+    it('should return the correct component prop documentation for the Inline component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Inline);
+    });
+    it('should return the correct component prop documentation for the Input component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Input);
+    });
+    it('should return the correct component prop documentation for the LineChart component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.LineChart);
+    });
+    it('should return the correct component prop documentation for the Link component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Link);
+    });
+    it('should return the correct component prop documentation for the List component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.List);
+    });
+    it('should return the correct component prop documentation for the LoadingButton component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.LoadingButton);
+    });
+    it('should return the correct component prop documentation for the LoadingSpinner component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.LoadingSpinner);
+    });
+    it('should return the correct component prop documentation for the MediaObject component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.MediaObject);
+    });
+    it('should return the correct component prop documentation for the Modal component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Modal);
+    });
+    it('should return the correct component prop documentation for the ModalBody component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ModalBody);
+    });
+    it('should return the correct component prop documentation for the ModalFooter component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ModalFooter);
+    });
+    it('should return the correct component prop documentation for the MultiSelect component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.MultiSelect);
+    });
+    it('should return the correct component prop documentation for the NumberInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.NumberInput);
+    });
+    it('should return the correct component prop documentation for the Panel component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Panel);
+    });
+    it('should return the correct component prop documentation for the PanelBody component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.PanelBody);
+    });
+    it('should return the correct component prop documentation for the PanelFooter component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.PanelFooter);
+    });
+    it('should return the correct component prop documentation for the PanelSection component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.PanelSection);
+    });
+    it('should return the correct component prop documentation for the Popover component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Popover);
+    });
+    it('should return the correct component prop documentation for the PrimaryHeaderActionButton component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.PrimaryHeaderActionButton);
+    });
+    it('should return the correct component prop documentation for the ProgressBar component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ProgressBar);
+    });
+    // FIXME: RadioButtonProps is not currently supported because it is a union type and not an object type.
+    it.skip('should return the correct component prop documentation for the RadioButton component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.RadioButton);
+    });
+    it('should return the correct component prop documentation for the ScoreCircle component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ScoreCircle);
+    });
+    it('should return the correct component prop documentation for the SearchInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.SearchInput);
+    });
+    it('should return the correct component prop documentation for the SecondaryHeaderActionButton component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.SecondaryHeaderActionButton);
+    });
+    it('should return the correct component prop documentation for the Select component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Select);
+    });
+    it('should return the correct component prop documentation for the SettingsView component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.SettingsView);
+    });
+    it('should return the correct component prop documentation for the Stack2 component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Stack2);
+    });
+    it('should return the correct component prop documentation for the Statistics component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Statistics);
+    });
+    it('should return the correct component prop documentation for the StatisticsItem component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.StatisticsItem);
+    });
+    it('should return the correct component prop documentation for the StatisticsTrend component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.StatisticsTrend);
+    });
+    it('should return the correct component prop documentation for the StatusTag component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.StatusTag);
+    });
+    it('should return the correct component prop documentation for the StepIndicator component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.StepIndicator);
+    });
+    it('should return the correct component prop documentation for the StepperInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.StepperInput);
+    });
+    it('should return the correct component prop documentation for the Tab component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Tab);
+    });
+    // FIXME: TableProps is not currently supported because it is a union type and not an object type.
+    it.skip('should return the correct component prop documentation for the Table component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Table);
+    });
+    it('should return the correct component prop documentation for the TableBody component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableBody);
+    });
+    it('should return the correct component prop documentation for the TableCell component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableCell);
+    });
+    it('should return the correct component prop documentation for the TableFooter component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableFooter);
+    });
+    it('should return the correct component prop documentation for the TableHead component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableHead);
+    });
+    // FIXME: TableHeaderProps is not currently supported because it is a union type and not an object type.
+    it.skip('should return the correct component prop documentation for the TableHeader component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableHeader);
+    });
+    it('should return the correct component prop documentation for the TableRow component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TableRow);
+    });
+    it('should return the correct component prop documentation for the Tabs component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Tabs);
+    });
+    it('should return the correct component prop documentation for the Tag component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Tag);
+    });
+    it('should return the correct component prop documentation for the Text component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Text);
+    });
+    it('should return the correct component prop documentation for the TextArea component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TextArea);
+    });
+    it('should return the correct component prop documentation for the Tile component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Tile);
+    });
+    it('should return the correct component prop documentation for the TimeInput component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.TimeInput);
+    });
+    it('should return the correct component prop documentation for the Toggle component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Toggle);
+    });
+    // FIXME: ToggleGroupProps is not currently supported because it is a union type and not an object type.
+    it.skip('should return the correct component prop documentation for the ToggleGroup component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.ToggleGroup);
+    });
+    it('should return the correct component prop documentation for the Tooltip component', async () => {
+        await runComponentPropsSnapshotTest(ComponentName.Tooltip);
     });
-    // NOTE: We will continue to add more snapshot tests for each component so that we can verify that
-    // we are producing the correct documentation for each component.
 });

package/dist/__tests__/jsx-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/jsx-utils.spec.js

@@ -0,0 +1,162 @@
+import { describe, expect, it } from 'vitest';
+import { convertHtmlToJsx, wrapCodeInHtmlCodeTags, } from "../internal/utils/jsx-utils.js";
+describe('convertHtmlToJsx', () => {
+    describe('void elements', () => {
+        it('should convert <br> to self-closing tag', () => {
+            const input = '<strong>Hello<br>World</strong>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><strong>Hello<br />World</strong></>');
+        });
+        it('should convert <hr> to self-closing tag', () => {
+            const input = '<div>Section 1<hr>Section 2</div>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><div>Section 1<hr />Section 2</div></>');
+        });
+        it('should convert <img> to self-closing tag', () => {
+            const input = '<img src="test.png">';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><img src="test.png" /></>');
+        });
+        it('should convert <input> to self-closing tag', () => {
+            const input = '<input type="text" name="field">';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><input type="text" name="field" /></>');
+        });
+        it('should handle multiple void elements', () => {
+            const input = '<div><img src="a.png"><br><img src="b.png"></div>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><div><img src="a.png" /><br /><img src="b.png" /></div></>');
+        });
+        it('should preserve already self-closing tags', () => {
+            const input = '<strong>Hello<br/>World</strong>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><strong>Hello<br />World</strong></>');
+        });
+    });
+    describe('attributes', () => {
+        it('should preserve attributes on void elements', () => {
+            const input = '<img src="test.png" alt="Test Image" width="100">';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><img src="test.png" alt="Test Image" width="100" /></>');
+        });
+        it('should preserve attributes on regular elements', () => {
+            const input = '<div class="container" id="main">Content</div>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><div class="container" id="main">Content</div></>');
+        });
+        it('should handle attributes with special characters', () => {
+            const input = '<a href="https://example.com?foo=bar&baz=qux">Link</a>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toContain('<><a href="https://example.com?foo=bar&amp;baz=qux">Link</a></>');
+        });
+    });
+    describe('nested elements', () => {
+        it('should handle nested elements correctly', () => {
+            const input = '<div><p>Text with <strong>bold</strong> and <em>italic</em></p></div>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><div><p>Text with <strong>bold</strong> and <em>italic</em></p></div></>');
+        });
+        it('should handle void elements within nested structures', () => {
+            const input = '<div><p>Line 1<br>Line 2</p><hr><p>Line 3</p></div>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><div><p>Line 1<br />Line 2</p><hr /><p>Line 3</p></div></>');
+        });
+    });
+    describe('text content', () => {
+        it('should preserve text content', () => {
+            const input = '<strong>Hello World</strong>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><strong>Hello World</strong></>');
+        });
+        it('should preserve whitespace in text', () => {
+            const input = 'Hello   World';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>Hello   World</>');
+        });
+        it('should handle special characters in text', () => {
+            const input = '5 &lt; 10 &amp; 10 &gt; 5';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>5 &lt; 10 &amp; 10 &gt; 5</>');
+        });
+    });
+    describe('inline elements', () => {
+        it('should handle <code> tags', () => {
+            const input = 'Use <code>const</code> instead';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>Use <code>const</code> instead</>');
+        });
+        it('should handle <a> tags', () => {
+            const input = 'Visit <a href="https://example.com">example</a>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toEqual('<>Visit <a href="https://example.com">example</a></>');
+        });
+        it('should handle <strong> and <em> tags', () => {
+            const input = '<strong>Bold</strong> and <em>italic</em>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><strong>Bold</strong> and <em>italic</em></>');
+        });
+    });
+    describe('edge cases', () => {
+        it('should handle empty elements', () => {
+            const input = '<strong></strong>';
+            const output = convertHtmlToJsx(input);
+            // Empty non-void elements remain as open/close tags (not self-closing)
+            expect(output).toBe('<><strong></strong></>');
+        });
+        it('should handle plain text without tags', () => {
+            const input = 'Just plain text';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>Just plain text</>');
+        });
+        it('should handle empty string', () => {
+            const input = '';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<></>');
+        });
+        it('should handle fragments with multiple root elements', () => {
+            const input = '<p>First</p><p>Second</p>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><p>First</p><p>Second</p></>');
+        });
+        it('should handle list elements', () => {
+            const input = '<ul><li>Item 1</li><li>Item 2</li></ul>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<><ul><li>Item 1</li><li>Item 2</li></ul></>');
+        });
+    });
+    describe('markdown-like output', () => {
+        it('should handle markdown-generated links', () => {
+            const input = 'Check out <a href="https://example.com">this link</a> for more';
+            const output = convertHtmlToJsx(input);
+            expect(output).toEqual('<>Check out <a href="https://example.com">this link</a> for more</>');
+        });
+        it('should handle markdown-generated code blocks', () => {
+            const input = '<p>Use <code>true</code> instead of <code>false</code></p>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>Use <code>true</code> instead of <code>false</code></>');
+        });
+        it('should handle markdown-generated emphasis', () => {
+            const input = '<p>This is <strong>important</strong> and <em>emphasized</em></p>';
+            const output = convertHtmlToJsx(input);
+            expect(output).toBe('<>This is <strong>important</strong> and <em>emphasized</em></>');
+        });
+    });
+});
+describe('wrapCodeInHtmlCodeTags', () => {
+    it('should wrap text in code tags', () => {
+        const result = wrapCodeInHtmlCodeTags('const x = 5');
+        expect(result).toBe('<code>const x = 5</code>');
+    });
+    it('should escape HTML special characters', () => {
+        const result = wrapCodeInHtmlCodeTags('<div>');
+        expect(result).toBe('<code>&lt;div&gt;</code>');
+    });
+    it('should escape curly braces for JSX', () => {
+        const result = wrapCodeInHtmlCodeTags('{ foo: "bar" }');
+        expect(result).toBe('<code>&#123; foo: "bar" &#125;</code>');
+    });
+    it('should escape ampersands', () => {
+        const result = wrapCodeInHtmlCodeTags('a && b');
+        expect(result).toBe('<code>a &amp;&amp; b</code>');
+    });
+});

package/dist/__tests__/markdown-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/markdown-utils.spec.js

@@ -0,0 +1,13 @@
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { renderMarkdownToJsx } from "../internal/utils/markdown-utils.js";
+const snapshotsDir = path.join(__dirname, '__snapshots__');
+describe('renderMarkdownToJsx', () => {
+    it('should handle a mix of markdown such as lists, code blocks, and links', async () => {
+        const input = `[example link](https://example.com) Distributes *components* based on the **available** empty space around them. Options are as follows:
+- \`initial\`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
+- Number: tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.`;
+        const result = renderMarkdownToJsx(input);
+        await expect(result).toMatchFileSnapshot(path.join(snapshotsDir, 'markdown-utils/flex-description.snapshot.html'));
+    });
+});

package/dist/component-props-docs.js

@@ -1,8 +1,8 @@
-import { isInlinedTypeReferenceNode, isObjectNode, isTypeReferenceNode, } from '@hubspot/ts-export-types-reader';
+import { isObjectNode, isTypeReferenceNode, } from '@hubspot/ts-export-types-reader';
 import { componentPropsReader } from "./__generated__/component-props.js";
-import { renderPropTypeToHtml, } from "./internal/render-prop-type.js";
-import { getDefaultValueFromJsdocTags, getSeeTagsFromJsdocTags, } from "./internal/utils/jsdoc-utils.js";
-import { renderInlineMarkdownToHtml } from "./internal/utils/markdown-utils.js";
+import { renderPropTypeToJsx, } from "./internal/render-prop-type.js";
+import { getDefaultValueFromJsdocTags, getSeeTagsFromJsdocTags, hasDeprecatedJsdocTag, } from "./internal/utils/jsdoc-utils.js";
+import { renderMarkdownToJsx } from "./internal/utils/markdown-utils.js";
 import { getComponentTypeSource } from "./internal/get-type-source.js";
 /**
  * Recursively resolves an API node to an ObjectNode if possible.
@@ -27,10 +27,6 @@ const maybeGetPropsObjectHelper = (apiNode) => {
     if (isObjectNode(apiNode)) {
         return apiNode;
     }
-    // If it's an inlined type reference, recursively resolve the inner type
-    if (isInlinedTypeReferenceNode(apiNode)) {
-        return maybeGetPropsObjectHelper(apiNode.type);
-    }
     // If it's a type reference, look up the referenced type and resolve it
     if (isTypeReferenceNode(apiNode)) {
         const referencedNode = componentPropsReader.findReferencedTypeById(apiNode.typeId);
@@ -45,14 +41,14 @@ const embeddedLinkTagRegex = /\{@link\s+(\S+)(?:\s+([^}]+))?\s*\}/g;
  * Renders a JSDoc @see tag's text content to HTML.
  *
  * Converts embedded `{@link}` tags in the see text to markdown link syntax,
- * then renders the markdown to HTML.
+ * then renders the markdown to JSX.
  *
  * @param seeText - The text of the see tag
  * @returns The see tag text rendered as HTML
  */
-const renderSeeItemToHtml = (seeText) => {
+const renderSeeItemToJsx = (seeText) => {
     // Replace all embedded {@link} tags with equivalent markdown link syntax
-    return renderInlineMarkdownToHtml(seeText.replaceAll(embeddedLinkTagRegex, (match, url, title) => {
+    return renderMarkdownToJsx(seeText.replaceAll(embeddedLinkTagRegex, (match, url, title) => {
         return `[${title ?? url}](${url})`;
     }));
 };
@@ -77,8 +73,10 @@ export const getComponentPropsDocumentation = (componentName) => {
     if (!propsObject) {
         throw new Error(`Props object not found for component "${componentName}" (${exportName} in ${exportPath})`);
     }
-    // Sort properties first by required status, then alphabetically by name for consistent output
-    const props = [...propsObject.properties].sort((a, b) => {
+    // Filter out deprecated properties, then sort by required status and alphabetically by name for consistent output
+    const props = [...propsObject.properties]
+        .filter((prop) => !hasDeprecatedJsdocTag(prop.jsdoc?.tags))
+        .sort((a, b) => {
         const aRequired = a.isOptional !== true;
         const bRequired = b.isOptional !== true;
         if (aRequired !== bRequired) {
@@ -91,24 +89,24 @@ export const getComponentPropsDocumentation = (componentName) => {
         const jsdocTags = prop.jsdoc?.tags ?? [];
         const renderTypeContext = {
             typesReader: componentPropsReader,
-            foundTypeIds: new Set(),
+            typePath: [],
         };
-        const typeHtml = renderPropTypeToHtml(renderTypeContext, prop.type);
-        const descriptionHtml = renderInlineMarkdownToHtml(jsdocText);
+        const typeJsx = renderPropTypeToJsx(renderTypeContext, prop.type);
+        const descriptionJsx = renderMarkdownToJsx(jsdocText);
         // Extract default value from JSDoc tags if present
         const defaultValue = getDefaultValueFromJsdocTags(jsdocTags);
-        const seeHtmlItems = getSeeTagsFromJsdocTags(jsdocTags).map(renderSeeItemToHtml);
+        const seeJsxItems = getSeeTagsFromJsdocTags(jsdocTags).map(renderSeeItemToJsx);
         const componentProp = {
             name: prop.name,
             required: prop.isOptional !== true,
-            typeJsx: `<>${typeHtml}</>`,
-            descriptionJsx: `<>${descriptionHtml}</>`,
+            typeJsx,
+            descriptionJsx,
         };
-        if (seeHtmlItems.length > 0) {
-            componentProp.seeJsxItems = seeHtmlItems.map((seeHtmlItem) => `<>${seeHtmlItem}</>`);
+        if (seeJsxItems.length > 0) {
+            componentProp.seeJsxItems = seeJsxItems;
         }
         if (defaultValue != null) {
-            componentProp.defaultValueJsx = `<>${renderInlineMarkdownToHtml(defaultValue)}</>`;
+            componentProp.defaultValueJsx = renderMarkdownToJsx(defaultValue);
         }
         return componentProp;
     });