| 1 | {"version":3,"file":"ChoiceGroup.base.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroup.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAoC;AACpC,6CAOyB;AACzB,mDAA8D;AAC9D,qDAAgG;AAWhG,IAAM,aAAa,GAAG,8BAAkB,EAA8C,CAAC;AAEvF,IAAM,WAAW,GAAG,UAAC,MAA0B,EAAE,EAAU;IACzD,OAAU,EAAE,SAAI,MAAM,CAAC,GAAK,CAAC;AAC/B,CAAC,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,OAA6B,EAAE,GAAqC;IACtF,OAAO,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAI,CAAC,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,GAAG,EAAjB,CAAiB,CAAC,CAAC;AACnF,CAAC,CAAC;AAEF,IAAM,mBAAmB,GAAG,UAC1B,OAA6B,EAC7B,UAA4C,EAC5C,EAAU;IAEV,IAAM,aAAa,GAAG,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,CAAC,MAAM,CAAC,QAAQ,EAAhB,CAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvG,IAAM,cAAc,GAAG,aAAa,IAAI,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;IAEhG,IAAI,cAAc,EAAE;QAClB,cAAc,CAAC,KAAK,EAAE,CAAC;QACvB,8BAAkB,CAAC,IAAI,EAAE,cAAyB,CAAC,CAAC;KACrD;AACH,CAAC,CAAC;AAEF,IAAM,sBAAsB,GAAG,UAAC,GAAkC;IAChE,OAAO,GAAG,CAAC,aAAa,YAAY,WAAW,IAAI,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,qBAAqB,KAAK,MAAM,CAAC;AAChH,CAAC,CAAC;AAEF,IAAM,eAAe,GAAG,UACtB,OAA6B,EAC7B,UAA4C,EAC5C,EAAU,EACV,YAAuC;IAEvC,KAAK,CAAC,mBAAmB,CACvB,YAAY,EACZ,cAAM,OAAA,CAAC;QACL,IAAI,aAAa;YACf,OAAO,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;QACzC,CAAC;QACD,KAAK;YACH,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;QAC/C,CAAC;KACF,CAAC,EAPI,CAOJ,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,cAAc,GAAG,aAAa,CAAC;AAExB,QAAA,eAAe,GAA+C,KAAK,CAAC,UAAU,CAGzF,UAAC,KAAK,EAAE,YAAY;IAElB,IAAA,SAAS,GAWP,KAAK,UAXE,EACT,KAAK,GAUH,KAAK,MAVF,EACL,MAAM,GASJ,KAAK,OATD,EACN,KAQE,KAAK,QARK,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,KAAK,GAOH,KAAK,MAPF,EACL,QAAQ,GAMN,KAAK,SANC,EACR,QAAQ,GAKN,KAAK,SALC,EACR,IAAI,GAIF,KAAK,KAJH,EACJ,kBAAkB,GAGhB,KAAK,mBAHW,EAClB,YAAY,GAEV,KAAK,aAFK,EACZ,QAAQ,GACN,KAAK,SADC,CACA;IACV,IAAM,EAAE,GAAG,mBAAK,CAAC,aAAa,CAAC,CAAC;IAChC,IAAM,OAAO,GAAG,mBAAK,CAAC,kBAAkB,CAAC,CAAC;IAE1C,IAAM,QAAQ,GAAG,0BAAc,CAAuC,KAAK,EAAE,yBAAa,EAAE;QAC1F,UAAU;QACV,WAAW;QACX,UAAU;KACX,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;QACxC,KAAK,EAAE,KAAM;QACb,SAAS,WAAA;QACT,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAA,MAAM,IAAI,OAAA,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAvC,CAAuC,CAAC;KAC3F,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,KAAK,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEtF,IAAA,KAA8B,kCAAoB,CAAC,KAAK,CAAC,WAAW,EAAE,kBAAkB,CAAC,EAAxF,UAAU,QAAA,EAAE,aAAa,QAA+D,CAAC;IAC1F,IAAA,KAA8B,KAAK,CAAC,QAAQ,EAAmB,EAA9D,UAAU,QAAA,EAAE,aAAa,QAAqC,CAAC;IAEtE,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,cAAc,GAA8B,2BAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEvF,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,eAAe,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC;IACvD,yBAAa,CAAC,OAAO,CAAC,CAAC;IAEvB,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,EAAkC,EAAE,MAAgC;;QACrG,IAAI,MAAM,EAAE;YACV,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC9B,MAAA,MAAM,CAAC,OAAO,+CAAd,MAAM,EAAW,EAAE,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,EAAiC,EAAE,MAAgC;;QACnG,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,+CAAd,MAAM,EAAW,EAAE,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,GAAqD,EAAE,MAAgC;;QACtF,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE9B,MAAA,MAAM,CAAC,QAAQ,+CAAf,MAAM,EAAY,GAAG,CAAC,CAAC;QACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,GAAG,EAAE,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CACnC,CAAC;IAEF,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,GAAkC;QACjC,sFAAsF;QACtF,IAAI,sBAAsB,CAAC,GAAG,CAAC,EAAE;YAC/B,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;SAC9C;IACH,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAC1B,CAAC;IAEF,OAAO,CACL,8CAAK,SAAS,EAAE,UAAU,CAAC,IAAI,IAAM,QAAQ,IAAE,GAAG,EAAE,cAAc;QAChE,8CAAK,IAAI,EAAC,YAAY,IAAK,CAAC,cAAc,IAAI,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAC,IAAE,OAAO,EAAE,YAAY;YACxG,KAAK,IAAI,CACR,oBAAC,aAAK,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IACpF,KAAK,CACA,CACT;YACD,6BAAK,SAAS,EAAE,UAAU,CAAC,aAAa,IACrC,OAAO,CAAC,GAAG,CAAC,UAAC,MAA0B;gBACtC,OAAO,CACL,oBAAC,yBAAiB,qBAChB,OAAO,EAAE,MAAM,CAAC,GAAG,IACf,MAAM,IACV,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,MAAM,CAAC,GAAG,KAAK,UAAU,EAClC,OAAO,EAAE,MAAM,CAAC,GAAG,KAAK,UAAU,EAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,QAAQ,EACrC,EAAE,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,EAC3B,OAAO,EAAE,MAAM,CAAC,OAAO,IAAO,OAAO,SAAI,MAAM,CAAC,GAAK,EACrD,IAAI,EAAE,IAAI,IAAI,EAAE,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAC;YACJ,CAAC,CAAC,CACE,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAe,CAAC,WAAW,GAAG,cAAc,CAAC;AAE7C,SAAS,gBAAgB,CAAC,KAAwB;IAChD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;QACzC,gFAAgF;QAChF,yBAAW,CAAC;YACV,IAAI,EAAE,cAAc;YACpB,KAAK,OAAA;YACL,iBAAiB,EAAE;gBACjB,WAAW,EAAE,oBAAoB;aAClC;SACF,CAAC,CAAC;KACJ;AACH,CAAC","sourcesContent":["import * as React from 'react';\nimport { Label } from '../../Label';\nimport {\n classNamesFunction,\n find,\n getNativeProps,\n divProperties,\n setFocusVisibility,\n useFocusRects,\n} from '../../Utilities';\nimport { ChoiceGroupOption } from './ChoiceGroupOption/index';\nimport { useId, useControllableValue, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport type { IRefObject } from '../../Utilities';\nimport type {\n IChoiceGroupOption,\n IChoiceGroupProps,\n IChoiceGroupStyleProps,\n IChoiceGroupStyles,\n IChoiceGroup,\n} from './ChoiceGroup.types';\nimport type { IChoiceGroupOptionProps } from './ChoiceGroupOption/ChoiceGroupOption.types';\n\nconst getClassNames = classNamesFunction<IChoiceGroupStyleProps, IChoiceGroupStyles>();\n\nconst getOptionId = (option: IChoiceGroupOption, id: string): string => {\n return `${id}-${option.key}`;\n};\n\nconst findOption = (options: IChoiceGroupOption[], key: IChoiceGroupProps['selectedKey']) => {\n return key === undefined ? undefined : find(options, value => value.key === key);\n};\n\nconst focusSelectedOption = (\n options: IChoiceGroupOption[],\n keyChecked: IChoiceGroupProps['selectedKey'],\n id: string,\n) => {\n const optionToFocus = findOption(options, keyChecked) || options.filter(option => !option.disabled)[0];\n const elementToFocus = optionToFocus && document.getElementById(getOptionId(optionToFocus, id));\n\n if (elementToFocus) {\n elementToFocus.focus();\n setFocusVisibility(true, elementToFocus as Element);\n }\n};\n\nconst focusFromFocusTrapZone = (evt: React.FocusEvent<HTMLElement>): boolean => {\n return evt.relatedTarget instanceof HTMLElement && evt.relatedTarget.dataset.isFocusTrapZoneBumper === 'true';\n};\n\nconst useComponentRef = (\n options: IChoiceGroupOption[],\n keyChecked: IChoiceGroupProps['selectedKey'],\n id: string,\n componentRef?: IRefObject<IChoiceGroup>,\n) => {\n React.useImperativeHandle(\n componentRef,\n () => ({\n get checkedOption() {\n return findOption(options, keyChecked);\n },\n focus() {\n focusSelectedOption(options, keyChecked, id);\n },\n }),\n [options, keyChecked, id],\n );\n};\n\nconst COMPONENT_NAME = 'ChoiceGroup';\n\nexport const ChoiceGroupBase: React.FunctionComponent<IChoiceGroupProps> = React.forwardRef<\n HTMLDivElement,\n IChoiceGroupProps\n>((props, forwardedRef) => {\n const {\n className,\n theme,\n styles,\n options = [],\n label,\n required,\n disabled,\n name,\n defaultSelectedKey,\n componentRef,\n onChange,\n } = props;\n const id = useId('ChoiceGroup');\n const labelId = useId('ChoiceGroupLabel');\n\n const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties, [\n 'onChange',\n 'className',\n 'required',\n ]);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n optionsContainIconOrImage: options.some(option => !!(option.iconProps || option.imageSrc)),\n });\n\n const ariaLabelledBy = props.ariaLabelledBy || (label ? labelId : props['aria-labelledby']);\n\n const [keyChecked, setKeyChecked] = useControllableValue(props.selectedKey, defaultSelectedKey);\n const [keyFocused, setKeyFocused] = React.useState<string | number>();\n\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRootRefs: React.Ref<HTMLDivElement> = useMergedRefs(rootRef, forwardedRef);\n\n useDebugWarnings(props);\n useComponentRef(options, keyChecked, id, componentRef);\n useFocusRects(rootRef);\n\n const onFocus = React.useCallback((ev?: React.FocusEvent<HTMLElement>, option?: IChoiceGroupOptionProps) => {\n if (option) {\n setKeyFocused(option.itemKey);\n option.onFocus?.(ev);\n }\n }, []);\n\n const onBlur = React.useCallback((ev: React.FocusEvent<HTMLElement>, option?: IChoiceGroupOptionProps) => {\n setKeyFocused(undefined);\n option?.onBlur?.(ev);\n }, []);\n\n const onOptionChange = React.useCallback(\n (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOptionProps) => {\n if (!option) {\n return;\n }\n setKeyChecked(option.itemKey);\n\n option.onChange?.(evt);\n onChange?.(evt, findOption(options, option.itemKey));\n },\n [onChange, options, setKeyChecked],\n );\n\n const onRadioFocus = React.useCallback(\n (evt: React.FocusEvent<HTMLElement>) => {\n // Handles scenarios like this bug: https://github.com/microsoft/fluentui/issues/20173\n if (focusFromFocusTrapZone(evt)) {\n focusSelectedOption(options, keyChecked, id);\n }\n },\n [options, keyChecked, id],\n );\n\n return (\n <div className={classNames.root} {...divProps} ref={mergedRootRefs}>\n <div role=\"radiogroup\" {...(ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy })} onFocus={onRadioFocus}>\n {label && (\n <Label className={classNames.label} required={required} id={labelId} disabled={disabled}>\n {label}\n </Label>\n )}\n <div className={classNames.flexContainer}>\n {options.map((option: IChoiceGroupOption) => {\n return (\n <ChoiceGroupOption\n itemKey={option.key}\n {...option}\n key={option.key}\n onBlur={onBlur}\n onFocus={onFocus}\n onChange={onOptionChange}\n focused={option.key === keyFocused}\n checked={option.key === keyChecked}\n disabled={option.disabled || disabled}\n id={getOptionId(option, id)}\n labelId={option.labelId || `${labelId}-${option.key}`}\n name={name || id}\n required={required}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n});\nChoiceGroupBase.displayName = COMPONENT_NAME;\n\nfunction useDebugWarnings(props: IChoiceGroupProps) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: COMPONENT_NAME,\n props,\n mutuallyExclusive: {\n selectedKey: 'defaultSelectedKey',\n },\n });\n }\n}\n"]} |