tldraw 4.1.0-next.b9999db71010 → 4.1.0-next.c6278e85ba60
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 +11 -2
- package/dist-cjs/index.js +4 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +63 -55
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +54 -47
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js +62 -55
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js +12 -5
- 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 +11 -2
- package/dist-esm/index.mjs +10 -4
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +68 -57
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +54 -47
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +3 -3
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs +63 -56
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs +12 -5
- 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 +3 -0
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +60 -49
- package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx +70 -53
- package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx +105 -90
- package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +72 -51
- package/src/lib/ui/version.ts +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tlmenus, useEditor } from "@tldraw/editor";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
|
|
@@ -11,10 +11,16 @@ import {
|
|
|
11
11
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
|
|
12
12
|
import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
|
|
13
13
|
import { useStylePanelContext } from "./StylePanelContext.mjs";
|
|
14
|
-
function
|
|
14
|
+
function StylePanelDoubleDropdownPickerInner(props) {
|
|
15
|
+
const msg = useTranslation();
|
|
16
|
+
return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__double-select-picker", children: [
|
|
17
|
+
/* @__PURE__ */ jsx("div", { title: msg(props.label), className: "tlui-style-panel__double-select-picker-label", children: msg(props.label) }),
|
|
18
|
+
/* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg(props.label), children: /* @__PURE__ */ jsx(StylePanelDoubleDropdownPickerInline, { ...props }) })
|
|
19
|
+
] });
|
|
20
|
+
}
|
|
21
|
+
function StylePanelDoubleDropdownPickerInlineInner(props) {
|
|
15
22
|
const ctx = useStylePanelContext();
|
|
16
23
|
const {
|
|
17
|
-
label,
|
|
18
24
|
uiTypeA,
|
|
19
25
|
uiTypeB,
|
|
20
26
|
labelA,
|
|
@@ -42,70 +48,71 @@ function DoubleDropdownPickerInner(props) {
|
|
|
42
48
|
if (valueA === void 0 && valueB === void 0) return null;
|
|
43
49
|
const idA = `style panel ${uiTypeA} A`;
|
|
44
50
|
const idB = `style panel ${uiTypeB} B`;
|
|
45
|
-
return /* @__PURE__ */ jsxs(
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
+
/* @__PURE__ */ jsxs(TldrawUiPopover, { id: idA, open: isOpenA, onOpenChange: setIsOpenA, children: [
|
|
53
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
|
|
54
|
+
TldrawUiToolbarButton,
|
|
55
|
+
{
|
|
56
|
+
type: "icon",
|
|
57
|
+
"data-testid": `style.${uiTypeA}`,
|
|
58
|
+
title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
|
|
59
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconA, small: true, invertIcon: true })
|
|
60
|
+
}
|
|
61
|
+
) }),
|
|
62
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
63
|
+
return /* @__PURE__ */ jsx(
|
|
50
64
|
TldrawUiToolbarButton,
|
|
51
65
|
{
|
|
66
|
+
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
52
67
|
type: "icon",
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
) }),
|
|
58
|
-
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 80, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelA), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsA.map((item) => {
|
|
59
|
-
return /* @__PURE__ */ jsx(
|
|
60
|
-
TldrawUiToolbarButton,
|
|
61
|
-
{
|
|
62
|
-
"data-testid": `style.${uiTypeA}.${item.value}`,
|
|
63
|
-
type: "icon",
|
|
64
|
-
onClick: () => {
|
|
65
|
-
onValueChange(styleA, item.value);
|
|
66
|
-
tlmenus.deleteOpenMenu(idA, editor.contextId);
|
|
67
|
-
setIsOpenA(false);
|
|
68
|
-
},
|
|
69
|
-
title: `${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`,
|
|
70
|
-
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon, invertIcon: true })
|
|
68
|
+
onClick: () => {
|
|
69
|
+
onValueChange(styleA, item.value);
|
|
70
|
+
tlmenus.deleteOpenMenu(idA, editor.contextId);
|
|
71
|
+
setIsOpenA(false);
|
|
71
72
|
},
|
|
72
|
-
item.value
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
title: `${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`,
|
|
74
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon, invertIcon: true })
|
|
75
|
+
},
|
|
76
|
+
item.value
|
|
77
|
+
);
|
|
78
|
+
}) }) }) })
|
|
79
|
+
] }),
|
|
80
|
+
/* @__PURE__ */ jsxs(TldrawUiPopover, { id: idB, open: isOpenB, onOpenChange: setIsOpenB, children: [
|
|
81
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
|
|
82
|
+
TldrawUiToolbarButton,
|
|
83
|
+
{
|
|
84
|
+
type: "icon",
|
|
85
|
+
"data-testid": `style.${uiTypeB}`,
|
|
86
|
+
title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
|
|
87
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: iconB, small: true })
|
|
88
|
+
}
|
|
89
|
+
) }),
|
|
90
|
+
/* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", sideOffset: 116, alignOffset: 0, children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: msg(labelB), children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: itemsB.map((item) => {
|
|
91
|
+
return /* @__PURE__ */ jsx(
|
|
78
92
|
TldrawUiToolbarButton,
|
|
79
93
|
{
|
|
80
94
|
type: "icon",
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
return /* @__PURE__ */ jsx(
|
|
88
|
-
TldrawUiToolbarButton,
|
|
89
|
-
{
|
|
90
|
-
type: "icon",
|
|
91
|
-
title: `${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}`)}`,
|
|
92
|
-
"data-testid": `style.${uiTypeB}.${item.value}`,
|
|
93
|
-
onClick: () => {
|
|
94
|
-
onValueChange(styleB, item.value);
|
|
95
|
-
tlmenus.deleteOpenMenu(idB, editor.contextId);
|
|
96
|
-
setIsOpenB(false);
|
|
97
|
-
},
|
|
98
|
-
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
|
|
95
|
+
title: `${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}`)}`,
|
|
96
|
+
"data-testid": `style.${uiTypeB}.${item.value}`,
|
|
97
|
+
onClick: () => {
|
|
98
|
+
onValueChange(styleB, item.value);
|
|
99
|
+
tlmenus.deleteOpenMenu(idB, editor.contextId);
|
|
100
|
+
setIsOpenB(false);
|
|
99
101
|
},
|
|
100
|
-
item.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
|
|
103
|
+
},
|
|
104
|
+
item.value
|
|
105
|
+
);
|
|
106
|
+
}) }) }) })
|
|
104
107
|
] })
|
|
105
108
|
] });
|
|
106
109
|
}
|
|
107
|
-
const StylePanelDoubleDropdownPicker = React.memo(
|
|
110
|
+
const StylePanelDoubleDropdownPicker = React.memo(StylePanelDoubleDropdownPickerInner);
|
|
111
|
+
const StylePanelDoubleDropdownPickerInline = React.memo(
|
|
112
|
+
StylePanelDoubleDropdownPickerInlineInner
|
|
113
|
+
);
|
|
108
114
|
export {
|
|
109
|
-
StylePanelDoubleDropdownPicker
|
|
115
|
+
StylePanelDoubleDropdownPicker,
|
|
116
|
+
StylePanelDoubleDropdownPickerInline
|
|
110
117
|
};
|
|
111
118
|
//# sourceMappingURL=StylePanelDoubleDropdownPicker.mjs.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": "
|
|
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 StylePanelDoubleDropdownPickerInner<T extends string>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(props.label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(props.label)}\n\t\t\t</div>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg(props.label)}>\n\t\t\t\t<StylePanelDoubleDropdownPickerInline {...props} />\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\nfunction StylePanelDoubleDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\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<>\n\t\t\t<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\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 || valueA.type === 'mixed'\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.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconA} small invertIcon />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={80} alignOffset={0}>\n\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelA)}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{itemsA.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\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\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\ttlmenus.deleteOpenMenu(idA, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpenA(false)\n\t\t\t\t\t\t\t\t\t\t}}\n\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>\n\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</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\t<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\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 || valueB.type === 'mixed'\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.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconB} small />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={116} alignOffset={0}>\n\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelB)}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{itemsB.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\ttitle={`${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}\n\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\tonClick={() => {\n\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\ttlmenus.deleteOpenMenu(idB, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpenB(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</>\n\t)\n}\n\n// need to memo like this to get generics\n/** @public @react */\nexport const StylePanelDoubleDropdownPicker = React.memo(StylePanelDoubleDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDoubleDropdownPickerInline = React.memo(\n\tStylePanelDoubleDropdownPickerInlineInner\n) as <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,12 @@ import {
|
|
|
12
12
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
|
|
13
13
|
import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
|
|
14
14
|
import { useStylePanelContext } from "./StylePanelContext.mjs";
|
|
15
|
-
function
|
|
15
|
+
function StylePanelDropdownPickerInner(props) {
|
|
16
|
+
const msg = useTranslation();
|
|
17
|
+
const toolbarLabel = props.label ? msg(props.label) : msg(`style-panel.${props.stylePanelType}`);
|
|
18
|
+
return /* @__PURE__ */ jsx(TldrawUiToolbar, { label: toolbarLabel, children: /* @__PURE__ */ jsx(StylePanelDropdownPickerInline, { ...props }) });
|
|
19
|
+
}
|
|
20
|
+
function StylePanelDropdownPickerInlineInner(props) {
|
|
16
21
|
const ctx = useStylePanelContext();
|
|
17
22
|
const {
|
|
18
23
|
id,
|
|
@@ -36,7 +41,7 @@ function DropdownPickerInner(props) {
|
|
|
36
41
|
const titleStr = value.type === "mixed" ? msg("style-panel.mixed") : stylePanelName + " \u2014 " + msg(`${uiType}-style.${value.value}`);
|
|
37
42
|
const labelStr = label ? msg(label) : "";
|
|
38
43
|
const popoverId = `style panel ${id}`;
|
|
39
|
-
return /* @__PURE__ */
|
|
44
|
+
return /* @__PURE__ */ jsxs(
|
|
40
45
|
TldrawUiPopover,
|
|
41
46
|
{
|
|
42
47
|
id: popoverId,
|
|
@@ -78,10 +83,12 @@ function DropdownPickerInner(props) {
|
|
|
78
83
|
}) }) }) })
|
|
79
84
|
]
|
|
80
85
|
}
|
|
81
|
-
)
|
|
86
|
+
);
|
|
82
87
|
}
|
|
83
|
-
const StylePanelDropdownPicker = React.memo(
|
|
88
|
+
const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner);
|
|
89
|
+
const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner);
|
|
84
90
|
export {
|
|
85
|
-
StylePanelDropdownPicker
|
|
91
|
+
StylePanelDropdownPicker,
|
|
92
|
+
StylePanelDropdownPickerInline
|
|
86
93
|
};
|
|
87
94
|
//# sourceMappingURL=StylePanelDropdownPicker.mjs.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": "
|
|
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 StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst toolbarLabel = props.label\n\t\t? msg(props.label)\n\t\t: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)\n\treturn (\n\t\t<TldrawUiToolbar label={toolbarLabel}>\n\t\t\t<StylePanelDropdownPickerInline {...props} />\n\t\t</TldrawUiToolbar>\n\t)\n}\n\nfunction StylePanelDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) {\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<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\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}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\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\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\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\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
|
|
5
|
+
"mappings": "AAqCG,cA8CC,YA9CD;AArCH,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AAerC,SAAS,8BAAgD,OAAyC;AACjG,QAAM,MAAM,eAAe;AAC3B,QAAM,eAAe,MAAM,QACxB,IAAI,MAAM,KAAK,IACf,IAAI,eAAe,MAAM,cAAc,EAAwB;AAClE,SACC,oBAAC,mBAAgB,OAAO,cACvB,8BAAC,kCAAgC,GAAG,OAAO,GAC5C;AAEF;AAEA,SAAS,oCACR,OACC;AACD,QAAM,MAAM,qBAAqB;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,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;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;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,oBAAC,uBAAqB,oBAAS;AAAA,cAC5C,oBAAC,sBAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC,8BAAC,mBAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,8BAAC,+BAA4B,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,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,6BAA6B;AAOzE,MAAM,iCAAiC,MAAM,KAAK,mCAAmC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const version = "4.1.0-next.
|
|
1
|
+
const version = "4.1.0-next.c6278e85ba60";
|
|
2
2
|
const publishDates = {
|
|
3
3
|
major: "2025-09-18T14:39:22.803Z",
|
|
4
|
-
minor: "2025-10-
|
|
5
|
-
patch: "2025-10-
|
|
4
|
+
minor: "2025-10-15T11:04:59.149Z",
|
|
5
|
+
patch: "2025-10-15T11:04:59.149Z"
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
8
8
|
publishDates,
|
|
@@ -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.c6278e85ba60'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-15T11:04:59.149Z',\n\tpatch: '2025-10-15T11:04:59.149Z',\n}\n"],
|
|
5
5
|
"mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tldraw",
|
|
3
3
|
"description": "A tiny little drawing editor.",
|
|
4
|
-
"version": "4.1.0-next.
|
|
4
|
+
"version": "4.1.0-next.c6278e85ba60",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"@tiptap/pm": "^2.9.1",
|
|
63
63
|
"@tiptap/react": "^2.9.1",
|
|
64
64
|
"@tiptap/starter-kit": "^2.9.1",
|
|
65
|
-
"@tldraw/editor": "4.1.0-next.
|
|
66
|
-
"@tldraw/store": "4.1.0-next.
|
|
65
|
+
"@tldraw/editor": "4.1.0-next.c6278e85ba60",
|
|
66
|
+
"@tldraw/store": "4.1.0-next.c6278e85ba60",
|
|
67
67
|
"classnames": "^2.5.1",
|
|
68
68
|
"hotkeys-js": "^3.13.9",
|
|
69
69
|
"idb": "^7.1.1",
|
package/src/index.ts
CHANGED
|
@@ -464,6 +464,7 @@ export {
|
|
|
464
464
|
} from './lib/ui/components/StylePanel/DefaultStylePanelContent'
|
|
465
465
|
export {
|
|
466
466
|
StylePanelButtonPicker,
|
|
467
|
+
StylePanelButtonPickerInline,
|
|
467
468
|
type StylePanelButtonPickerProps,
|
|
468
469
|
} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
|
|
469
470
|
export {
|
|
@@ -474,10 +475,12 @@ export {
|
|
|
474
475
|
} from './lib/ui/components/StylePanel/StylePanelContext'
|
|
475
476
|
export {
|
|
476
477
|
StylePanelDoubleDropdownPicker,
|
|
478
|
+
StylePanelDoubleDropdownPickerInline,
|
|
477
479
|
type StylePanelDoubleDropdownPickerProps,
|
|
478
480
|
} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
|
|
479
481
|
export {
|
|
480
482
|
StylePanelDropdownPicker,
|
|
483
|
+
StylePanelDropdownPickerInline,
|
|
481
484
|
type StylePanelDropdownPickerProps,
|
|
482
485
|
} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
|
|
483
486
|
export {
|
|
@@ -25,10 +25,13 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
|
|
|
25
25
|
import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
|
|
26
26
|
import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
|
|
27
27
|
import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
|
|
28
|
-
import { StylePanelButtonPicker } from './StylePanelButtonPicker'
|
|
28
|
+
import { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'
|
|
29
29
|
import { useStylePanelContext } from './StylePanelContext'
|
|
30
30
|
import { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'
|
|
31
|
-
import {
|
|
31
|
+
import {
|
|
32
|
+
StylePanelDropdownPicker,
|
|
33
|
+
StylePanelDropdownPickerInline,
|
|
34
|
+
} from './StylePanelDropdownPicker'
|
|
32
35
|
import { StylePanelSubheading } from './StylePanelSubheading'
|
|
33
36
|
|
|
34
37
|
/** @public @react */
|
|
@@ -225,70 +228,78 @@ export function StylePanelFontPicker() {
|
|
|
225
228
|
|
|
226
229
|
/** @public @react */
|
|
227
230
|
export function StylePanelTextAlignPicker() {
|
|
228
|
-
const { styles } = useStylePanelContext()
|
|
231
|
+
const { styles, enhancedA11yMode } = useStylePanelContext()
|
|
229
232
|
const msg = useTranslation()
|
|
230
233
|
const textAlign = styles.get(DefaultTextAlignStyle)
|
|
231
234
|
if (textAlign === undefined) return null
|
|
235
|
+
const title = msg('style-panel.align')
|
|
232
236
|
|
|
233
237
|
return (
|
|
234
|
-
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
238
|
+
<>
|
|
239
|
+
{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
|
|
240
|
+
<TldrawUiToolbar orientation="horizontal" label={title}>
|
|
241
|
+
<StylePanelButtonPickerInline
|
|
242
|
+
title={title}
|
|
243
|
+
uiType="align"
|
|
244
|
+
style={DefaultTextAlignStyle}
|
|
245
|
+
items={STYLES.textAlign}
|
|
246
|
+
value={textAlign}
|
|
247
|
+
/>
|
|
248
|
+
<TldrawUiToolbarButton
|
|
249
|
+
type="icon"
|
|
250
|
+
title={msg('style-panel.vertical-align')}
|
|
251
|
+
data-testid="vertical-align"
|
|
252
|
+
disabled
|
|
253
|
+
>
|
|
254
|
+
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
255
|
+
</TldrawUiToolbarButton>
|
|
256
|
+
</TldrawUiToolbar>
|
|
257
|
+
</>
|
|
251
258
|
)
|
|
252
259
|
}
|
|
253
260
|
|
|
254
261
|
/** @public @react */
|
|
255
262
|
export function StylePanelLabelAlignPicker() {
|
|
256
|
-
const { styles } = useStylePanelContext()
|
|
263
|
+
const { styles, enhancedA11yMode } = useStylePanelContext()
|
|
257
264
|
const msg = useTranslation()
|
|
258
265
|
const labelAlign = styles.get(DefaultHorizontalAlignStyle)
|
|
259
266
|
const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)
|
|
260
267
|
if (labelAlign === undefined) return null
|
|
268
|
+
const title = msg('style-panel.label-align')
|
|
261
269
|
|
|
262
270
|
return (
|
|
263
|
-
|
|
264
|
-
<
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
<TldrawUiToolbarButton
|
|
273
|
-
type="icon"
|
|
274
|
-
title={msg('style-panel.vertical-align')}
|
|
275
|
-
data-testid="vertical-align"
|
|
276
|
-
disabled
|
|
277
|
-
>
|
|
278
|
-
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
279
|
-
</TldrawUiToolbarButton>
|
|
280
|
-
) : (
|
|
281
|
-
<StylePanelDropdownPicker
|
|
282
|
-
type="icon"
|
|
283
|
-
id="geo-vertical-alignment"
|
|
284
|
-
uiType="verticalAlign"
|
|
285
|
-
stylePanelType="vertical-align"
|
|
286
|
-
style={DefaultVerticalAlignStyle}
|
|
287
|
-
items={STYLES.verticalAlign}
|
|
288
|
-
value={verticalLabelAlign}
|
|
271
|
+
<>
|
|
272
|
+
{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
|
|
273
|
+
<TldrawUiToolbar orientation="horizontal" label={title}>
|
|
274
|
+
<StylePanelButtonPickerInline
|
|
275
|
+
title={title}
|
|
276
|
+
uiType="align"
|
|
277
|
+
style={DefaultHorizontalAlignStyle}
|
|
278
|
+
items={STYLES.horizontalAlign}
|
|
279
|
+
value={labelAlign}
|
|
289
280
|
/>
|
|
290
|
-
|
|
291
|
-
|
|
281
|
+
{verticalLabelAlign === undefined ? (
|
|
282
|
+
<TldrawUiToolbarButton
|
|
283
|
+
type="icon"
|
|
284
|
+
title={msg('style-panel.vertical-align')}
|
|
285
|
+
data-testid="vertical-align"
|
|
286
|
+
disabled
|
|
287
|
+
>
|
|
288
|
+
<TldrawUiButtonIcon icon="vertical-align-middle" />
|
|
289
|
+
</TldrawUiToolbarButton>
|
|
290
|
+
) : (
|
|
291
|
+
<StylePanelDropdownPickerInline
|
|
292
|
+
type="icon"
|
|
293
|
+
id="geo-vertical-alignment"
|
|
294
|
+
uiType="verticalAlign"
|
|
295
|
+
stylePanelType="vertical-align"
|
|
296
|
+
style={DefaultVerticalAlignStyle}
|
|
297
|
+
items={STYLES.verticalAlign}
|
|
298
|
+
value={verticalLabelAlign}
|
|
299
|
+
/>
|
|
300
|
+
)}
|
|
301
|
+
</TldrawUiToolbar>
|
|
302
|
+
</>
|
|
292
303
|
)
|
|
293
304
|
}
|
|
294
305
|
|