{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.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, TLUiButtonProps } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: TLUiButtonProps['type']\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DropdownPicker = React.memo(function DropdownPicker<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\treturn (\n\t\t<DropdownMenu.Root id={`style panel ${id}`}>\n\t\t\t<Trigger\n\t\t\t\tasChild\n\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttitle={\n\t\t\t\t\t\tvalue.type === 'mixed'\n\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\t\t\t\t\t}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\ticon={(icon as TLUiIconType) ?? 'mixed'}\n\t\t\t\t/>\n\t\t\t</Trigger>\n\t\t\t<DropdownMenu.Content side=\"left\" align=\"center\" alignOffset={0}>\n\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\ttitle={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\tonClick={() => onValueChange(style, item.value, false)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Content>\n\t\t</DropdownMenu.Root>\n\t)\n})\n"],
  "mappings": "AAuCE,SAME,KANF;AAvCF,SAAiC,sBAAsB;AACvD,SAAS,eAAe;AACxB,YAAY,WAAW;AAEvB,SAAS,sBAAsB;AAE/B,SAAS,cAA+B;AACxC,YAAY,kBAAkB;AAcvB,MAAM,iBAAiB,MAAM,KAAK,SAASA,gBAAiC;AAAA,EAClF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,MAAM,eAAe;AAE3B,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,SACC,qBAAC,aAAa,MAAb,EAAkB,IAAI,eAAe,EAAE,IACvC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAO;AAAA,QAEP,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA,QAEnC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,OACC,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AAAA,YAE9D;AAAA,YACA,MAAO,QAAyB;AAAA;AAAA,QACjC;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,aAAa,SAAb,EAAqB,MAAK,QAAO,OAAM,UAAS,aAAa,GAC7D,8BAAC,SAAI,WAAU,sBACb,gBAAM,IAAI,CAAC,SAAS;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,MAAK;AAAA,UACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,UAC1C,OAAO,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,UAEhE,MAAM,KAAK;AAAA,UACX,SAAS,MAAM,cAAc,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,QAFhD,KAAK;AAAA,MAGX;AAAA,IAEF,CAAC,GACF,GACD;AAAA,KACD;AAEF,CAAC;",
  "names": ["DropdownPicker"]
}