{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/StylePanel/DoubleDropdownPicker.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 DoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey\n\tlabelA: TLUiTranslationKey\n\tlabelB: 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<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>\n\t\t\t\t<Trigger\n\t\t\t\t\tasChild\n\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t(valueA === null\n\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA}` as TLUiTranslationKey))\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={iconA as any}\n\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t/>\n\t\t\t\t</Trigger>\n\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-button-grid', {\n\t\t\t\t\t\t\t'tlui-button-grid__two': itemsA.length < 4,\n\t\t\t\t\t\t\t'tlui-button-grid__four': itemsA.length >= 4,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\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}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleA, item.value, false)}\n\t\t\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</DropdownMenu.Content>\n\t\t\t</DropdownMenu.Root>\n\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeB}`}>\n\t\t\t\t<Trigger\n\t\t\t\t\tasChild\n\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t(valueB === null\n\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB}` as TLUiTranslationKey))\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={iconB as any}\n\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t/>\n\t\t\t\t</Trigger>\n\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-button-grid', {\n\t\t\t\t\t\t\t'tlui-button-grid__two': itemsA.length < 4,\n\t\t\t\t\t\t\t'tlui-button-grid__four': itemsA.length >= 4,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\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}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleB, item.value, false)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</DropdownMenu.Content>\n\t\t\t</DropdownMenu.Root>\n\t\t</div>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["DoubleDropdownPicker"]
}