{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx"],
  "sourcesContent": ["import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'\nimport { Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Button } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T extends string>({\n\tlabel,\n\tuiTypeA,\n\tuiTypeB,\n\tlabelA,\n\tlabelB,\n\titemsA,\n\titemsB,\n\tstyleA,\n\tstyleB,\n\tvalueA,\n\tvalueB,\n\tonValueChange,\n}: DoubleDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconA as any}\n\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeA}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleA, item.value, false)}\n\t\t\t\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeB}`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconB as any}\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleB, item.value, false)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["DoubleDropdownPicker"]
}