tldraw/dist-esm/lib/ui/components/primitives/TldrawUiSelect.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSelect.tsx"],
  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { Select as _Select } from 'radix-ui'\nimport * as React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/* --------------------- Root --------------------- */\n\n/** @public */\nexport interface TLUiSelectProps {\n\tid: string\n\tvalue: string\n\tonValueChange(value: string): void\n\tonOpenChange?(isOpen: boolean): void\n\tdisabled?: boolean\n\tclassName?: string\n\tchildren: React.ReactNode\n\t'data-testid'?: string\n\t'aria-label'?: string\n}\n\n/**\n * A select dropdown component.\n *\n * @example\n * ```tsx\n * <TldrawUiSelect id=\"my-select\" value={value} onValueChange={setValue}>\n *   <TldrawUiSelectTrigger>\n *     <TldrawUiSelectValue placeholder=\"Select...\" />\n *   </TldrawUiSelectTrigger>\n *   <TldrawUiSelectContent>\n *     <TldrawUiSelectItem value=\"one\" label=\"One\" />\n *     <TldrawUiSelectItem value=\"two\" label=\"Two\" />\n *   </TldrawUiSelectContent>\n * </TldrawUiSelect>\n * ```\n *\n * @public\n * @react\n */\nexport function TldrawUiSelect({\n\tid,\n\tvalue,\n\tonValueChange,\n\tonOpenChange,\n\tdisabled,\n\tclassName,\n\tchildren,\n\t'data-testid': dataTestId,\n\t'aria-label': ariaLabel,\n}: TLUiSelectProps) {\n\tconst [open, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Select.Root\n\t\t\tvalue={value}\n\t\t\tonValueChange={onValueChange}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\topen={open}\n\t\t\tdisabled={disabled}\n\t\t\tdir=\"ltr\"\n\t\t>\n\t\t\t<div\n\t\t\t\tid={id}\n\t\t\t\tclassName={classNames('tlui-select', className)}\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</_Select.Root>\n\t)\n}\n\n/* --------------------- Trigger --------------------- */\n\n/** @public */\nexport interface TLUiSelectTriggerProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\n/**\n * The trigger button for the select dropdown.\n *\n * @public\n * @react\n */\nexport const TldrawUiSelectTrigger = React.forwardRef<HTMLButtonElement, TLUiSelectTriggerProps>(\n\tfunction TldrawUiSelectTrigger({ children, className }, ref) {\n\t\treturn (\n\t\t\t<_Select.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames('tlui-button tlui-select__trigger', className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<_Select.Icon className=\"tlui-select__chevron\">\n\t\t\t\t\t<TldrawUiIcon icon=\"chevron-down\" label=\"\" small />\n\t\t\t\t</_Select.Icon>\n\t\t\t</_Select.Trigger>\n\t\t)\n\t}\n)\n\n/* --------------------- Value --------------------- */\n\n/** @public */\nexport interface TLUiSelectValueProps {\n\tplaceholder?: string\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tchildren?: React.ReactNode\n}\n\n/**\n * Displays the currently selected value in the trigger.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectValue({ placeholder, icon, children }: TLUiSelectValueProps) {\n\treturn (\n\t\t<_Select.Value placeholder={placeholder}>\n\t\t\t<span className=\"tlui-select__value\">\n\t\t\t\t{icon && <TldrawUiIcon icon={icon} label=\"\" small />}\n\t\t\t\t<span className=\"tlui-button__label\">{children}</span>\n\t\t\t</span>\n\t\t</_Select.Value>\n\t)\n}\n\n/* --------------------- Content --------------------- */\n\n/** @public */\nexport interface TLUiSelectContentProps {\n\tchildren: React.ReactNode\n\tside?: 'top' | 'bottom'\n\talign?: 'start' | 'center' | 'end'\n\tclassName?: string\n}\n\n/**\n * The dropdown content container for select items.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectContent({\n\tchildren,\n\tside = 'bottom',\n\talign = 'start',\n\tclassName,\n}: TLUiSelectContentProps) {\n\tconst container = useContainer()\n\n\treturn (\n\t\t<_Select.Portal container={container}>\n\t\t\t<_Select.Content\n\t\t\t\tclassName={classNames('tlui-menu tlui-select__content', className)}\n\t\t\t\tposition=\"popper\"\n\t\t\t\tside={side}\n\t\t\t\talign={align}\n\t\t\t\tsideOffset={4}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t<_Select.Viewport className=\"tlui-select__viewport\">{children}</_Select.Viewport>\n\t\t\t</_Select.Content>\n\t\t</_Select.Portal>\n\t)\n}\n\n/* --------------------- Item --------------------- */\n\n/** @public */\nexport interface TLUiSelectItemProps {\n\tvalue: string\n\tlabel: string\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tdisabled?: boolean\n\tclassName?: string\n}\n\n/**\n * An item in the select dropdown. Styled to match TldrawUiMenuCheckboxItem.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectItem({\n\tvalue,\n\tlabel,\n\ticon,\n\tdisabled,\n\tclassName,\n}: TLUiSelectItemProps) {\n\treturn (\n\t\t<_Select.Item\n\t\t\tvalue={value}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={classNames(\n\t\t\t\t'tlui-button tlui-button__menu tlui-button__checkbox tlui-select__item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<TldrawUiIcon small icon=\"check\" label=\"\" className=\"tlui-select__item-indicator\" />\n\t\t\t{icon && <TldrawUiIcon icon={icon} label=\"\" small />}\n\t\t\t<_Select.ItemText className=\"tlui-button__label\">{label}</_Select.ItemText>\n\t\t</_Select.Item>\n\t)\n}\n"],
  "mappings": "AAgEG,cA6BA,YA7BA;AAhEH,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAClC,YAAY,WAAW;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAoCtB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AACf,GAAoB;AACnB,QAAM,CAAC,MAAM,gBAAgB,IAAI,cAAc,IAAI,YAAY;AAE/D,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAW,WAAW,eAAe,SAAS;AAAA,UAC9C,eAAa;AAAA,UACb,cAAY;AAAA,UAEX;AAAA;AAAA,MACF;AAAA;AAAA,EACD;AAEF;AAgBO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,SAASA,uBAAsB,EAAE,UAAU,UAAU,GAAG,KAAK;AAC5D,WACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,WAAW,WAAW,oCAAoC,SAAS;AAAA,QAElE;AAAA;AAAA,UACD,oBAAC,QAAQ,MAAR,EAAa,WAAU,wBACvB,8BAAC,gBAAa,MAAK,gBAAe,OAAM,IAAG,OAAK,MAAC,GAClD;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAiBO,SAAS,oBAAoB,EAAE,aAAa,MAAM,SAAS,GAAyB;AAC1F,SACC,oBAAC,QAAQ,OAAR,EAAc,aACd,+BAAC,UAAK,WAAU,sBACd;AAAA,YAAQ,oBAAC,gBAAa,MAAY,OAAM,IAAG,OAAK,MAAC;AAAA,IAClD,oBAAC,UAAK,WAAU,sBAAsB,UAAS;AAAA,KAChD,GACD;AAEF;AAkBO,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACD,GAA2B;AAC1B,QAAM,YAAY,aAAa;AAE/B,SACC,oBAAC,QAAQ,QAAR,EAAe,WACf;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,WAAW,WAAW,kCAAkC,SAAS;AAAA,MACjE,UAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAElB,8BAAC,QAAQ,UAAR,EAAiB,WAAU,yBAAyB,UAAS;AAAA;AAAA,EAC/D,GACD;AAEF;AAmBO,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,4BAAC,gBAAa,OAAK,MAAC,MAAK,SAAQ,OAAM,IAAG,WAAU,+BAA8B;AAAA,QACjF,QAAQ,oBAAC,gBAAa,MAAY,OAAM,IAAG,OAAK,MAAC;AAAA,QAClD,oBAAC,QAAQ,UAAR,EAAiB,WAAU,sBAAsB,iBAAM;AAAA;AAAA;AAAA,EACzD;AAEF;",
  "names": ["TldrawUiSelectTrigger"]
}