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

package/dist/internal/utils/jsx-utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Wraps code as text in HTML code tags for HTML rendering. Special HTML characters are escaped.
+ *
+ * @param value - The code as text to wrap in HTML code tags
+ * @returns The code as text wrapped in HTML code tags
+ */
+export declare const wrapCodeInHtmlCodeTags: (value: string) => string;
+/**
+ * Converts HTML to XHTML (well-formed XML) by ensuring all void elements
+ * are self-closing and the output is valid XML.
+ *
+ * This is necessary because the generated HTML will be embedded in JSX
+ * fragments, which require valid XML syntax. For example, `<br>` must
+ * become `<br/>` and `<img src="...">` must become `<img src="..."/>`.
+ *
+ * Outermost `<p>` tags are stripped when the content is a single paragraph to allow
+ * for cleaner inline rendering. When multiple block elements exist (e.g., text followed
+ * by a list), the structure is preserved.
+ *
+ * @param html - The HTML string to convert
+ * @returns The HTML converted to XHTML format with self-closing tags
+ *
+ * @example
+ * ```typescript
+ * convertHtmlToJsx('<p>Hello<br>World</p>')
+ * // Returns: 'Hello<br/>World'
+ *
+ * convertHtmlToJsx('<img src="test.png">')
+ * // Returns: '<img src="test.png"/>'
+ * ```
+ */
+export declare const convertHtmlToJsx: (html: string) => string;

package/dist/internal/utils/jsx-utils.js

