{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.tsx"],
  "sourcesContent": ["import { Trigger } from '@radix-ui/react-dropdown-menu'\nimport { SharedStyle, StyleProp, preventDefault } from '@tldraw/editor'\nimport classNames from 'classnames'\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 DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\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\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\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\n\t\t\t\t\tclassName={classNames('tlui-button-grid', {\n\t\t\t\t\t\t'tlui-button-grid__two': items.length < 3,\n\t\t\t\t\t\t'tlui-button-grid__three': items.length == 3,\n\t\t\t\t\t\t'tlui-button-grid__four': items.length >= 4,\n\t\t\t\t\t})}\n\t\t\t\t>\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\tclassName=\"tlui-button-grid__button\"\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": "AAsCE,SAME,KANF;AAtCF,SAAS,eAAe;AACxB,SAAiC,sBAAsB;AACvD,OAAO,gBAAgB;AACvB,YAAY,WAAW;AAEvB,SAAS,sBAAsB;AAE/B,SAAS,cAAc;AACvB,YAAY,kBAAkB;AAavB,MAAM,iBAAiB,MAAM,KAAK,SAASA,gBAAiC;AAAA,EAClF;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,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;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,oBAAoB;AAAA,UACzC,yBAAyB,MAAM,SAAS;AAAA,UACxC,2BAA2B,MAAM,UAAU;AAAA,UAC3C,0BAA0B,MAAM,UAAU;AAAA,QAC3C,CAAC;AAAA,QAEA,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cACA,WAAU;AAAA,cACV,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OAAO,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAEhE,MAAM,KAAK;AAAA,cACX,SAAS,MAAM,cAAc,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,YAFhD,KAAK;AAAA,UAGX;AAAA,QAEF,CAAC;AAAA;AAAA,IACF,GACD;AAAA,KACD;AAEF,CAAC;",
  "names": ["DropdownPicker"]
}