{"version":3,"file":"index-DWSFicX1.js","sources":["../../app/javascript/components/components/data_entry/radio/index.tsx"],"sourcesContent":["import React, { HTMLProps, ReactElement, useContext, useState } from \"react\";\nimport { Omit, ReactNode as TypedReactNode } from \"../../../../sharedTypes\";\nimport styled from \"styled-components\";\nimport { Themes } from \"../../../styling/deprecated_theme\";\nimport { ToggleTipProps } from \"../../layout/toggle_tip\";\n\n// there might be a better way to do this eventually, but for now we need a way to\n// make sure each radio group is unique\nconst groupNames: { [name: string]: number } = {};\n\nexport enum RadioGroupDisplay {\n  normal,\n  buttonGroup,\n}\n\nconst RadioContext = React.createContext<{\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange(newValue: any): void;\n  radioGroupName: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  currentValue?: any;\n}>({\n  onChange: () => undefined,\n  radioGroupName: \"\",\n});\n\n// don't allow onChange listeners on a radio button. this should only be handled by the parent radioGroup\ninterface RadioButtonProps extends Omit<HTMLProps<HTMLInputElement>, \"onChange\"> {\n  label: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: any;\n  dataTest?: string;\n  toggleTip?: ReactElement<ToggleTipProps>;\n}\n\nconst StyledRadioGroup = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  .radio-button {\n    display: flex;\n    align-items: center;\n    padding: ${({ theme }) =>\n      theme.VARIATION === Themes.Admin ? undefined : theme.deprecatedSpacing.component.three};\n\n    .rb-input {\n      flex: 0 0 20px;\n      appearance: none;\n      height: 20px;\n      width: 20px;\n      border: ${({ theme }) =>\n        `${theme.deprecatedBorder.weight.heavy} solid ${theme.deprecatedColors.gray.eight}`};\n      border-radius: 50%;\n      margin: 8px;\n\n      &:checked {\n        border: ${({ theme }) =>\n          `${theme.deprecatedBorder.weight.heavy} solid ${theme.deprecatedColors.primary.normal}`};\n        &:after {\n          content: \"\";\n          position: relative;\n          height: 10px;\n          width: 10px;\n          display: block;\n          background-color: ${({ theme }) => theme.deprecatedColors.primary.normal};\n          border-radius: 50%;\n          top: calc(50% - 5px);\n          left: calc(50% - 5px);\n        }\n      }\n    }\n\n    .rb-label {\n      flex: 1;\n      text-transform: none;\n      flex-grow: 1;\n      font-size: ${({ theme }) =>\n        theme.VARIATION === Themes.Admin ? theme.font.size.label.one : theme.font.size.body.one};\n    }\n  }\n`;\n\nconst StyledButtonGroup = styled.div`\n  display: flex;\n  flex-direction: row;\n  color: ${({ theme }) => theme.deprecatedColors.primary.normal};\n\n  .radio-button {\n    cursor: pointer;\n    padding: ${({ theme }) => theme.deprecatedSpacing.component.three};\n    text-align: center;\n    border-top: ${({ theme }) =>\n      `${theme.deprecatedBorder.weight.normal} solid ${theme.deprecatedColors.primary.normal}`};\n    border-bottom: ${({ theme }) =>\n      `${theme.deprecatedBorder.weight.normal} solid ${theme.deprecatedColors.primary.normal}`};\n    border-right: ${({ theme }) =>\n      `${theme.deprecatedBorder.weight.normal} solid ${theme.deprecatedColors.primary.normal}`};\n    position: relative;\n\n    &:last-child {\n      border-top-right-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      border-bottom-right-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      .rb-input {\n        border-top-right-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n        border-bottom-right-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      }\n    }\n\n    &:first-child {\n      border-left: ${({ theme }) =>\n        `${theme.deprecatedBorder.weight.normal} solid ${theme.deprecatedColors.primary.normal}`};\n      border-top-left-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      border-bottom-left-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      .rb-input {\n        border-top-left-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n        border-bottom-left-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n      }\n    }\n\n    .rb-input {\n      cursor: pointer;\n      appearance: none;\n      height: 100%;\n      width: 100%;\n      position: absolute;\n      margin: 0;\n      top: 0;\n      left: 0;\n      border-radius: 0;\n\n      background-color: ${({ theme }) => theme.deprecatedColors.white};\n      &.selected {\n        background-color: ${({ theme }) => theme.deprecatedColors.primary.normal};\n      }\n    }\n\n    .rb-label {\n      cursor: pointer;\n      position: relative;\n      &.selected {\n        color: ${({ theme }) => theme.deprecatedColors.white};\n      }\n    }\n  }\n`;\n\nexport function RadioButton({\n  label,\n  value,\n  dataTest,\n  className,\n  toggleTip,\n  ...rest\n}: RadioButtonProps) {\n  const { radioGroupName, currentValue, onChange } = useContext(RadioContext);\n  const [focused, setFocused] = useState<boolean>(false);\n  const classes = className ? `radio-button ${className}` : \"radio-button\";\n  const selectedClass = value === currentValue ? \"selected\" : \"\";\n  const focusedClass = focused ? \"focus\" : \"\";\n\n  return (\n    <label\n      className={`${classes} ${selectedClass} ${focusedClass}`}\n      data-test={dataTest}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n    >\n      <input\n        name={radioGroupName}\n        onChange={({ currentTarget: { checked } }) => {\n          if (checked) {\n            onChange(value);\n          }\n        }}\n        checked={value === currentValue}\n        type=\"radio\"\n        value={value}\n        {...rest}\n        className={`${selectedClass} rb-input`}\n      />\n      <span className={`${selectedClass} rb-label`}>\n        {label} {toggleTip}\n      </span>\n    </label>\n  );\n}\n\nconst Label = styled.label`\n  display: inline-block;\n  text-transform: uppercase;\n  color: ${({ theme }) => theme.deprecatedColors.gray.five};\n  font-size: ${({ theme }) => theme.font.size.label.one};\n  padding-bottom: ${({ theme }) => theme.deprecatedSpacing.component.three};\n  padding-right: ${({ theme }) => theme.deprecatedSpacing.component.three};\n`;\n\nconst HelperText = styled.p`\n  display: block;\n  margin-top: ${({ theme }) => theme.deprecatedSpacing.component.three};\n  color: ${({ theme }) => theme.deprecatedColors.gray.six};\n  font-size: ${({ theme }) => theme.font.size.body.three};\n  line-height: ${({ theme }) => theme.font.size.body.two};\n`;\n\nexport function RadioGroup<T>({\n  name,\n  value,\n  onChange,\n  children,\n  label,\n  helperText,\n  display = RadioGroupDisplay.normal,\n  className,\n}: {\n  name: string;\n  value?: T;\n  onChange(newValue: T): void;\n  children: TypedReactNode<RadioButtonProps>;\n  display?: RadioGroupDisplay;\n  className?: string;\n  role?: string;\n  label?: string;\n  helperText?: string;\n}) {\n  if (Object.keys(groupNames).includes(name)) {\n    groupNames[name] = groupNames[name] + 1;\n  } else {\n    groupNames[name] = 1;\n  }\n  const groupName = `${name}|${groupNames[name]}`;\n  return (\n    <RadioContext.Provider\n      value={{\n        onChange,\n        currentValue: value,\n        radioGroupName: groupName,\n      }}\n    >\n      {display === RadioGroupDisplay.normal && (\n        <StyledRadioGroup className={className}>\n          {label && <Label htmlFor={name}>{label}</Label>}\n          {helperText && <HelperText>{helperText}</HelperText>}\n          {children}\n        </StyledRadioGroup>\n      )}\n      {display === RadioGroupDisplay.buttonGroup && (\n        <StyledButtonGroup className={className}>\n          {label && <Label htmlFor={name}>{label}</Label>}\n          {helperText && <HelperText>{helperText}</HelperText>}\n          {children}\n        </StyledButtonGroup>\n      )}\n    </RadioContext.Provider>\n  );\n}\n"],"names":["groupNames","RadioGroupDisplay","RadioGroupDisplay2","RadioContext","React","StyledRadioGroup","styled","theme","Themes","StyledButtonGroup","RadioButton","label","value","dataTest","className","toggleTip","rest","radioGroupName","currentValue","onChange","useContext","focused","setFocused","useState","classes","selectedClass","focusedClass","jsxs","jsx","checked","Label","HelperText","RadioGroup","name","children","helperText","display","groupName"],"mappings":"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"}