@pega/cosmos-react-work 9.25.1-3 → 9.25.1-4

package/lib/components/MasterDetail/MasterDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetail.js","sourceRoot":"","sources":["../../../src/components/MasterDetail/MasterDetail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQhE,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;AAE9D,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB;;;;;;;;;GASG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,YAAY,CACnD,EACE,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,UAAU,GAAG,IAAI,EACjB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,eAAe,EACoB,EACrC,GAAwB;IAExB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IAC3D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IAExC,MAAM,UAAU,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAC3D,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAkB,CAAC;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAE1E,MAAM,SAAS,GAAG,IAAI,IAAI,YAAY,KAAK,SAAS,CAAC;IAErD,MAAM,eAAe,GAAG,UAAU,EAAE,KAAK,CAAC;IAC1C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,eAAe,IAAI,aAAa,CAAC,CAAC;IACrF,MAAM,KAAK,GAAG,eAAe,IAAI,aAAa,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAE3D,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC7D,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC1B,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAA+D,IAAI,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,CAAC,CAAkB,EAAE,EAAE;QAC/C,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,MAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QAC/C,YAAY,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAEtE,MAAM,eAAe,GAAG,CAAC,SAAgC,EAAE,EAAE;YAC3D,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC;YAClC,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,MAAM,YAAY,GAAG,CAAC,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;YACjF,UAAU,CAAC,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAqB,EAAE,OAAgB,EAAE,EAAE;QAClE,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC;QACpC,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,SAAS,EAAE,cAAc;QACrC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEhB,iGAAiG;IACjG,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IAE7C,oDAAoD;IACpD,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,OAAO,EAAE,EAAE,QAAQ,CAAC,CAAC;IAE7C,qFAAqF;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO,SAAS,CAAC;QAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1F,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;QAE1C,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,kFAAkF;IAClF,MAAM,eAAe,GAAG,WAAW,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,SAAS,EAAE,EAAE,IAAI,SAAS,CAAC,EAAE,KAAK,eAAe,IAAI,SAAS,CAAC,cAAc,EAAE,CAAC;YAC1F,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,wBAAwB,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;IAE1B,MAAM,UAAU,GAAG,UAAU,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC;IAEpD,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,EAAE,UAAU,IAAI,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC;IAC/D,MAAM,QAAQ,GAAG,CAAC,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAC5C,MAAM,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC;IAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAM,MAAM,GAAO,CAAC;IAC3D,IAAI,UAAU,GAAG,aAAa,CAAC;IAE/B,IAAI,OAAO,EAAE,CAAC;QACZ,UAAU,GAAG,CACX,8BACG,aAAa,EACd,KAAC,QAAQ,mBAAc,OAAO,CAAC,QAAQ,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,SAAG,IACpE,CACJ,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,kBAAkB,mBACJ,OAAO,CAAC,IAAI,EACzB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,eAAe,CAAC,eAAe,EAAE,SAAS,CAAC,EACtD,SAAS,iBACF,IAAI,cACD,SAAS,kBACL,KAAK,aAEnB,KAAC,kBAAkB,IAAC,SAAS,uBAAc,OAAO,CAAC,MAAM,YACtD,MAAM,GACY,EAEpB,UAAU,IAAI,CACb,KAAC,sBAAsB,IAAC,SAAS,uBAAc,OAAO,CAAC,YAAY,YACjE,KAAC,YAAY,IACX,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,eAAe,EAC1B,eAAe,EAAE,CAAC,CAAC,QAAQ,CAAC,GAC5B,GACqB,CAC1B,EAEA,IAAI,IAAI,CACP,KAAC,iBAAiB,mBACH,OAAO,CAAC,MAAM,EAC3B,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,gBAChC,SAAS,IAAI,SAAS,gBACtB,KAAK,EACjB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,YAE9C,MAAC,sBAAsB,eACrB,KAAC,iBAAiB,IAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,EAAE,MAAM,EACzB,IAAI,EAAE,SAAS,EAAE,IAAI,EACrB,OAAO,EAAE,SAAS,EAAE,OAAO,EAC3B,eAAe,EAAE,SAAS,EAAE,cAAc,EAC1C,UAAU,EAAE,CAAC,CAAC,cAAc,CAAC,EAC7B,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,OAAO,GAChB,EACD,QAAQ,IAAI,CACX,KAAC,iBAAiB,IAChB,OAAO,EAAE;gCACP,MAAM,EAAE,OAAO,CAAC,YAAY;gCAC5B,QAAQ,EAAE,OAAO,CAAC,cAAc;gCAChC,IAAI,EAAE,OAAO,CAAC,IAAI;6BACnB,EACD,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAC5B,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAChC,QAAQ,SACR,CACH,EAED,KAAC,qBAAqB,mBAAc,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,YAC7D,UAAU,GACW,EACvB,OAAO,IAAI,CAAC,QAAQ,IAAI,CACvB,KAAC,oBAAoB,mBAAc,OAAO,CAAC,GAAG,YAC5C,MAAC,oBAAoB,eACnB,KAAC,eAAe,mBACD,OAAO,CAAC,IAAI,EACzB,IAAI,QACJ,QAAQ,EAAE,CAAC,SAAS,EAAE,UAAU,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,EAAE,EACxC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,EAAC,QAAQ,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,GAAG,GACR,EAClB,KAAC,eAAe,mBACD,OAAO,CAAC,IAAI,EACzB,IAAI,QACJ,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EACpC,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,OAAO,EAAC,QAAQ,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACV,IACG,GACF,CACxB,IACsB,GACP,CACrB,IACkB,CACtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PropsWithoutRef,\n  Ref\n} from 'react';\n\nimport {\n  Icon,\n  Progress,\n  ResizeHandle,\n  createClassName,\n  getFocusables,\n  registerIcon,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useLiveLog,\n  usePrevious,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\nimport * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport {\n  StyledDetailPanel,\n  StyledDetailPanelBody,\n  StyledDetailPanelInner,\n  StyledDetailPanelNav,\n  StyledMasterDetail,\n  StyledMasterRegion,\n  StyledResizeHandleSlot,\n  StyledNavButtonGroup,\n  StyledNavButton\n} from './MasterDetail.styles';\nimport DetailPanelHeader from './DetailPanelHeader';\nimport { getMasterDetailTestIds } from './MasterDetail.test-ids';\nimport type { MasterDetailProps } from './MasterDetail.types';\n\nregisterIcon(timesIcon, moreIcon, caretUpIcon, caretDownIcon);\n\nconst DEFAULT_RATIO = 60;\nconst KEYBOARD_STEP = 2;\n\n/**\n * Layout component that arranges a `master` surface (e.g. a table) and its detail surface so they\n * share the host box. It owns the split/overlay decision (including the responsive `auto` behavior\n * measured against its own container), the drag/keyboard resize, and the detail surface itself —\n * the header chrome (previous/next/close + identity), the body, and the surface accessibility (focus\n * move/restore, Esc-to-close, and polite selection announcements).\n *\n * It is pure presentation: the panel content and data loading remain the host's responsibility —\n * pass rendered `detail`, the `selection` metadata, and the navigation/close callbacks.\n */\nconst MasterDetail = forwardRef(function MasterDetail(\n  {\n    testId,\n    master,\n    detail,\n    open,\n    className,\n    selection,\n    loading,\n    presentation,\n    nestedNavigation,\n    resizeable = true,\n    splitRatio,\n    onClose,\n    onResize,\n    restoreFocusRef\n  }: PropsWithoutRef<MasterDetailProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const testIds = useTestIds(testId, getMasterDetailTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n\n  const wrapperRef = useConsolidatedRef<HTMLDivElement>(ref);\n  const panelRef = useRef<HTMLElement>(null);\n  const [bodyEl, setBodyEl] = useElement<HTMLDivElement>();\n  const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n\n  const isOverlay = open && presentation === 'overlay';\n\n  const controlledRatio = splitRatio?.ratio;\n  const [internalRatio, setInternalRatio] = useState(controlledRatio ?? DEFAULT_RATIO);\n  const ratio = controlledRatio ?? internalRatio;\n  const [minRatio, maxRatio] = splitRatio?.range ?? [20, 80];\n\n  const applyRatio = (next: number) => {\n    const clamped = Math.min(Math.max(next, minRatio), maxRatio);\n    setInternalRatio(clamped);\n    onResize?.(clamped);\n  };\n\n  const startDragRef = useRef<{ startX: number; startWidth: number; rect: DOMRect } | null>(null);\n\n  const onHandleMouseDown = (e: ReactMouseEvent) => {\n    const container = wrapperRef.current;\n    if (!container) return;\n    const rect = container.getBoundingClientRect();\n    startDragRef.current = { startX: e.clientX, startWidth: ratio, rect };\n\n    const handleMouseMove = (moveEvent: globalThis.MouseEvent) => {\n      const drag = startDragRef.current;\n      if (!drag) return;\n      const deltaPercent = ((moveEvent.clientX - drag.startX) / drag.rect.width) * 100;\n      applyRatio(drag.startWidth + deltaPercent);\n    };\n\n    const handleMouseUp = () => {\n      startDragRef.current = null;\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n  };\n\n  const onHandleKeyDown = (e: ReactKeyboardEvent, grabbed: boolean) => {\n    if (!grabbed) return;\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      applyRatio(ratio - KEYBOARD_STEP);\n    }\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      applyRatio(ratio + KEYBOARD_STEP);\n    }\n  };\n\n  const label = selection?.accessibleName\n    ? t('detail_of_noun', [selection.accessibleName])\n    : t('detail');\n\n  // Trap focus only in overlay mode — a docked surface is part of the page flow and must not trap.\n  useFocusTrap(panelRef, isOverlay, [], false);\n\n  // Escape closes the detail when focus is within it.\n  useEscape(() => open && onClose(), panelRef);\n\n  // Move focus into the detail on open; restore focus to the trigger on close/unmount.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const focusables = bodyEl ? getFocusables(bodyEl).filter(el => el !== closeButtonEl) : [];\n    (focusables[0] ?? closeButtonEl)?.focus();\n\n    return () => {\n      restoreFocusRef?.current?.focus();\n    };\n  }, [open]);\n\n  // Announce selection changes (previous/next navigation) via a polite live region.\n  const prevSelectionId = usePrevious(selection?.id);\n  useEffect(() => {\n    if (open && selection?.id && selection.id !== prevSelectionId && selection.accessibleName) {\n      announcePolite({ message: t('showing_detail_of_noun', [selection.accessibleName]) });\n    }\n  }, [open, selection?.id]);\n\n  const showResize = resizeable && open && !isOverlay;\n\n  const showNav = !!selection?.onPrevious || !!selection?.onNext;\n  const isNested = !!nestedNavigation?.onBack;\n  const nestedTitle = nestedNavigation?.title;\n  const detailContent = loading ? null : <div>{detail}</div>;\n  let detailBody = detailContent;\n\n  if (loading) {\n    detailBody = (\n      <>\n        {detailContent}\n        <Progress data-testid={testIds.progress} placement='local' visible />\n      </>\n    );\n  }\n\n  return (\n    <StyledMasterDetail\n      data-testid={testIds.root}\n      ref={wrapperRef}\n      className={createClassName('master-detail', className)}\n      container\n      $open={open}\n      $overlay={isOverlay}\n      $masterWidth={ratio}\n    >\n      <StyledMasterRegion container data-testid={testIds.master}>\n        {master}\n      </StyledMasterRegion>\n\n      {showResize && (\n        <StyledResizeHandleSlot container data-testid={testIds.resizeHandle}>\n          <ResizeHandle\n            onMouseDown={onHandleMouseDown}\n            onKeyDown={onHandleKeyDown}\n            contextualLabel={t('detail')}\n          />\n        </StyledResizeHandleSlot>\n      )}\n\n      {open && (\n        <StyledDetailPanel\n          data-testid={testIds.detail}\n          ref={panelRef}\n          role={isOverlay ? 'dialog' : 'complementary'}\n          aria-modal={isOverlay || undefined}\n          aria-label={label}\n          presentation={isOverlay ? 'overlay' : 'docked'}\n        >\n          <StyledDetailPanelInner>\n            <DetailPanelHeader\n              testIds={testIds}\n              header={selection?.header}\n              icon={selection?.icon}\n              actions={selection?.actions}\n              contextualLabel={selection?.accessibleName}\n              closeLabel={t('close_detail')}\n              closeRef={setCloseButtonEl}\n              onClose={onClose}\n            />\n            {isNested && (\n              <DetailPanelHeader\n                testIds={{\n                  header: testIds.nestedHeader,\n                  identity: testIds.nestedIdentity,\n                  back: testIds.back\n                }}\n                header={nestedTitle}\n                icon={nestedNavigation?.icon}\n                onBack={nestedNavigation?.onBack}\n                isNested\n              />\n            )}\n\n            <StyledDetailPanelBody data-testid={testIds.body} ref={setBodyEl}>\n              {detailBody}\n            </StyledDetailPanelBody>\n            {showNav && !isNested && (\n              <StyledDetailPanelNav data-testid={testIds.nav}>\n                <StyledNavButtonGroup>\n                  <StyledNavButton\n                    data-testid={testIds.prev}\n                    icon\n                    disabled={!selection?.onPrevious}\n                    onClick={() => selection?.onPrevious?.()}\n                    label={t('previous_record')}\n                    variant='simple'\n                  >\n                    <Icon name='caret-up' />\n                  </StyledNavButton>\n                  <StyledNavButton\n                    data-testid={testIds.next}\n                    icon\n                    disabled={!selection?.onNext}\n                    onClick={() => selection?.onNext?.()}\n                    label={t('next_record')}\n                    variant='simple'\n                  >\n                    <Icon name='caret-down' />\n                  </StyledNavButton>\n                </StyledNavButtonGroup>\n              </StyledDetailPanelNav>\n            )}\n          </StyledDetailPanelInner>\n        </StyledDetailPanel>\n      )}\n    </StyledMasterDetail>\n  );\n});\n\nexport default withTestIds(MasterDetail, getMasterDetailTestIds);\n"]}