@@ -0,0 +1,77 @@
+import { parseDocument, DomUtils } from 'htmlparser2';
+import serialize from 'dom-serializer';
+const escapeJsxExpressions = (jsx) => {
+    return jsx.replaceAll('{', '{').replaceAll('}', '}');
+};
+const sanitizeHtmlTextForCodeBlock = (htmlText) => {
+    return escapeJsxExpressions(htmlText
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;'));
+    // NOTE: We are not putting HTML inside an HTML attribute so we don't need to escape quotes or apostrophes
+};
+/**
+ * Wraps code as text in HTML code tags for HTML rendering. Special HTML characters are escaped.
+ *
+ * @param value - The code as text to wrap in HTML code tags
+ * @returns The code as text wrapped in HTML code tags
+ */
+export const wrapCodeInHtmlCodeTags = (value) => {
+    return `<code>${sanitizeHtmlTextForCodeBlock(value)}</code>`;
+};
+const stripOutermostParagraphNode = (dom) => {
+    // Check if there's exactly one root element and it's a <p> tag
+    const rootChildren = dom.children;
+    if (rootChildren.length !== 1) {
+        return;
+    }
+    const firstChild = rootChildren[0];
+    if (firstChild.type !== 'tag' || firstChild.name !== 'p') {
+        return;
+    }
+    // Move all of the children of the <p> element node to the root DOM node
+    const childrenToMove = [...firstChild.childNodes];
+    for (const child of childrenToMove) {
+        DomUtils.appendChild(dom, child);
+    }
+    // Now remove the <p> element node
+    DomUtils.removeElement(firstChild);
+};
+/**
+ * Converts HTML to XHTML (well-formed XML) by ensuring all void elements
+ * are self-closing and the output is valid XML.
+ *
+ * This is necessary because the generated HTML will be embedded in JSX
+ * fragments, which require valid XML syntax. For example, `<br>` must
+ * become `<br/>` and `<img src="...">` must become `<img src="..."/>`.
+ *
+ * Outermost `<p>` tags are stripped when the content is a single paragraph to allow
+ * for cleaner inline rendering. When multiple block elements exist (e.g., text followed
+ * by a list), the structure is preserved.
+ *
+ * @param html - The HTML string to convert
+ * @returns The HTML converted to XHTML format with self-closing tags
+ *
+ * @example
+ * ```typescript
+ * convertHtmlToJsx('<p>Hello<br>World</p>')
+ * // Returns: 'Hello<br/>World'
+ *
+ * convertHtmlToJsx('<img src="test.png">')
+ * // Returns: '<img src="test.png"/>'
+ * ```
+ */
+export const convertHtmlToJsx = (html) => {
+    // Parse HTML into a DOM structure (parse as HTML to handle loose syntax)
+    const dom = parseDocument(html, {
+        xmlMode: false,
+    });
+    // Remove unnecessary outermost <p> tag
+    stripOutermostParagraphNode(dom);
+    // Serialize back to string with XML rules (self-closing tags, etc.)
+    const xhtml = serialize(dom, {
+        xmlMode: true, // Use XML/XHTML serialization rules
+        selfClosingTags: true, // Ensure void elements are self-closing
+    });
+    return `<>${escapeJsxExpressions(xhtml)}</>`;
+};

package/dist/internal/utils/markdown-utils.d.ts

@@ -1,7 +1,12 @@
 /**
- * Renders inline markdown text to HTML.
+ * Renders markdown text to JSX.
+ *
+ * Supports both inline elements (emphasis, code spans, links) and block-level
+ * elements (lists, paragraphs, headings). The output is converted to XHTML format
+ * to ensure it's valid XML/JSX, with all void elements properly self-closing
+ * (e.g., `<br/>` instead of `<br>`).
  *
  * @param markdownText - The markdown text to render to HTML
- * @returns The markdown text rendered to HTML
+ * @returns The markdown text rendered to XHTML
  */
-export declare const renderInlineMarkdownToHtml: (markdownText: string) => string;
+export declare const renderMarkdownToJsx: (markdownText: string) => string;

package/dist/internal/utils/markdown-utils.js

@@ -1,14 +1,21 @@
 import { Marked } from 'marked';
+import { convertHtmlToJsx } from "./jsx-utils.js";
 const markedInstance = new Marked({
     breaks: true,
     gfm: true,
 });
 /**
- * Renders inline markdown text to HTML.
+ * Renders markdown text to JSX.
+ *
+ * Supports both inline elements (emphasis, code spans, links) and block-level
+ * elements (lists, paragraphs, headings). The output is converted to XHTML format
+ * to ensure it's valid XML/JSX, with all void elements properly self-closing
+ * (e.g., `<br/>` instead of `<br>`).
  *
  * @param markdownText - The markdown text to render to HTML
- * @returns The markdown text rendered to HTML
+ * @returns The markdown text rendered to XHTML
  */
-export const renderInlineMarkdownToHtml = (markdownText) => {
-    return markedInstance.parseInline(markdownText).toString().trim();
+export const renderMarkdownToJsx = (markdownText) => {
+    const html = markedInstance.parse(markdownText).toString().trim();
+    return convertHtmlToJsx(html);
 };

package/dist/types.d.ts

@@ -35,5 +35,98 @@ export interface ComponentPropDocumentation {
  * FUTURE: We should use code generation to generate this enum.
  */
 export declare enum ComponentName {
-    Accordion = "Accordion"
+    Accordion = "Accordion",
+    Alert = "Alert",
+    AutoGrid = "AutoGrid",
+    BarChart = "BarChart",
+    Box = "Box",
+    Button = "Button",
+    ButtonRow = "ButtonRow",
+    Card = "Card",
+    Center = "Center",
+    Checkbox = "Checkbox",
+    CrmActionButton = "CrmActionButton",
+    CrmActionLink = "CrmActionLink",
+    CrmAssociationPivot = "CrmAssociationPivot",
+    CrmAssociationPropertyList = "CrmAssociationPropertyList",
+    CrmAssociationStageTracker = "CrmAssociationStageTracker",
+    CrmAssociationTable = "CrmAssociationTable",
+    CrmCardActions = "CrmCardActions",
+    CrmDataHighlight = "CrmDataHighlight",
+    CrmPropertyList = "CrmPropertyList",
+    CrmReport = "CrmReport",
+    CrmSimpleDeadline = "CrmSimpleDeadline",
+    CrmStageTracker = "CrmStageTracker",
+    CrmStatistics = "CrmStatistics",
+    CurrencyInput = "CurrencyInput",
+    DateInput = "DateInput",
+    DescriptionList = "DescriptionList",
+    DescriptionListItem = "DescriptionListItem",
+    Divider = "Divider",
+    Dropdown = "Dropdown",
+    DropdownButtonItem = "DropdownButtonItem",
+    EmptyState = "EmptyState",
+    ErrorState = "ErrorState",
+    ExpandableText = "ExpandableText",
+    FileInput = "FileInput",
+    Flex = "Flex",
+    Form = "Form",
+    Grid = "Grid",
+    GridItem = "GridItem",
+    HeaderActions = "HeaderActions",
+    Heading = "Heading",
+    Icon = "Icon",
+    Iframe = "Iframe",
+    Illustration = "Illustration",
+    Image = "Image",
+    Inline = "Inline",
+    Input = "Input",
+    LineChart = "LineChart",
+    Link = "Link",
+    List = "List",
+    LoadingButton = "LoadingButton",
+    LoadingSpinner = "LoadingSpinner",
+    MediaObject = "MediaObject",
+    Modal = "Modal",
+    ModalBody = "ModalBody",
+    ModalFooter = "ModalFooter",
+    MultiSelect = "MultiSelect",
+    NumberInput = "NumberInput",
+    Panel = "Panel",
+    PanelBody = "PanelBody",
+    PanelFooter = "PanelFooter",
+    PanelSection = "PanelSection",
+    Popover = "Popover",
+    PrimaryHeaderActionButton = "PrimaryHeaderActionButton",
+    ProgressBar = "ProgressBar",
+    RadioButton = "RadioButton",
+    ScoreCircle = "ScoreCircle",
+    SearchInput = "SearchInput",
+    SecondaryHeaderActionButton = "SecondaryHeaderActionButton",
+    Select = "Select",
+    SettingsView = "SettingsView",
+    Stack2 = "Stack2",
+    Statistics = "Statistics",
+    StatisticsItem = "StatisticsItem",
+    StatisticsTrend = "StatisticsTrend",
+    StatusTag = "StatusTag",
+    StepIndicator = "StepIndicator",
+    StepperInput = "StepperInput",
+    Tab = "Tab",
+    Table = "Table",
+    TableBody = "TableBody",
+    TableCell = "TableCell",
+    TableFooter = "TableFooter",
+    TableHead = "TableHead",
+    TableHeader = "TableHeader",
+    TableRow = "TableRow",
+    Tabs = "Tabs",
+    Tag = "Tag",
+    Text = "Text",
+    TextArea = "TextArea",
+    Tile = "Tile",
+    TimeInput = "TimeInput",
+    Toggle = "Toggle",
+    ToggleGroup = "ToggleGroup",
+    Tooltip = "Tooltip"
 }

package/dist/types.js

@@ -6,4 +6,97 @@
 export var ComponentName;
 (function (ComponentName) {
     ComponentName["Accordion"] = "Accordion";
+    ComponentName["Alert"] = "Alert";
+    ComponentName["AutoGrid"] = "AutoGrid";
+    ComponentName["BarChart"] = "BarChart";
+    ComponentName["Box"] = "Box";
+    ComponentName["Button"] = "Button";
+    ComponentName["ButtonRow"] = "ButtonRow";
+    ComponentName["Card"] = "Card";
+    ComponentName["Center"] = "Center";
+    ComponentName["Checkbox"] = "Checkbox";
+    ComponentName["CrmActionButton"] = "CrmActionButton";
+    ComponentName["CrmActionLink"] = "CrmActionLink";
+    ComponentName["CrmAssociationPivot"] = "CrmAssociationPivot";
+    ComponentName["CrmAssociationPropertyList"] = "CrmAssociationPropertyList";
+    ComponentName["CrmAssociationStageTracker"] = "CrmAssociationStageTracker";
+    ComponentName["CrmAssociationTable"] = "CrmAssociationTable";
+    ComponentName["CrmCardActions"] = "CrmCardActions";
+    ComponentName["CrmDataHighlight"] = "CrmDataHighlight";
+    ComponentName["CrmPropertyList"] = "CrmPropertyList";
+    ComponentName["CrmReport"] = "CrmReport";
+    ComponentName["CrmSimpleDeadline"] = "CrmSimpleDeadline";
+    ComponentName["CrmStageTracker"] = "CrmStageTracker";
+    ComponentName["CrmStatistics"] = "CrmStatistics";
+    ComponentName["CurrencyInput"] = "CurrencyInput";
+    ComponentName["DateInput"] = "DateInput";
+    ComponentName["DescriptionList"] = "DescriptionList";
+    ComponentName["DescriptionListItem"] = "DescriptionListItem";
+    ComponentName["Divider"] = "Divider";
+    ComponentName["Dropdown"] = "Dropdown";
+    ComponentName["DropdownButtonItem"] = "DropdownButtonItem";
+    ComponentName["EmptyState"] = "EmptyState";
+    ComponentName["ErrorState"] = "ErrorState";
+    ComponentName["ExpandableText"] = "ExpandableText";
+    ComponentName["FileInput"] = "FileInput";
+    ComponentName["Flex"] = "Flex";
+    ComponentName["Form"] = "Form";
+    ComponentName["Grid"] = "Grid";
+    ComponentName["GridItem"] = "GridItem";
+    ComponentName["HeaderActions"] = "HeaderActions";
+    ComponentName["Heading"] = "Heading";
+    ComponentName["Icon"] = "Icon";
+    ComponentName["Iframe"] = "Iframe";
+    ComponentName["Illustration"] = "Illustration";
+    ComponentName["Image"] = "Image";
+    ComponentName["Inline"] = "Inline";
+    ComponentName["Input"] = "Input";
+    ComponentName["LineChart"] = "LineChart";
+    ComponentName["Link"] = "Link";
+    ComponentName["List"] = "List";
+    ComponentName["LoadingButton"] = "LoadingButton";
+    ComponentName["LoadingSpinner"] = "LoadingSpinner";
+    ComponentName["MediaObject"] = "MediaObject";
+    ComponentName["Modal"] = "Modal";
+    ComponentName["ModalBody"] = "ModalBody";
+    ComponentName["ModalFooter"] = "ModalFooter";
+    ComponentName["MultiSelect"] = "MultiSelect";
+    ComponentName["NumberInput"] = "NumberInput";
+    ComponentName["Panel"] = "Panel";
+    ComponentName["PanelBody"] = "PanelBody";
+    ComponentName["PanelFooter"] = "PanelFooter";
+    ComponentName["PanelSection"] = "PanelSection";
+    ComponentName["Popover"] = "Popover";
+    ComponentName["PrimaryHeaderActionButton"] = "PrimaryHeaderActionButton";
+    ComponentName["ProgressBar"] = "ProgressBar";
+    ComponentName["RadioButton"] = "RadioButton";
+    ComponentName["ScoreCircle"] = "ScoreCircle";
+    ComponentName["SearchInput"] = "SearchInput";
+    ComponentName["SecondaryHeaderActionButton"] = "SecondaryHeaderActionButton";
+    ComponentName["Select"] = "Select";
+    ComponentName["SettingsView"] = "SettingsView";
+    ComponentName["Stack2"] = "Stack2";
+    ComponentName["Statistics"] = "Statistics";
+    ComponentName["StatisticsItem"] = "StatisticsItem";
+    ComponentName["StatisticsTrend"] = "StatisticsTrend";
+    ComponentName["StatusTag"] = "StatusTag";
+    ComponentName["StepIndicator"] = "StepIndicator";
+    ComponentName["StepperInput"] = "StepperInput";
+    ComponentName["Tab"] = "Tab";
+    ComponentName["Table"] = "Table";
+    ComponentName["TableBody"] = "TableBody";
+    ComponentName["TableCell"] = "TableCell";
+    ComponentName["TableFooter"] = "TableFooter";
+    ComponentName["TableHead"] = "TableHead";
+    ComponentName["TableHeader"] = "TableHeader";
+    ComponentName["TableRow"] = "TableRow";
+    ComponentName["Tabs"] = "Tabs";
+    ComponentName["Tag"] = "Tag";
+    ComponentName["Text"] = "Text";
+    ComponentName["TextArea"] = "TextArea";
+    ComponentName["Tile"] = "Tile";
+    ComponentName["TimeInput"] = "TimeInput";
+    ComponentName["Toggle"] = "Toggle";
+    ComponentName["ToggleGroup"] = "ToggleGroup";
+    ComponentName["Tooltip"] = "Tooltip";
 })(ComponentName || (ComponentName = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-sdk-api-metadata",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "UI Extensions SDK API Metadata",
   "type": "module",
   "scripts": {
@@ -25,17 +25,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@hubspot/ts-export-types-reader": "0.1.2",
+    "@hubspot/ts-export-types-reader": "1.1.0",
+    "dom-serializer": "^2.0.0",
+    "htmlparser2": "^9.1.0",
     "marked": "17.0.1"
   },
   "devDependencies": {
-    "@hubspot/ts-export-types": "0.1.2",
+    "@hubspot/ts-export-types": "1.1.0",
     "@vitest/coverage-v8": "2.1.8",
     "typescript": "5.9.3",
     "vitest": "2.1.9"
   },
   "engines": {
     "node": ">=16"
-  },
-  "gitHead": "c5b66da065a341df3afd98ce6641bb3e6317aeb4"
+  }
 }

package/dist/internal/utils/html-utils.d.ts

@@ -1,7 +0,0 @@
-/**
- * Wraps code as text in HTML code tags for HTML rendering. Special HTML characters are escaped.
- *
- * @param value - The code as text to wrap in HTML code tags
- * @returns The code as text wrapped in HTML code tags
- */
-export declare const wrapCodeInHtmlCodeTags: (value: string) => string;

package/dist/internal/utils/html-utils.js

@@ -1,18 +0,0 @@
-const sanitizeHtmlText = (htmlText) => {
-    return (htmlText
-        .replaceAll('&', '&')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        // Use double quotes for consistency with other entity references
-        .replaceAll("'", '&#x27;'));
-};
-/**
- * Wraps code as text in HTML code tags for HTML rendering. Special HTML characters are escaped.
- *
- * @param value - The code as text to wrap in HTML code tags
- * @returns The code as text wrapped in HTML code tags
- */
-export const wrapCodeInHtmlCodeTags = (value) => {
-    return `<code>${sanitizeHtmlText(value)}</code>`;
-};