{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/primitives/ButtonPicker.tsx"],
  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tclamp,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { StyleValuesForUi } from '../StylePanel/styles'\nimport { Button } from './Button'\n\n/** @internal */\nexport interface ButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tcolumns?: 2 | 3 | 4\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nfunction _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tcolumns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rPointing = useRef(false)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, true)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, true)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, editor, onValueChange, style])\n\n\tconst theme = useValue(\n\t\t'theme',\n\t\t() => getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode }),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tlui-button-grid', {\n\t\t\t\t'tlui-button-grid__two': columns === 2,\n\t\t\t\t'tlui-button-grid__three': columns === 3,\n\t\t\t\t'tlui-button-grid__four': columns === 4,\n\t\t\t})}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<Button\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\taria-label={item.value}\n\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'hinted' : undefined}\n\t\t\t\t\ttitle={title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\tclassName={classNames('tlui-button-grid__button')}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t? { color: theme[item.value as TLDefaultColorStyle].solid }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\n/** @internal */\nexport const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker\n"],
  "mappings": "AA6GI;AA7GJ;AAAA,EACC;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,gBAAgB;AACvB,YAAY,WAAW;AACvB,SAAS,cAAc;AAEvB,SAAS,sBAAsB;AAG/B,SAAS,cAAc;AAavB,SAAS,cAAgC,OAA6B;AACrE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,IAClC;AAAA,EACD,IAAI;AACJ,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,MAAM,QAAQ,MAAM;AACvB,UAAM,kBAAkB,MAAM;AAC7B,gBAAU,UAAU;AACpB,aAAO,oBAAoB,aAAa,eAAe;AAAA,IACxD;AAEA,UAAMA,qBAAoB,CAAC,MAA6C;AACvE,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,MAAM,SAAS,YAAY,MAAM,UAAU;AAAI;AAEnD,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,UAAMC,2BAA0B,CAAC,MAA6C;AAC7E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAE/B,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAElC,gBAAU,UAAU;AACpB,aAAO,iBAAiB,aAAa,eAAe;AAAA,IACrD;AAEA,UAAMC,4BAA2B,CAAC,MAA6C;AAC9E,UAAI,CAAC,UAAU;AAAS;AAExB,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAAA,IACnC;AAEA,UAAMC,yBAAwB,CAAC,MAA6C;AAC3E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,WAAO;AAAA,MACN,mBAAAH;AAAA,MACA,yBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,uBAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,OAAO,QAAQ,eAAe,KAAK,CAAC;AAExC,QAAM,QAAQ;AAAA,IACb;AAAA,IACA,MAAM,qBAAqB,EAAE,YAAY,OAAO,KAAK,WAAW,CAAC;AAAA,IACjE,CAAC,MAAM;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,WAAW,oBAAoB;AAAA,QACzC,yBAAyB,YAAY;AAAA,QACrC,2BAA2B,YAAY;AAAA,QACvC,0BAA0B,YAAY;AAAA,MACvC,CAAC;AAAA,MAEA,gBAAM,IAAI,CAAC,SACX;AAAA,QAAC;AAAA;AAAA,UAEA,WAAS,KAAK;AAAA,UACd,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,UAC1C,cAAY,KAAK;AAAA,UACjB,cAAY,MAAM,SAAS,YAAY,MAAM,UAAU,KAAK,QAAQ,WAAW;AAAA,UAC/E,OAAO,QAAQ,aAAQ,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,UAChF,WAAW,WAAW,0BAA0B;AAAA,UAChD,OACC,UAAW,oBACR,EAAE,OAAO,MAAM,KAAK,KAA4B,EAAE,MAAM,IACxD;AAAA,UAEJ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,aAAa;AAAA,UACb,SAAS;AAAA,UACT,MAAM,KAAK;AAAA;AAAA,QAhBN,KAAK;AAAA,MAiBX,CACA;AAAA;AAAA,EACF;AAEF;AAGO,MAAM,eAAe,MAAM,KAAK,aAAa;",
  "names": ["handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
}