@woodsportal/hubspot-kit 5.0.2 → 5.0.3

package/scripts/vite/portal-build-shared.js

@@ -135,11 +135,16 @@ function prodDefaultDataStub(mode) {
 
 export function portalPlugins(mode, { codeSplitting = false, routeFileIgnorePattern } = {}) {
   const routeIgnore = routeFileIgnorePattern ?? (isPrefix(mode) ? 'dev\\.' : undefined)
+  const prefixPlugins = isPrefix(mode)
+    ? [tailwindPrefixPlugin(), TailwindContentPlugin()]
+    : []
   return [
     prodDevModuleConfigRouteStub(mode),
     prodDevHubSpotLiveStub(mode),
     prodSdkTerminalLogSinksStub(mode),
     prodDefaultDataStub(mode),
+    // Prefix must run before React / compiler so JSX className is still in the source.
+    ...prefixPlugins,
     TanStackRouterVite({
       autoCodeSplitting: codeSplitting,
       ...(routeIgnore ? { routeFileIgnorePattern: routeIgnore } : {}),
@@ -152,9 +157,6 @@ export function portalPlugins(mode, { codeSplitting = false, routeFileIgnorePatt
       },
     }),
     tailwindcss(),
-    ...(isPrefix(mode)
-      ? [tailwindPrefixPlugin(), TailwindContentPlugin()]
-      : []),
   ]
 }
 

package/src/dev-module-config/__tests__/build-api-routes-custom-menu.test.ts

@@ -0,0 +1,32 @@
+import { buildApiRoutes } from '../../routing/build-api-routes'
+
+describe('buildApiRoutes custom menu', () => {
+  it('maps custom menu items to opaque paths without ids', () => {
+    const routes = buildApiRoutes([
+      {
+        label: 'Help Center',
+        menuUrl: 'https://help.example.com',
+        icon: '<svg></svg>',
+        selectOption: 'iframe',
+        objectType: 'CUSTOM_MENU',
+      },
+      {
+        label: 'Contacts',
+        hubspotObjectTypeId: '0-1',
+        objectType: 'HUBSPOT_DEFINED',
+      },
+    ])
+
+    expect(routes[0]).toMatchObject({
+      path: 'custom-menu:help-center',
+      title: 'Help Center',
+      isCustomMenu: true,
+      selectOption: 'iframe',
+      menuUrl: 'https://help.example.com',
+      isRequiredAuth: false,
+    })
+    expect(routes[0]).not.toHaveProperty('customMenuId')
+    expect(routes[1]?.path).toBe('/0-1')
+    expect(routes[1]?.isCustomMenu).toBeFalsy()
+  })
+})

package/src/dev-module-config/__tests__/custom-menu.test.ts

@@ -0,0 +1,77 @@
+import {
+  applyCustomMenuItemsToModule,
+  isValidMenuUrl,
+  normalizeMenuUrl,
+  resolveSelectOption,
+  sanitizeCustomMenuItem,
+  validateCustomMenuItems,
+} from '../schema/custom-menu'
+
+describe('custom-menu schema', () => {
+  it('prepends https:// when protocol is missing', () => {
+    expect(normalizeMenuUrl('docs.example.com')).toBe('https://docs.example.com')
+    expect(normalizeMenuUrl('https://docs.example.com')).toBe('https://docs.example.com')
+  })
+
+  it('validates normalized URLs', () => {
+    expect(isValidMenuUrl('https://docs.example.com')).toBe(true)
+    expect(isValidMenuUrl('not a url')).toBe(false)
+  })
+
+  it('resolves legacy open_in_new_tab checkbox values', () => {
+    expect(resolveSelectOption({ open_in_new_tab: true })).toBe('open_in_new_tab')
+    expect(resolveSelectOption({ open_in_new_tab: false })).toBe('iframe')
+    expect(resolveSelectOption({ select_option: 'iframe' })).toBe('iframe')
+  })
+
+  it('sanitizes custom menu items without an id field', () => {
+    const item = sanitizeCustomMenuItem({
+      id: 'legacy-id',
+      menu_name: ' Help ',
+      menu_url: 'help.example.com',
+      icon_svg_code: '   ',
+      select_option: 'iframe',
+    })
+
+    expect(item).toEqual({
+      menu_name: 'Help',
+      menu_url: 'https://help.example.com',
+      select_option: 'iframe',
+    })
+    expect('id' in item).toBe(false)
+  })
+
+  it('validates required menu fields', () => {
+    const errors = validateCustomMenuItems({
+      menu_options: {
+        custom_menu: true,
+        custom_menus: [{ menu_name: '', menu_url: '', select_option: 'iframe' }],
+      },
+    })
+
+    expect(errors.some((error) => error.path.endsWith('menu_name'))).toBe(true)
+    expect(errors.some((error) => error.path.endsWith('menu_url'))).toBe(true)
+  })
+
+  it('applies sanitized custom menus to module values and strips id', () => {
+    const next = applyCustomMenuItemsToModule({
+      menu_options: {
+        custom_menu: true,
+        custom_menus: [
+          {
+            id: 'legacy-id',
+            menu_name: 'Docs',
+            menu_url: 'docs.example.com',
+            select_option: 'iframe',
+          },
+        ],
+      },
+    })
+
+    const items = (next.menu_options as { custom_menus: Array<Record<string, unknown>> })
+      .custom_menus
+    expect(items).toHaveLength(1)
+    expect(items[0]?.menu_url).toBe('https://docs.example.com')
+    expect(items[0]?.id).toBeUndefined()
+  })
+})

package/src/dev-module-config/__tests__/drill-down-panels.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  applyDrillDownPanelRegistration,
+  listDrillDownLayers,
+} from '../ui/navigation/drill-down-panels'
+
+describe('applyDrillDownPanelRegistration', () => {
+  it('appends a new panel to the stack', () => {
+    const card = { kind: 'card' }
+    const next = applyDrillDownPanelRegistration({}, [], 'card', card)
+
+    expect(next.order).toEqual(['card'])
+    expect(next.panels.card).toBe(card)
+  })
+
+  it('keeps ancestor panels when a nested panel is registered', () => {
+    const card = { kind: 'card' }
+    const property = { kind: 'property' }
+    const withCard = applyDrillDownPanelRegistration({}, [], 'card', card)
+    const withProperty = applyDrillDownPanelRegistration(
+      withCard.panels,
+      withCard.order,
+      'property',
+      property,
+    )
+
+    expect(withProperty.order).toEqual(['card', 'property'])
+    expect(listDrillDownLayers(withProperty.panels, withProperty.order).map((layer) => layer.id)).toEqual([
+      'card',
+      'property',
+    ])
+  })
+
+  it('returns the same state when the panel reference is unchanged', () => {
+    const card = { kind: 'card' }
+    const withCard = applyDrillDownPanelRegistration({}, [], 'card', card)
+    const again = applyDrillDownPanelRegistration(withCard.panels, withCard.order, 'card', card)
+
+    expect(again.panels).toBe(withCard.panels)
+    expect(again.order).toBe(withCard.order)
+  })
+
+  it('removes only the nested panel so the ancestor stays on top', () => {
+    const card = { kind: 'card' }
+    const property = { kind: 'property' }
+    const withCard = applyDrillDownPanelRegistration({}, [], 'card', card)
+    const stacked = applyDrillDownPanelRegistration(
+      withCard.panels,
+      withCard.order,
+      'property',
+      property,
+    )
+    const afterClose = applyDrillDownPanelRegistration(
+      stacked.panels,
+      stacked.order,
+      'property',
+      null,
+    )
+
+    expect(afterClose.order).toEqual(['card'])
+    expect(afterClose.panels.card).toBe(card)
+    expect(afterClose.panels.property).toBeUndefined()
+  })
+})

package/src/dev-module-config/__tests__/fixtures/golden-module.fixture.ts

@@ -16,6 +16,7 @@ export const goldenModuleFixture: ModuleFieldValues = {
   menu_options: {
     hubspot_defined_object: true,
     hubspot_custom_object: false,
+    custom_menu: true,
     objects: [
       {
         tab_name: 'Contacts',
@@ -26,6 +27,7 @@ export const goldenModuleFixture: ModuleFieldValues = {
       },
     ],
     hubspot_custom_objects: [],
+    custom_menus: [],
   },
   other_options: {
     show_company_name: true,

package/src/dev-module-config/__tests__/flatten-visible-fields.test.ts

@@ -4,7 +4,7 @@ import fieldsSchema from './fixtures/fields.json'
 import { goldenModuleFixture } from './fixtures/golden-module.fixture'
 import type { HubSpotFieldDefinition } from '../schema/types'
 import { HUBSPOT_ONLY_FIELD_NAMES, MODULE_CONFIG_UI_HIDDEN_FIELD_NAMES } from '../schema/types'
-import { flattenVisibleFields } from '../schema/visibility'
+import { flattenVisibleFields, isFieldVisible } from '../schema/visibility'
 
 const goldenFields = fieldsSchema as Array<HubSpotFieldDefinition>
 
@@ -105,3 +105,36 @@ describe('flattenVisibleFields', () => {
     })
   })
 })
