{"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { DataProps } from '../types/baseProps.types';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { isInteractiveTarget } from '../utils/interactiveTarget';\n\ninterface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n  tabIndex?: number | null;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction InteractableDiv({\n  className,\n  children,\n  onClick,\n  onKeyDown,\n  tabIndex,\n  ref,\n  ...props\n}: Properties): ReactElement {\n  const onClickHandler = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      // The pointer half of `isSelfActivation`: while only keydown checked its target, a click\n      // into a card's text field counted as pressing the card and a Space typed into it did not.\n      if (isInteractiveTarget(e.target, e.currentTarget)) return;\n      onClick?.(e);\n    },\n    [onClick],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (isSelfActivation(e)) {\n        if (e.key === ' ') e.preventDefault();\n        // A real click, the way a native button answers Enter and Space, rather\n        // than calling `onClick` directly: it arrives as a MouseEvent instead of\n        // a keyboard event wearing one, and it bubbles, so a parent that owns the\n        // click sees it too. That parent is how a `Popover` or `Menu` opens from\n        // a trigger that is not a button.\n        e.currentTarget.click();\n      }\n      onKeyDown?.(e);\n    },\n    [onKeyDown],\n  );\n\n  // Compared to undefined rather than using ??, so an explicit null still means \"no tabindex\"\n  // instead of falling through to the default.\n  return (\n    <div\n      className={cx(styles.interactableDiv, className)}\n      onClick={onClick ? onClickHandler : undefined}\n      tabIndex={tabIndex === undefined ? (onClick ? 0 : undefined) : (tabIndex ?? undefined)}\n      role={onClick ? 'button' : undefined}\n      onKeyDown={onKeyDownHandler}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default InteractableDiv;\n"],"mappings":"kSAaA,SAAS,EAAgB,CACvB,YACA,WACA,UACA,YACA,WACA,MACA,GAAG,GACwB,CAC3B,IAAM,EAAiB,EACpB,GAAkC,CAG7B,EAAoB,EAAE,OAAQ,EAAE,aAAa,GACjD,IAAU,CAAC,CACb,EACA,CAAC,CAAO,CACV,EAEM,EAAmB,EACtB,GAAqC,CAChC,EAAiB,CAAC,IAChB,EAAE,MAAQ,KAAK,EAAE,eAAe,EAMpC,EAAE,cAAc,MAAM,GAExB,IAAY,CAAC,CACf,EACA,CAAC,CAAS,CACZ,EAIA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EAC/C,QAAS,EAAU,EAAiB,IAAA,GACpC,SAAU,IAAa,IAAA,GAAa,EAAU,EAAI,IAAA,GAAc,GAAY,IAAA,GAC5E,KAAM,EAAU,SAAW,IAAA,GAC3B,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET"}