{"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import { useRef, type ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n  const {\n    className = undefined,\n    style,\n    classNames,\n    styles: slotStyles,\n    options,\n    onChange,\n    value,\n    ...rest\n  } = useComponentDefaults('OptionPicker', props);\n\n  const optionPickerLeft = (options.findIndex((option) => option.key === value) * 100) / options.length;\n\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const selectedIndex = options.findIndex((option) => option.key === value);\n  const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent<HTMLDivElement>) {\n    if (options.length === 0) return;\n    const next = (fromIndex + step + options.length) % options.length;\n    itemRefs.current[next]?.focus();\n    onChange(options[next].key, event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, index: number) {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        moveTo(1, index, event);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        moveTo(-1, index, event);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      role='radiogroup'\n      className={cx(styles.optionPicker, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.optionPickerChip, classNames?.chip)}\n        style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n      />\n      {options.map((option, index) => {\n        const checked = option.key === value;\n        return (\n          <InteractableDiv\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            onClick={(e) => onChange(option.key, e)}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            key={option.key}\n            role='radio'\n            aria-checked={checked}\n            className={cx(styles.optionPickerOption, checked && styles.optionPickerOptionActive, classNames?.option)}\n            style={slotStyles?.option}\n            tabIndex={index === rovingIndex ? 0 : -1}\n          >\n            {option.label}\n          </InteractableDiv>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default OptionPicker;\n"],"mappings":"+RAQA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAoB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAO,EAAQ,OAEzF,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAClE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAO,EAAc,EAAmB,EAA4C,CAC3F,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,GAAQ,EAAY,EAAO,EAAQ,QAAU,EAAQ,OAC3D,EAAS,QAAQ,EAAK,EAAE,MAAM,EAC9B,EAAS,EAAQ,EAAK,CAAC,IAAK,CAAgE,CAC9F,CAEA,SAAS,EAAc,EAA4C,EAAe,CAChF,OAAQ,EAAM,IAAd,CACE,IAAK,aACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,YACL,IAAK,UACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,CAI3B,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAME,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,MAAQ,EAC/B,OACE,EAAC,EAAD,CACE,IAAM,GAAO,CACX,EAAS,QAAQ,GAAS,CAC5B,EACA,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,EAAG,EAAO,mBAAoB,GAAW,EAAO,yBAA0B,GAAY,MAAM,EACvG,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,GAErC,SAAA,EAAO,KACO,EARV,EAAO,GAQG,CAErB,CAAC,CACE,GAET"}