+
+describe('isFieldVisible nested repeater items', () => {
+  const buttonNameField: HubSpotFieldDefinition = {
+    name: 'button_name',
+    label: 'Button Name',
+    type: 'text',
+    visibility: {
+      controlling_field_path: 'home.dashboard_cards.properties.property_value_show_as',
+      controlling_value_regex: 'button',
+      operator: 'EQUAL',
+    },
+  }
+
+  it('shows fields from nested Display Properties item values', () => {
+    expect(
+      isFieldVisible(buttonNameField, {
+        moduleValues: {},
+        repeaterPath: 'home.dashboard_cards.properties',
+        itemValues: { property_value_show_as: 'button' },
+      }),
+    ).toBe(true)
+  })
+
+  it('hides nested fields when the controlling item value does not match', () => {
+    expect(
+      isFieldVisible(buttonNameField, {
+        moduleValues: {},
+        repeaterPath: 'home.dashboard_cards.properties',
+        itemValues: { property_value_show_as: 'simpleText' },
+      }),
+    ).toBe(false)
+  })
+})

package/src/dev-module-config/__tests__/module-config-transform.test.ts

@@ -41,6 +41,33 @@ describe('buildHubSpotDataFromFields', () => {
     expect(built.enableDashboardCards).toBe(true)
     expect(built.sidebarMenuOptions.length).toBeGreaterThan(0)
   })
