@woodsportal/hubspot-kit 5.0.2 → 5.0.3

package/src/dev-module-config/ui/hubspot/HsOccurrenceGroupEditor.tsx

@@ -14,7 +14,7 @@ function DrillDownSync({ id, panel }: { id: string; panel: ReactNode }) {
 
   useLayoutEffect(() => {
     registerDrillDownPanel(id, panel)
-  })
+  }, [id, panel, registerDrillDownPanel])
 
   useLayoutEffect(() => {
     return () => registerDrillDownPanel(id, null)
@@ -75,25 +75,28 @@ export function HsOccurrenceGroupEditor({
   const navSectionId = `section-${path}-${instanceId}`
   const navSectionLabel = sectionLabel ?? field.label
   const scopeBase = editorScope ?? path
+  const visibilityRepeaterPath = visibilityContext?.repeaterPath
+    ? `${visibilityContext.repeaterPath}.${field.name}`
+    : path
 
   const itemVisibilityContext = useMemo(
     (): VisibilityContext => ({
       moduleValues: visibilityContext?.moduleValues ?? moduleValues,
-      repeaterPath: path,
+      repeaterPath: visibilityRepeaterPath,
       itemIndex: editingIndex ?? undefined,
       itemValues: editingIndex !== null ? items[editingIndex] : undefined,
     }),
-    [visibilityContext?.moduleValues, moduleValues, path, editingIndex, items],
+    [visibilityContext?.moduleValues, moduleValues, visibilityRepeaterPath, editingIndex, items],
   )
 
   const visibleChildren = useMemo(() => {
     if (editingIndex === null || !items[editingIndex]) return []
     return flattenVisibleFields(children, moduleValues, undefined, {
-      repeaterPath: path,
+      repeaterPath: visibilityRepeaterPath,
       itemIndex: editingIndex,
       itemValues: items[editingIndex],
     })
-  }, [children, moduleValues, editingIndex, items, path])
+  }, [children, moduleValues, editingIndex, items, visibilityRepeaterPath])
 
   const closeEditor = () => {
     setEditingIndex((current) => {
@@ -129,17 +132,19 @@ export function HsOccurrenceGroupEditor({
   const openEditor = (index: number, item: ModuleFieldValues) => {
     const itemLabel = String(item[labelField] || field.label || 'Item')
     const itemNavId = `${path}-item-${index}-${instanceId}`
-    pushSegment({
-      id: navSectionId,
-      label: navSectionLabel,
-      onPop: closeEditor,
-    })
+    if (!editorScope) {
+      pushSegment({
+        id: navSectionId,
+        label: navSectionLabel,
+        onPop: closeEditor,
+      })
+      registerPopHandler(navSectionId, closeEditor)
+    }
     pushSegment({
       id: itemNavId,
       label: itemLabel,
       onPop: closeEditor,
     })
-    registerPopHandler(navSectionId, closeEditor)
     registerPopHandler(itemNavId, closeEditor)
     setEditingIndex(index)
   }

package/src/dev-module-config/ui/navigation/ModuleConfigNavContext.tsx

@@ -8,6 +8,12 @@ import {
 } from 'react'
 
 import { devModuleDisplayName } from '../../dev-module-display-name'
+import {
+  applyDrillDownPanelRegistration,
+  listDrillDownLayers,
+  type DrillDownLayer,
+  type DrillDownPanelMap,
+} from './drill-down-panels'
 
 export type BreadcrumbSegment = {
   id: string
@@ -18,6 +24,7 @@ export type BreadcrumbSegment = {
 type ModuleConfigNavContextValue = {
   segments: Array<BreadcrumbSegment>
   drillDownPanel: ReactNode | null
+  drillDownLayers: Array<DrillDownLayer>
   pushSegment: (segment: Omit<BreadcrumbSegment, 'onClick'> & { onPop?: () => void }) => void
   popTo: (id: string) => void
   resetNav: () => void
@@ -42,34 +49,29 @@ const ModuleConfigNavContext = createContext<ModuleConfigNavContextValue | null>
 export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
   const [stack, setStack] = useState<Array<BreadcrumbSegment>>([ROOT_SEGMENT])
   const [popHandlers, setPopHandlers] = useState<Record<string, () => void>>({})
-  const [drillDownPanels, setDrillDownPanels] = useState<Record<string, ReactNode>>({})
-  const [drillDownOrder, setDrillDownOrder] = useState<string[]>([])
+  const [drillDown, setDrillDown] = useState<{ panels: DrillDownPanelMap; order: string[] }>({
+    panels: {},
+    order: [],
+  })
 
   const registerDrillDownPanel = useCallback((id: string, panel: ReactNode | null) => {
-    if (panel === null) {
-      setDrillDownPanels((prev) => {
-        if (!(id in prev)) return prev
-        const next = { ...prev }
-        delete next[id]
-        return next
-      })
-      setDrillDownOrder((order) => order.filter((entry) => entry !== id))
-      return
-    }
-
-    setDrillDownPanels((prev) => ({ ...prev, [id]: panel }))
-    setDrillDownOrder((order) => (order.includes(id) ? order : [...order, id]))
+    setDrillDown((prev) => {
+      const next = applyDrillDownPanelRegistration(prev.panels, prev.order, id, panel)
+      if (next.panels === prev.panels && next.order === prev.order) return prev
+      return next
+    })
   }, [])
 
   const clearAllDrillDownPanels = useCallback(() => {
-    setDrillDownPanels({})
-    setDrillDownOrder([])
+    setDrillDown({ panels: {}, order: [] })
   }, [])
 
-  const drillDownPanel = useMemo(() => {
-    const topId = drillDownOrder[drillDownOrder.length - 1]
-    return topId ? (drillDownPanels[topId] ?? null) : null
-  }, [drillDownOrder, drillDownPanels])
+  const drillDownLayers = useMemo(
+    () => listDrillDownLayers(drillDown.panels, drillDown.order),
+    [drillDown],
+  )
+
+  const drillDownPanel = drillDownLayers[drillDownLayers.length - 1]?.panel ?? null
 
   const setDrillDownPanel = useCallback(
     (panel: ReactNode | null) => {
@@ -120,7 +122,7 @@ export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
       setStack((prev) => {
         const existing = prev.findIndex((item) => item.id === segment.id)
         if (existing >= 0) {
-          return [...prev.slice(0, existing + 1), { id: segment.id, label: segment.label }]
+          return [...prev.slice(0, existing), { id: segment.id, label: segment.label }]
         }
         return [...prev, { id: segment.id, label: segment.label }]
       })
@@ -147,8 +149,8 @@ export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
 
     if (middle.length > 2) {
       const collapsed: Array<BreadcrumbSegment> = [
-        middle[0]!,
         { id: 'ellipsis', label: '…' },
+        middle[middle.length - 2]!,
         middle[middle.length - 1]!,
       ]
       return [ROOT_SEGMENT, moduleTitle, ...collapsed]
@@ -161,6 +163,7 @@ export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
     () => ({
       segments,
       drillDownPanel,
+      drillDownLayers,
       pushSegment,
       popTo,
       resetNav,
@@ -171,6 +174,7 @@ export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
     [
       segments,
       drillDownPanel,
+      drillDownLayers,
       pushSegment,
       popTo,
       resetNav,

package/src/dev-module-config/ui/navigation/drill-down-panels.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+
+export type DrillDownPanelMap = Record<string, ReactNode>
+
+export type DrillDownLayer = {
+  id: string
+  panel: ReactNode
+}
+
+export function applyDrillDownPanelRegistration(
+  panels: DrillDownPanelMap,
+  order: string[],
+  id: string,
+  panel: ReactNode | null,
+): { panels: DrillDownPanelMap; order: string[] } {
+  if (panel === null) {
+    if (!(id in panels) && !order.includes(id)) {
+      return { panels, order }
+    }
+    const nextPanels = { ...panels }
+    delete nextPanels[id]
+    return {
+      panels: nextPanels,
+      order: order.filter((entry) => entry !== id),
+    }
+  }
+
+  if (Object.is(panels[id], panel) && order.includes(id)) {
+    return { panels, order }
+  }
+
+  return {
+    panels: { ...panels, [id]: panel },
+    order: order.includes(id) ? order : [...order, id],
+  }
+}
+
+export function listDrillDownLayers(
+  panels: DrillDownPanelMap,
+  order: string[],
+): Array<DrillDownLayer> {
+  const layers: Array<DrillDownLayer> = []
+  for (const id of order) {
+    const panel = panels[id]
+    if (panel != null) layers.push({ id, panel })
+  }
+  return layers
+}

package/src/routing/build-api-routes.ts

@@ -1,6 +1,21 @@
 import { formatCustomObjectLabel, formatPath } from './route-format'
+import { buildCustomMenuPath } from './custom-menu-path'
+import type { OpenType } from '../dev-module-config/schema/custom-menu'
+
+function isCustomMenuItem(menuItem: Record<string, unknown>): boolean {
+  return (
+    menuItem?.objectType === 'CUSTOM_MENU' ||
+    Boolean(menuItem?.isCustomMenu) ||
+    Boolean(String(menuItem?.menuUrl ?? '').trim())
+  )
+}
 
 export const makeLink = (menuItem: Record<string, unknown>) => {
+  if (isCustomMenuItem(menuItem)) {
+    const label = String(menuItem.label ?? menuItem.tabName ?? menuItem.menu_name ?? '').trim()
+    return buildCustomMenuPath(label)
+  }
+
   let link = menuItem?.hubspotObjectTypeId as string | undefined
 
   if (menuItem?.companyAsMediator) {
@@ -19,19 +34,34 @@ export const makeLink = (menuItem: Record<string, unknown>) => {
 }
 
 export function buildApiRoutes(sidebarMenuOptions: Array<Record<string, unknown>>) {
-  return sidebarMenuOptions.map((menuItem) => ({
-    hubspotObjectTypeId: `${menuItem.hubspotObjectTypeId ?? ''}`,
-    path: makeLink(menuItem),
-    title: formatCustomObjectLabel((menuItem.tabName || menuItem.label) as string),
-    icon: menuItem.icon,
-    isRequiredAuth: true,
-    isHeader: true,
-    companyAsMediator: menuItem.companyAsMediator,
-    pipeLineId: menuItem.pipeLineId,
-    specPipeLine: menuItem.specPipeLine,
-    objectDescription: menuItem.objectDescription,
-    objectUserProperties: menuItem.objectUserProperties,
-    homeCardsView: menuItem.homeCardsView,
-    objectUserPropertiesView: menuItem.objectUserPropertiesView,
-  }))
+  return sidebarMenuOptions.map((menuItem) => {
+    const isCustomMenu = isCustomMenuItem(menuItem)
+    const selectOption = (menuItem.selectOption as OpenType | undefined) ?? 'open_in_new_tab'
+    const menuUrl = isCustomMenu ? String(menuItem.menuUrl ?? '').trim() : undefined
+    const openInNewTab = isCustomMenu ? selectOption === 'open_in_new_tab' : undefined
+    const title = formatCustomObjectLabel((menuItem.tabName || menuItem.label) as string)
+
+    return {
+      hubspotObjectTypeId: `${menuItem.hubspotObjectTypeId ?? ''}`,
+      path: makeLink(menuItem),
+      title,
+      icon: menuItem.icon,
+      isRequiredAuth: !isCustomMenu,
+      isHeader: true,
+      isCustomMenu,
+      selectOption: isCustomMenu ? selectOption : undefined,
+      menuUrl,
+      openInNewTab,
+      target: isCustomMenu && openInNewTab ? '_blank' : undefined,
+      rel: isCustomMenu && openInNewTab ? 'noopener noreferrer' : undefined,
+      companyAsMediator: menuItem.companyAsMediator,
+      pipeLineId: menuItem.pipeLineId,
+      specPipeLine: menuItem.specPipeLine,
+      objectDescription: menuItem.objectDescription,
+      objectUserProperties: menuItem.objectUserProperties,
+      homeCardsView: menuItem.homeCardsView,
+      objectUserPropertiesView: menuItem.objectUserPropertiesView,
+      objectType: isCustomMenu ? 'CUSTOM_MENU' : menuItem.objectType,
+    }
+  })
 }

package/src/routing/custom-menu-path.ts

@@ -0,0 +1,14 @@
+import { formatPath } from './route-format'
+
+export const CUSTOM_MENU_PATH_PREFIX = 'custom-menu:'
+
+export function buildCustomMenuPath(menuName: string): string {
+  const slug = formatPath(menuName).trim()
+  return slug ? `${CUSTOM_MENU_PATH_PREFIX}${slug}` : '#'
+}
+
+export function parseCustomMenuPath(path: string): string | null {
+  if (!path.startsWith(CUSTOM_MENU_PATH_PREFIX)) return null
+  const slug = path.slice(CUSTOM_MENU_PATH_PREFIX.length).trim()
+  return slug || null
+}

package/templates/module-hybrid-cdn/src/assets/css/main.prod.css

@@ -8,5 +8,5 @@
 @import 'tailwindcss' prefix(dw);
 @import './tailwind.css.config.css';
 
-/* Prefixed utilities from tailwind-content.js (.temp) — must match prefix plugin on TSX */
-@source '../../../.temp/**/*.{js,jsx,ts,tsx}';
+/* Exact file — Tailwind v4 skips gitignored directories for glob @source */
+@source '../../../.temp/tailwind-classes.tsx';