tldraw 4.1.0-next.58b63dd1ac80 → 4.1.0-next.74327a60f18a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +2 -11
- package/dist-cjs/index.js +1 -4
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +55 -63
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +47 -54
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js +55 -62
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js +5 -12
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +2 -11
- package/dist-esm/index.mjs +4 -10
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +57 -68
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +47 -54
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +3 -3
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs +56 -63
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs +5 -12
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +0 -3
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +49 -60
- package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx +53 -70
- package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx +90 -105
- package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +51 -72
- package/src/lib/ui/version.ts +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
|
|
4
|
+
"sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\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\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\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)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (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\tonValueChange(style, id as T)\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}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst isActive = value.type === 'shared' && value.value === item.value\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}\n\t\t\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div>{label}</div>\n\t\t\t\t\t\t\t\t\t\t\t{isActive ? <div>({msg('style-panel.selected')})</div> : null}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={isActive}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["StylePanelButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
|
|
7
7
|
}
|
|
@@ -28,8 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var StylePanelDoubleDropdownPicker_exports = {};
|
|
30
30
|
__export(StylePanelDoubleDropdownPicker_exports, {
|
|
31
|
-
StylePanelDoubleDropdownPicker: () => StylePanelDoubleDropdownPicker
|
|
32
|
-
StylePanelDoubleDropdownPickerInline: () => StylePanelDoubleDropdownPickerInline
|
|
31
|
+
StylePanelDoubleDropdownPicker: () => StylePanelDoubleDropdownPicker
|
|
33
32
|
});
|
|
34
33
|
module.exports = __toCommonJS(StylePanelDoubleDropdownPicker_exports);
|
|
35
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -41,16 +40,10 @@ var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
|
|
|
41
40
|
var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
|
|
42
41
|
var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
|
|
43
42
|
var import_StylePanelContext = require("./StylePanelContext");
|
|
44
|
-
function
|
|
45
|
-
const msg = (0, import_useTranslation.useTranslation)();
|
|
46
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__double-select-picker", children: [
|
|
47
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { title: msg(props.label), className: "tlui-style-panel__double-select-picker-label", children: msg(props.label) }),
|
|
48
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg(props.label), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelDoubleDropdownPickerInline, { ...props }) })
|
|
49
|
-
] });
|
|
50
|
-
}
|
|
51
|
-
function StylePanelDoubleDropdownPickerInlineInner(props) {
|
|
43
|
+
function DoubleDropdownPickerInner(props) {
|
|
52
44
|
const ctx = (0, import_StylePanelContext.useStylePanelContext)();
|
|
53
45
|
const {
|
|
46
|
+
label,
|
|
54
47
|
uiTypeA,
|
|
55
48
|
uiTypeB,
|
|
56
49
|
labelA,
|
|
@@ -78,67 +71,67 @@ function StylePanelDoubleDropdownPickerInlineInner(props) {
|
|
|
78
71
|
if (valueA === void 0 && valueB === void 0) return null;
|
|
79
72
|
const idA = `style panel ${uiTypeA} A`;
|
|
80
73
|
const idB = `style panel ${uiTypeB} B`;
|
|
81
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
82
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
{
|
|
86
|
-
type: "icon",
|
|
87
|
-
"data-testid": `style.${uiTypeA}`,
|
|
88
|
-
title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
|
|
89
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: iconA, small: true, invertIcon: true })
|
|
90
|
-
}
|
|
91
|
-
) }),
|
|
92
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
93
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__double-select-picker", children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { title: msg(label), className: "tlui-style-panel__double-select-picker-label", children: msg(label) }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg(label), children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiPopover.TldrawUiPopover, { id: idA, open: isOpenA, onOpenChange: setIsOpenA, children: [
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
79
|
import_TldrawUiToolbar.TldrawUiToolbarButton,
|
|
95
80
|
{
|
|
96
|
-
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
97
81
|
type: "icon",
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
"data-testid": `style.${uiTypeA}`,
|
|
83
|
+
title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
|
|
84
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: iconA, small: true, invertIcon: true })
|
|
85
|
+
}
|
|
86
|
+
) }),
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
import_TldrawUiToolbar.TldrawUiToolbarButton,
|
|
90
|
+
{
|
|
91
|
+
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
92
|
+
type: "icon",
|
|
93
|
+
onClick: () => {
|
|
94
|
+
onValueChange(styleA, item.value);
|
|
95
|
+
import_editor.tlmenus.deleteOpenMenu(idA, editor.contextId);
|
|
96
|
+
setIsOpenA(false);
|
|
97
|
+
},
|
|
98
|
+
title: `${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`,
|
|
99
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon, invertIcon: true })
|
|
102
100
|
},
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
] }),
|
|
110
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiPopover.TldrawUiPopover, { id: idB, open: isOpenB, onOpenChange: setIsOpenB, children: [
|
|
111
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
-
import_TldrawUiToolbar.TldrawUiToolbarButton,
|
|
113
|
-
{
|
|
114
|
-
type: "icon",
|
|
115
|
-
"data-testid": `style.${uiTypeB}`,
|
|
116
|
-
title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
|
|
117
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: iconB, small: true })
|
|
118
|
-
}
|
|
119
|
-
) }),
|
|
120
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 116, alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: msg(labelB), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsB.map((item) => {
|
|
121
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
|
+
item.value
|
|
102
|
+
);
|
|
103
|
+
}) }) }) })
|
|
104
|
+
] }),
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiPopover.TldrawUiPopover, { id: idB, open: isOpenB, onOpenChange: setIsOpenB, children: [
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
122
107
|
import_TldrawUiToolbar.TldrawUiToolbarButton,
|
|
123
108
|
{
|
|
124
109
|
type: "icon",
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
110
|
+
"data-testid": `style.${uiTypeB}`,
|
|
111
|
+
title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
|
|
112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: iconB, small: true })
|
|
113
|
+
}
|
|
114
|
+
) }),
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 116, alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: msg(labelB), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsB.map((item) => {
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
import_TldrawUiToolbar.TldrawUiToolbarButton,
|
|
118
|
+
{
|
|
119
|
+
type: "icon",
|
|
120
|
+
title: `${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}`)}`,
|
|
121
|
+
"data-testid": `style.${uiTypeB}.${item.value}`,
|
|
122
|
+
onClick: () => {
|
|
123
|
+
onValueChange(styleB, item.value);
|
|
124
|
+
import_editor.tlmenus.deleteOpenMenu(idB, editor.contextId);
|
|
125
|
+
setIsOpenB(false);
|
|
126
|
+
},
|
|
127
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
|
|
131
128
|
},
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}) }) }) })
|
|
129
|
+
item.value
|
|
130
|
+
);
|
|
131
|
+
}) }) }) })
|
|
132
|
+
] })
|
|
137
133
|
] })
|
|
138
134
|
] });
|
|
139
135
|
}
|
|
140
|
-
const StylePanelDoubleDropdownPicker = React.memo(
|
|
141
|
-
const StylePanelDoubleDropdownPickerInline = React.memo(
|
|
142
|
-
StylePanelDoubleDropdownPickerInlineInner
|
|
143
|
-
);
|
|
136
|
+
const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner);
|
|
144
137
|
//# sourceMappingURL=StylePanelDoubleDropdownPicker.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, 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): void\n}\n\nfunction
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, 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): void\n}\n\nfunction DoubleDropdownPickerInner<T extends string>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tlabel,\n\t\tuiTypeA,\n\t\tuiTypeB,\n\t\tlabelA,\n\t\tlabelB,\n\t\titemsA,\n\t\titemsB,\n\t\tstyleA,\n\t\tstyleB,\n\t\tvalueA,\n\t\tvalueB,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst [isOpenA, setIsOpenA] = React.useState(false)\n\tconst [isOpenB, setIsOpenB] = React.useState(false)\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\tconst idA = `style panel ${uiTypeA} A`\n\tconst idB = `style panel ${uiTypeB} B`\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<TldrawUiToolbar orientation=\"horizontal\" label={msg(label)}>\n\t\t\t\t<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconA} small invertIcon />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={80} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelA)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleA, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idA, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenA(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} invertIcon />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t\t<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconB} small />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={116} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelB)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleB, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idB, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenB(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// need to memo like this to get generics\n/** @public @react */\nexport const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,8 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var StylePanelDropdownPicker_exports = {};
|
|
30
30
|
__export(StylePanelDropdownPicker_exports, {
|
|
31
|
-
StylePanelDropdownPicker: () => StylePanelDropdownPicker
|
|
32
|
-
StylePanelDropdownPickerInline: () => StylePanelDropdownPickerInline
|
|
31
|
+
StylePanelDropdownPicker: () => StylePanelDropdownPicker
|
|
33
32
|
});
|
|
34
33
|
module.exports = __toCommonJS(StylePanelDropdownPicker_exports);
|
|
35
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -42,12 +41,7 @@ var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
|
|
|
42
41
|
var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
|
|
43
42
|
var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
|
|
44
43
|
var import_StylePanelContext = require("./StylePanelContext");
|
|
45
|
-
function
|
|
46
|
-
const msg = (0, import_useTranslation.useTranslation)();
|
|
47
|
-
const toolbarLabel = props.label ? msg(props.label) : msg(`style-panel.${props.stylePanelType}`);
|
|
48
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: toolbarLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelDropdownPickerInline, { ...props }) });
|
|
49
|
-
}
|
|
50
|
-
function StylePanelDropdownPickerInlineInner(props) {
|
|
44
|
+
function DropdownPickerInner(props) {
|
|
51
45
|
const ctx = (0, import_StylePanelContext.useStylePanelContext)();
|
|
52
46
|
const {
|
|
53
47
|
id,
|
|
@@ -71,7 +65,7 @@ function StylePanelDropdownPickerInlineInner(props) {
|
|
|
71
65
|
const titleStr = value.type === "mixed" ? msg("style-panel.mixed") : stylePanelName + " \u2014 " + msg(`${uiType}-style.${value.value}`);
|
|
72
66
|
const labelStr = label ? msg(label) : "";
|
|
73
67
|
const popoverId = `style panel ${id}`;
|
|
74
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: stylePanelName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
75
69
|
import_TldrawUiPopover.TldrawUiPopover,
|
|
76
70
|
{
|
|
77
71
|
id: popoverId,
|
|
@@ -113,8 +107,7 @@ function StylePanelDropdownPickerInlineInner(props) {
|
|
|
113
107
|
}) }) }) })
|
|
114
108
|
]
|
|
115
109
|
}
|
|
116
|
-
);
|
|
110
|
+
) });
|
|
117
111
|
}
|
|
118
|
-
const StylePanelDropdownPicker = React.memo(
|
|
119
|
-
const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner);
|
|
112
|
+
const StylePanelDropdownPicker = React.memo(DropdownPickerInner);
|
|
120
113
|
//# sourceMappingURL=StylePanelDropdownPicker.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\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\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiToolbar label={stylePanelName}>\n\t\t\t<TldrawUiPopover\n\t\t\t\tid={popoverId}\n\t\t\t\topen={isOpen}\n\t\t\t\tonOpenChange={setIsOpen}\n\t\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t\t>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t</TldrawUiPopover>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEK;AAtEL,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,+BAAqC;AAerC,SAAS,oBAAsC,OAAyC;AACvF,QAAM,UAAM,+CAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,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,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC,4CAAC,0CAAgB,OAAO,gBACvB;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,mBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,10 +22,10 @@ __export(version_exports, {
|
|
|
22
22
|
version: () => version
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(version_exports);
|
|
25
|
-
const version = "4.1.0-next.
|
|
25
|
+
const version = "4.1.0-next.74327a60f18a";
|
|
26
26
|
const publishDates = {
|
|
27
27
|
major: "2025-09-18T14:39:22.803Z",
|
|
28
|
-
minor: "2025-10-
|
|
29
|
-
patch: "2025-10-
|
|
28
|
+
minor: "2025-10-15T10:52:21.047Z",
|
|
29
|
+
patch: "2025-10-15T10:52:21.047Z"
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=version.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/ui/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.74327a60f18a'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-15T10:52:21.047Z',\n\tpatch: '2025-10-15T10:52:21.047Z',\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.d.mts
CHANGED
|
@@ -2678,11 +2678,8 @@ export declare function StylePanelArrowheadPicker(): JSX_2.Element | null;
|
|
|
2678
2678
|
/** @public @react */
|
|
2679
2679
|
export declare function StylePanelArrowKindPicker(): JSX_2.Element | null;
|
|
2680
2680
|
|
|
2681
|
-
/** @public
|
|
2682
|
-
export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) =>
|
|
2683
|
-
|
|
2684
|
-
/** @public @react*/
|
|
2685
|
-
export declare const StylePanelButtonPickerInline: <T extends string>(props: StylePanelButtonPickerProps<T>) => React.JSX.Element;
|
|
2681
|
+
/** @public */
|
|
2682
|
+
export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement;
|
|
2686
2683
|
|
|
2687
2684
|
/** @public */
|
|
2688
2685
|
export declare interface StylePanelButtonPickerProps<T extends string> {
|
|
@@ -2721,9 +2718,6 @@ export declare function StylePanelDashPicker(): JSX_2.Element | null;
|
|
|
2721
2718
|
/** @public @react */
|
|
2722
2719
|
export declare const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
2723
2720
|
|
|
2724
|
-
/** @public @react */
|
|
2725
|
-
export declare const StylePanelDoubleDropdownPickerInline: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
2726
|
-
|
|
2727
2721
|
/** @public */
|
|
2728
2722
|
export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
|
|
2729
2723
|
uiTypeA: string;
|
|
@@ -2743,9 +2737,6 @@ export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
|
|
|
2743
2737
|
/** @public @react */
|
|
2744
2738
|
export declare const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
2745
2739
|
|
|
2746
|
-
/** @public @react */
|
|
2747
|
-
export declare const StylePanelDropdownPickerInline: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
2748
|
-
|
|
2749
2740
|
/** @public */
|
|
2750
2741
|
export declare interface StylePanelDropdownPickerProps<T extends string> {
|
|
2751
2742
|
id: string;
|
package/dist-esm/index.mjs
CHANGED
|
@@ -347,20 +347,17 @@ import {
|
|
|
347
347
|
StylePanelTextAlignPicker
|
|
348
348
|
} from "./lib/ui/components/StylePanel/DefaultStylePanelContent.mjs";
|
|
349
349
|
import {
|
|
350
|
-
StylePanelButtonPicker
|
|
351
|
-
StylePanelButtonPickerInline
|
|
350
|
+
StylePanelButtonPicker
|
|
352
351
|
} from "./lib/ui/components/StylePanel/StylePanelButtonPicker.mjs";
|
|
353
352
|
import {
|
|
354
353
|
StylePanelContextProvider,
|
|
355
354
|
useStylePanelContext
|
|
356
355
|
} from "./lib/ui/components/StylePanel/StylePanelContext.mjs";
|
|
357
356
|
import {
|
|
358
|
-
StylePanelDoubleDropdownPicker
|
|
359
|
-
StylePanelDoubleDropdownPickerInline
|
|
357
|
+
StylePanelDoubleDropdownPicker
|
|
360
358
|
} from "./lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs";
|
|
361
359
|
import {
|
|
362
|
-
StylePanelDropdownPicker
|
|
363
|
-
StylePanelDropdownPickerInline
|
|
360
|
+
StylePanelDropdownPicker
|
|
364
361
|
} from "./lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs";
|
|
365
362
|
import {
|
|
366
363
|
StylePanelSubheading
|
|
@@ -532,7 +529,7 @@ import {
|
|
|
532
529
|
} from "./lib/utils/tldr/file.mjs";
|
|
533
530
|
registerTldrawLibraryVersion(
|
|
534
531
|
"tldraw",
|
|
535
|
-
"4.1.0-next.
|
|
532
|
+
"4.1.0-next.74327a60f18a",
|
|
536
533
|
"esm"
|
|
537
534
|
);
|
|
538
535
|
export {
|
|
@@ -695,14 +692,11 @@ export {
|
|
|
695
692
|
StylePanelArrowKindPicker,
|
|
696
693
|
StylePanelArrowheadPicker,
|
|
697
694
|
StylePanelButtonPicker,
|
|
698
|
-
StylePanelButtonPickerInline,
|
|
699
695
|
StylePanelColorPicker,
|
|
700
696
|
StylePanelContextProvider,
|
|
701
697
|
StylePanelDashPicker,
|
|
702
698
|
StylePanelDoubleDropdownPicker,
|
|
703
|
-
StylePanelDoubleDropdownPickerInline,
|
|
704
699
|
StylePanelDropdownPicker,
|
|
705
|
-
StylePanelDropdownPickerInline,
|
|
706
700
|
StylePanelFillPicker,
|
|
707
701
|
StylePanelFontPicker,
|
|
708
702
|
StylePanelGeoShapePicker,
|