+
+  it('maps enabled custom menu items into sidebarMenuOptions', () => {
+    const built = buildHubSpotDataFromFields({
+      ...goldenModuleFixture,
+      menu_options: {
+        ...(goldenModuleFixture.menu_options as Record<string, unknown>),
+        custom_menu: true,
+        custom_menus: [
+          {
+            menu_name: 'Help Center',
+            menu_url: 'help.example.com',
+            icon_svg_code: '<svg></svg>',
+            select_option: 'iframe',
+          },
+        ],
+      },
+    })
+
+    expect(built.sidebarMenuOptions).toContainEqual(
+      expect.objectContaining({
+        label: 'Help Center',
+        menuUrl: 'https://help.example.com',
+        selectOption: 'iframe',
+        objectType: 'CUSTOM_MENU',
+      }),
+    )
+  })
 })
 
 describe('buildCssVarsFromFields', () => {

package/src/dev-module-config/runtime/module-config-runtime.ts

@@ -19,6 +19,7 @@ import type { BuiltHubSpotData } from '../transform/build-hubspot-data'
 import type { HubSpotFieldDefinition, ModuleFieldValues } from '../schema/types'
 import type { HubSpotPortalData } from '@/hubspot/types'
 import { defaultData } from '@/defaultData'
+import { applyCustomMenuItemsToModule } from '../schema/custom-menu'
 
 export type ModuleConfigState = {
   schema: Array<HubSpotFieldDefinition>
@@ -88,7 +89,8 @@ export async function updateModuleFieldValues(
   nextModuleValues: ModuleFieldValues,
 ): Promise<ModuleConfigState> {
   if (!state) throw new Error('Module config runtime not initialized')
-  const overrides = deepMerge({}, nextModuleValues)
+  const sanitizedValues = applyCustomMenuItemsToModule(nextModuleValues)
+  const overrides = deepMerge({}, sanitizedValues)
   state = buildState(state.schema, state.defaults, overrides)
   await saveOverrides(overrides)
   applyRuntimeSideEffects(state)

package/src/dev-module-config/schema/custom-menu.ts

@@ -0,0 +1,124 @@
+import type { ModuleFieldValues } from './types'
+
+export type OpenType = 'open_in_new_tab' | 'iframe'
+
+export type CustomMenuItem = {
+  menu_name: string
+  menu_url: string
+  icon_svg_code?: string
+  select_option: OpenType
+}
+
+export function normalizeMenuUrl(raw: string): string {
+  const trimmed = raw.trim()
+  if (!trimmed) return ''
+  if (/^https?:\/\//i.test(trimmed)) return trimmed
+  return `https://${trimmed}`
+}
+
+export function isValidMenuUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+export function resolveSelectOption(item: ModuleFieldValues): OpenType {
+  const value = item.select_option
+  if (value === 'iframe' || value === 'open_in_new_tab') {
+    return value
+  }
+  if (item.open_in_new_tab === true) {
+    return 'open_in_new_tab'
+  }
+  if (item.open_in_new_tab === false) {
+    return 'iframe'
+  }
+  return 'open_in_new_tab'
+}
+
+export function sanitizeCustomMenuItem(item: ModuleFieldValues): CustomMenuItem {
+  const menuName = String(item.menu_name ?? '').trim()
+  const menuUrl = normalizeMenuUrl(String(item.menu_url ?? ''))
+  const iconSvg = String(item.icon_svg_code ?? '').trim()
+
+  return {
+    menu_name: menuName,
+    menu_url: menuUrl,
+    icon_svg_code: iconSvg || undefined,
+    select_option: resolveSelectOption(item),
+  }
+}
+
+export function sanitizeCustomMenuItems(items: unknown): Array<CustomMenuItem> {
+  if (!Array.isArray(items)) return []
+
+  return items
+    .filter((item): item is ModuleFieldValues => item !== null && typeof item === 'object')
+    .map((item) => sanitizeCustomMenuItem(item))
+}
+
+export function applyCustomMenuItemsToModule(
+  moduleValues: ModuleFieldValues,
+): ModuleFieldValues {
+  const next = structuredClone(moduleValues)
+  const menuOptions = (next.menu_options ?? {}) as ModuleFieldValues
+  const items = sanitizeCustomMenuItems(menuOptions.custom_menus)
+  menuOptions.custom_menus = items
+  next.menu_options = menuOptions
+  return next
+}
+
+export function validateCustomMenuItems(
+  moduleValues: ModuleFieldValues,
+): Array<{ path: string; label: string; message: string }> {
+  const menuOptions = (moduleValues.menu_options ?? {}) as ModuleFieldValues
+  if (!menuOptions.custom_menu) return []
+
+  const items = Array.isArray(menuOptions.custom_menus)
+    ? (menuOptions.custom_menus as Array<ModuleFieldValues>)
+    : []
+  const errors: Array<{ path: string; label: string; message: string }> = []
+
+  items.forEach((item, index) => {
+    const basePath = `menu_options.custom_menus.${index}`
+    const menuName = String(item.menu_name ?? '').trim()
+    const menuUrlRaw = String(item.menu_url ?? '').trim()
+    const menuUrl = normalizeMenuUrl(menuUrlRaw)
+
+    if (!menuName) {
+      errors.push({
+        path: `${basePath}.menu_name`,
+        label: 'Menu Name',
+        message: 'Menu Name is required',
+      })
+    }
+
+    if (!menuUrlRaw) {
+      errors.push({
+        path: `${basePath}.menu_url`,
+        label: 'Menu URL',
+        message: 'Menu URL is required',
+      })
+    } else if (!isValidMenuUrl(menuUrl)) {
+      errors.push({
+        path: `${basePath}.menu_url`,
+        label: 'Menu URL',
+        message: 'Enter a valid URL',
+      })
+    }
+
+    const selectOption = resolveSelectOption(item)
+    if (selectOption !== 'open_in_new_tab' && selectOption !== 'iframe') {
+      errors.push({
+        path: `${basePath}.select_option`,
+        label: 'Select Option',
+        message: 'Select Option is required',
+      })
+    }
+  })
+
+  return errors
+}

package/src/dev-module-config/schema/validate-module-config.ts

@@ -1,6 +1,7 @@
 import { isFieldVisible, type VisibilityContext } from '../schema/visibility'
 import { getNestedValue } from '../runtime/module-config-runtime'
 import type { HubSpotFieldDefinition, ModuleFieldValues } from '../schema/types'
+import { validateCustomMenuItems } from '../schema/custom-menu'
 
 export type ValidationError = {
   path: string
@@ -71,6 +72,7 @@ export function validateModuleConfig(
 ): Array<ValidationError> {
   const errors: Array<ValidationError> = []
   validateFieldsAtPath(schema, moduleValues, '', { moduleValues }, errors)
+  errors.push(...validateCustomMenuItems(moduleValues))
 
   const seen = new Set<string>()
   return errors.filter((error) => {

package/src/dev-module-config/transform/build-hubspot-data.ts

@@ -1,5 +1,6 @@
 import type { ModuleFieldValues } from '../schema/types'
 import { normalizeRepeaterItems } from '../schema/normalize-repeater-items'
+import { sanitizeCustomMenuItems } from '../schema/custom-menu'
 
 type ColorValue = { color?: string; opacity?: number | string }
 
@@ -154,6 +155,19 @@ function buildRouteLists(module: ModuleFieldValues) {
     }
   }
 
+  const customMenus = sanitizeCustomMenuItems(menuOptions?.custom_menus)
+  if (menuOptions?.custom_menu && customMenus.length > 0) {
+    for (const item of customMenus) {
+      dynamicRouteList.push({
+        label: item.menu_name,
+        menuUrl: item.menu_url,
+        icon: item.icon_svg_code || undefined,
+        selectOption: item.select_option,
+        objectType: 'CUSTOM_MENU',
+      })
+    }
+  }
+
   return { iframeList, dynamicSidebarList, dynamicRouteList }
 }
 

package/src/dev-module-config/ui/FieldRenderer.tsx

@@ -221,6 +221,8 @@ export function FieldRenderer({
         ? 'properties_value'
         : field.name === 'dashboard_cards'
           ? 'card_title'
+          : field.name === 'custom_menus'
+            ? 'menu_name'
           : 'list_object_name'
 
     return (

package/src/dev-module-config/ui/ModuleConfigAnimatedPresence.tsx

@@ -46,6 +46,8 @@ export function ModuleConfigAnimatedPresence({
 
   if (!mounted) return null
 
+  const rendered = show ? children : contentRef.current
+
   if (variant === 'slide') {
     const slideFrom = enterFrom === 'left' ? 'left' : 'right'
 
@@ -55,7 +57,7 @@ export function ModuleConfigAnimatedPresence({
         data-visible={visible ? 'true' : 'false'}
         data-enter-from={slideFrom}
       >
-        {contentRef.current}
+        {rendered}
       </div>
     )
   }
@@ -66,7 +68,7 @@ export function ModuleConfigAnimatedPresence({
         visible ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-2 opacity-0'
       }`.trim()}
     >
-      {contentRef.current}
+      {rendered}
     </div>
   )
 }

package/src/dev-module-config/ui/ModuleConfigShell.tsx

@@ -59,7 +59,7 @@ function ModuleConfigShellInner({
     discardDraft,
     confirmDiscardIfDirty,
   } = useModuleConfig()
-  const { segments, drillDownPanel } = useModuleConfigNav()
+  const { segments, drillDownPanel, drillDownLayers } = useModuleConfigNav()
   const { theme, toggleTheme } = useModuleConfigUi()
   const [tab, setTab] = useState<Tab>('CONTENT')
   const [tabEnterFrom, setTabEnterFrom] = useState<ModuleConfigEnterFrom>('right')
@@ -294,13 +294,25 @@ function ModuleConfigShellInner({
             )
           })}
         </div>
+        {/* Keep ancestor layers mounted (hidden) so nested repeaters like Display Properties can drill in. */}
         <ModuleConfigAnimatedPresence
-          show={Boolean(drillDownPanel)}
+          show={drillDownLayers.length > 0}
           variant="slide"
           enterFrom="right"
-          className="absolute inset-0 z-10 overflow-y-auto bg-[var(--mc-bg-shell)] px-4 py-3"
+          className="absolute inset-0 z-10 overflow-hidden bg-[var(--mc-bg-shell)]"
         >
-          {drillDownPanel}
+          {drillDownLayers.map((layer, index) => {
+            const isTop = index === drillDownLayers.length - 1
+            return (
+              <div
+                key={layer.id}
+                className={`absolute inset-0 overflow-y-auto px-4 py-3 ${isTop ? '' : 'hidden'}`}
+                aria-hidden={!isTop}
+              >
+                {layer.panel}
+              </div>
+            )
+          })}
         </ModuleConfigAnimatedPresence>
       </div>
 

package/src/dev-module-config/ui/editors/MenuOptionsEditor.tsx

@@ -24,13 +24,19 @@ export function MenuOptionsEditor({ field, moduleValues, onChange }: MenuOptions
   const objectsField = children.find((c) => c.name === 'objects')
   const customToggle = children.find((c) => c.name === 'hubspot_custom_object')
   const customObjectsField = children.find((c) => c.name === 'hubspot_custom_objects')
+  const customMenuToggle = children.find((c) => c.name === 'custom_menu')
+  const customMenusField = children.find((c) => c.name === 'custom_menus')
 
   const standardEnabled = Boolean(menuValues.hubspot_defined_object)
   const customEnabled = Boolean(menuValues.hubspot_custom_object)
+  const customMenuEnabled = Boolean(menuValues.custom_menu)
   const objects = Array.isArray(menuValues.objects) ? (menuValues.objects as Array<ModuleFieldValues>) : []
   const customObjects = Array.isArray(menuValues.hubspot_custom_objects)
     ? (menuValues.hubspot_custom_objects as Array<ModuleFieldValues>)
     : []
+  const customMenus = Array.isArray(menuValues.custom_menus)
+    ? (menuValues.custom_menus as Array<ModuleFieldValues>)
+    : []
 
   const setMenuValue = (key: string, value: unknown) => {
     onChange(`${menuPath}.${key}`, value)
@@ -98,6 +104,34 @@ export function MenuOptionsEditor({ field, moduleValues, onChange }: MenuOptions
           />
         ) : null}
       </ModuleConfigAnimatedPresence>
+
+      {customMenuToggle ? (
+        <HsToggleRow
+          label={customMenuToggle.label}
+          helpText={customMenuToggle.help_text}
+          required={customMenuToggle.required}
+          checked={customMenuEnabled}
+          onChange={(checked) => setMenuValue('custom_menu', checked)}
+        />
+      ) : null}
+
+      <ModuleConfigAnimatedPresence
+        show={Boolean(customMenuEnabled && customMenusField && isFieldVisible(customMenusField, moduleValues))}
+        enterFrom="bottom"
+      >
+        {customMenusField ? (
+          <HsOccurrenceGroupEditor
+            field={customMenusField}
+            items={customMenus}
+            moduleValues={moduleValues}
+            path={`${menuPath}.custom_menus`}
+            onChange={onChange}
+            labelField="menu_name"
+            sectionLabel="Custom Menu"
+            visibilityContext={{ moduleValues }}
+          />
+        ) : null}
+      </ModuleConfigAnimatedPresence>
     </ModuleConfigCollapsible>
   )
 }