@elementor/editor-variables 0.3.2 → 0.4.0

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/index.js +198 -107
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +184 -93
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +4 -4
  7. package/src/components/{variables-selection.tsx → color-variables-selection.tsx} +6 -14
  8. package/src/components/font-variables-selection.tsx +70 -0
  9. package/src/components/styled-menu-item.tsx +10 -0
  10. package/src/components/variables-selection-popover.tsx +9 -4
  11. package/src/controls/{variables-selection-control.tsx → color-variables-selection-control.tsx} +10 -5
  12. package/src/controls/font-variables-selection-control.tsx +28 -0
  13. package/src/hooks/use-prop-color-variable-action.tsx +20 -0
  14. package/src/hooks/use-prop-font-variable-action.tsx +20 -0
  15. package/src/hooks/use-prop-variables.ts +11 -55
  16. package/src/init-color-variables.ts +24 -0
  17. package/src/init-font-variables.ts +24 -0
  18. package/src/init.ts +4 -20
  19. package/src/prop-types/font-variable-prop-type.ts +4 -0
  20. package/src/utils.ts +11 -2
  21. package/src/hooks/use-prop-variable-action.tsx +0 -20
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @elementor/editor-variables
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d4e7d79: Add font variables
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [ebcf7cc]
12
+ - Updated dependencies [71d9ffe]
13
+ - Updated dependencies [4a2569f]
14
+ - Updated dependencies [810db8d]
15
+ - Updated dependencies [9f16dcb]
16
+ - Updated dependencies [b150c2b]
17
+ - Updated dependencies [9a098c5]
18
+ - @elementor/editor-controls@0.29.0
19
+ - @elementor/editor-editing-panel@1.34.0
20
+ - @elementor/editor-canvas@0.21.1
21
+
3
22
  ## 0.3.2
4
23
 
5
24
  ### Patch Changes
package/dist/index.js CHANGED
@@ -34,117 +34,84 @@ __export(index_exports, {
34
34
  });
35
35
  module.exports = __toCommonJS(index_exports);
36
36
 
37
- // src/init.ts
37
+ // src/init-color-variables.ts
38
38
  var import_editor_canvas2 = require("@elementor/editor-canvas");
39
39
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
40
40
 
41
- // src/controls/variables-selection-control.tsx
41
+ // src/controls/color-variables-selection-control.tsx
42
42
  var React3 = __toESM(require("react"));
43
43
  var import_editor_controls2 = require("@elementor/editor-controls");
44
44
 
45
- // src/components/variables-selection.tsx
45
+ // src/components/color-indicator.tsx
46
+ var import_ui = require("@elementor/ui");
47
+ var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
48
+ borderRadius: `${theme.shape.borderRadius / 2}px`
49
+ }));
50
+
51
+ // src/components/color-variables-selection.tsx
46
52
  var React = __toESM(require("react"));
47
53
  var import_react2 = require("react");
48
54
  var import_editor_controls = require("@elementor/editor-controls");
49
55
  var import_icons = require("@elementor/icons");
50
- var import_ui2 = require("@elementor/ui");
56
+ var import_ui3 = require("@elementor/ui");
51
57
 
52
58
  // src/hooks/use-prop-variables.ts
53
59
  var import_react = require("react");
54
- var usePropVariables = () => {
55
- return (0, import_react.useMemo)(() => getVariables(), []);
60
+ var usePropVariables = (propTypeKey) => {
61
+ return (0, import_react.useMemo)(() => normalizeVariables(propTypeKey), [propTypeKey]);
56
62
  };
57
- var useVariable = (key) => {
58
- if (!variables[key]) {
63
+ var useVariable = (propTypeKey, key) => {
64
+ if (!variables[propTypeKey][key]) {
59
65
  return null;
60
66
  }
61
67
  return {
62
- ...variables[key],
68
+ ...variables[propTypeKey][key],
63
69
  key
64
70
  };
65
71
  };
66
- var getVariables = () => {
67
- return normalizeVariables();
68
- };
69
- var normalizeVariables = () => {
70
- return Object.entries(variables).map(([key, { label, value }]) => ({
72
+ var normalizeVariables = (propTypeKey) => {
73
+ return Object.entries(variables[propTypeKey]).map(([key, { label, value }]) => ({
71
74
  key,
72
75
  label,
73
76
  value
74
77
  }));
75
78
  };
76
- var variables = window?.ElementorV4Variables ?? {
77
- "e-gc-001": {
78
- value: "#ffffff",
79
- label: "Main: white"
80
- },
81
- "e-gc-002": {
82
- value: "#000000",
83
- label: "Main: black"
84
- },
85
- "e-gc-a01": {
86
- value: "#FF0000",
87
- label: "Danger: red"
88
- },
89
- "e-gc-a02": {
90
- value: "#0000FF",
91
- label: "Informative: blue"
92
- },
93
- "e-gc-a03": {
94
- value: "#FF7BE5",
95
- label: "Elementor: pint"
96
- },
97
- "e-gc-a04": {
98
- value: "#808080",
99
- label: "Gray: background"
100
- },
101
- "e-gc-b01": {
102
- value: "#213555",
103
- label: "Navy: primary"
104
- },
105
- "e-gc-b02": {
106
- value: "#3E5879",
107
- label: "Navy: secondary"
108
- },
109
- "e-gc-b03": {
110
- value: "#D8C4B6",
111
- label: "Navy: light"
112
- },
113
- "e-gc-b04": {
114
- value: "#F5EFE7",
115
- label: "Navy long text variable name: background"
116
- }
117
- };
79
+ var variables = window?.ElementorV4Variables;
118
80
 
119
81
  // src/prop-types/color-variable-prop-type.ts
120
82
  var import_editor_props = require("@elementor/editor-props");
121
83
  var import_schema = require("@elementor/schema");
122
84
  var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
123
85
 
124
- // src/components/color-indicator.tsx
125
- var import_ui = require("@elementor/ui");
126
- var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
127
- borderRadius: `${theme.shape.borderRadius / 2}px`
86
+ // src/components/styled-menu-item.tsx
87
+ var import_ui2 = require("@elementor/ui");
88
+ var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
89
+ pl: 2,
90
+ pr: 1,
91
+ py: 0.5,
92
+ "&:hover .MuiSvgIcon-root": {
93
+ opacity: 1
94
+ }
128
95
  }));
129
96
 
130
- // src/components/variables-selection.tsx
131
- var VariablesSelection = ({ onSelect }) => {
97
+ // src/components/color-variables-selection.tsx
98
+ var ColorVariablesSelection = ({ onSelect }) => {
132
99
  const { value: variable, setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
133
- const variables2 = usePropVariables();
134
- const handleSetVariable = (newValue) => {
100
+ const variables2 = usePropVariables(colorVariablePropTypeUtil.key);
101
+ const handleSetColorVariable = (newValue) => {
135
102
  setVariable(newValue.key);
136
103
  onSelect?.();
137
104
  };
138
- return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui2.Divider, null), /* @__PURE__ */ React.createElement(import_ui2.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui2.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
105
+ return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui3.Divider, null), /* @__PURE__ */ React.createElement(import_ui3.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui3.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
139
106
  StyledMenuItem,
140
107
  {
141
108
  key,
142
- onClick: () => handleSetVariable({ value, label, key }),
109
+ onClick: () => handleSetColorVariable({ value, label, key }),
143
110
  selected: key === variable
144
111
  },
145
- /* @__PURE__ */ React.createElement(import_ui2.ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
112
+ /* @__PURE__ */ React.createElement(import_ui3.ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
146
113
  /* @__PURE__ */ React.createElement(
147
- import_ui2.ListItemText,
114
+ import_ui3.ListItemText,
148
115
  {
149
116
  primary: label,
150
117
  secondary: value,
@@ -171,46 +138,43 @@ var VariablesSelection = ({ onSelect }) => {
171
138
  /* @__PURE__ */ React.createElement(import_icons.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
172
139
  )))));
173
140
  };
174
- var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
175
- pl: 2,
176
- pr: 1,
177
- py: 0.5,
178
- "&:hover .MuiSvgIcon-root": {
179
- opacity: 1
180
- }
181
- }));
182
141
 
183
142
  // src/components/variables-selection-popover.tsx
184
143
  var React2 = __toESM(require("react"));
185
144
  var import_react3 = require("react");
186
145
  var import_icons2 = require("@elementor/icons");
187
- var import_ui3 = require("@elementor/ui");
146
+ var import_ui4 = require("@elementor/ui");
188
147
  var import_i18n = require("@wordpress/i18n");
189
- var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children }) => {
148
+ var VariablesSelectionPopover = ({
149
+ selectedVariable,
150
+ unlinkVariable,
151
+ startTagAdornment,
152
+ children
153
+ }) => {
190
154
  const id = (0, import_react3.useId)();
191
- const popupState = (0, import_ui3.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
155
+ const popupState = (0, import_ui4.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
192
156
  const closePopover = () => popupState.close();
193
- const { value, label } = selectedVariable;
194
- return /* @__PURE__ */ React2.createElement(import_ui3.Box, null, /* @__PURE__ */ React2.createElement(
195
- import_ui3.UnstableTag,
157
+ const { label } = selectedVariable;
158
+ return /* @__PURE__ */ React2.createElement(import_ui4.Box, null, /* @__PURE__ */ React2.createElement(
159
+ import_ui4.UnstableTag,
196
160
  {
197
161
  fullWidth: true,
198
162
  showActionsOnHover: true,
199
- ...(0, import_ui3.bindTrigger)(popupState),
200
- startIcon: /* @__PURE__ */ React2.createElement(import_ui3.Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
201
- label: /* @__PURE__ */ React2.createElement(import_ui3.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(import_ui3.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
202
- actions: /* @__PURE__ */ React2.createElement(import_ui3.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons2.DetachIcon, { fontSize: "tiny" }))
163
+ ...(0, import_ui4.bindTrigger)(popupState),
164
+ startIcon: /* @__PURE__ */ React2.createElement(import_ui4.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
165
+ label: /* @__PURE__ */ React2.createElement(import_ui4.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(import_ui4.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
166
+ actions: /* @__PURE__ */ React2.createElement(import_ui4.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons2.DetachIcon, { fontSize: "tiny" }))
203
167
  }
204
168
  ), /* @__PURE__ */ React2.createElement(
205
- import_ui3.Popover,
169
+ import_ui4.Popover,
206
170
  {
207
171
  disableScrollLock: true,
208
172
  anchorOrigin: { vertical: "bottom", horizontal: "center" },
209
173
  transformOrigin: { vertical: "top", horizontal: "center" },
210
- ...(0, import_ui3.bindPopover)(popupState)
174
+ ...(0, import_ui4.bindPopover)(popupState)
211
175
  },
212
- /* @__PURE__ */ React2.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Variables", "elementor")), /* @__PURE__ */ React2.createElement(
213
- import_ui3.CloseButton,
176
+ /* @__PURE__ */ React2.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui4.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Variables", "elementor")), /* @__PURE__ */ React2.createElement(
177
+ import_ui4.CloseButton,
214
178
  {
215
179
  slotProps: { icon: { fontSize: "tiny" } },
216
180
  sx: { ml: "auto" },
@@ -221,43 +185,62 @@ var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children })
221
185
  ));
222
186
  };
223
187
 
224
- // src/controls/variables-selection-control.tsx
225
- var VariablesSelectionControl = () => {
188
+ // src/controls/color-variables-selection-control.tsx
189
+ var ColorVariablesSelectionControl = () => {
226
190
  const { setValue } = (0, import_editor_controls2.useBoundProp)();
227
191
  const { value: variableValue } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
228
192
  const unlinkVariable = () => {
229
193
  setValue("");
230
194
  };
231
- const selectedVariable = useVariable(variableValue);
195
+ const selectedVariable = useVariable(colorVariablePropTypeUtil.key, variableValue);
232
196
  if (!selectedVariable) {
233
197
  throw new Error(`Global color variable ${variableValue} not found`);
234
198
  }
235
- return /* @__PURE__ */ React3.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover }));
199
+ return /* @__PURE__ */ React3.createElement(
200
+ VariablesSelectionPopover,
201
+ {
202
+ selectedVariable,
203
+ unlinkVariable,
204
+ startTagAdornment: /* @__PURE__ */ React3.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
205
+ },
206
+ ({ closePopover }) => /* @__PURE__ */ React3.createElement(ColorVariablesSelection, { onSelect: closePopover })
207
+ );
236
208
  };
237
209
 
238
- // src/hooks/use-prop-variable-action.tsx
210
+ // src/hooks/use-prop-color-variable-action.tsx
239
211
  var React4 = __toESM(require("react"));
240
212
  var import_editor_editing_panel = require("@elementor/editor-editing-panel");
241
213
  var import_icons3 = require("@elementor/icons");
242
214
  var import_i18n2 = require("@wordpress/i18n");
243
215
 
216
+ // src/prop-types/font-variable-prop-type.ts
217
+ var import_editor_props2 = require("@elementor/editor-props");
218
+ var import_schema2 = require("@elementor/schema");
219
+ var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
220
+
244
221
  // src/utils.ts
245
- var hasAssignedVariable = (propValue) => {
222
+ var hasAssignedColorVariable = (propValue) => {
246
223
  return !!colorVariablePropTypeUtil.isValid(propValue);
247
224
  };
248
- var supportsVariables = (propType) => {
225
+ var supportsColorVariables = (propType) => {
249
226
  return propType.kind === "union" && colorVariablePropTypeUtil.key in propType.prop_types;
250
227
  };
228
+ var hasAssignedFontVariable = (propValue) => {
229
+ return !!fontVariablePropTypeUtil.isValid(propValue);
230
+ };
231
+ var supportsFontVariables = (propType) => {
232
+ return propType.kind === "union" && fontVariablePropTypeUtil.key in propType.prop_types;
233
+ };
251
234
 
252
- // src/hooks/use-prop-variable-action.tsx
253
- var usePropVariableAction = () => {
235
+ // src/hooks/use-prop-color-variable-action.tsx
236
+ var usePropColorVariableAction = () => {
254
237
  const { propType } = (0, import_editor_editing_panel.useBoundProp)();
255
- const visible = !!propType && supportsVariables(propType);
238
+ const visible = !!propType && supportsColorVariables(propType);
256
239
  return {
257
240
  visible,
258
241
  icon: import_icons3.ColorFilterIcon,
259
242
  title: (0, import_i18n2.__)("Variables", "elementor"),
260
- popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(VariablesSelection, { onSelect: closePopover })
243
+ popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
261
244
  };
262
245
  };
263
246
 
@@ -270,19 +253,127 @@ var variableTransformer = (0, import_editor_canvas.createTransformer)((value) =>
270
253
  return `var(--${value})`;
271
254
  });
272
255
 
273
- // src/init.ts
256
+ // src/init-color-variables.ts
274
257
  var { registerPopoverAction } = import_editor_editing_panel2.controlActionsMenu;
275
- function init() {
258
+ function initColorVariables() {
276
259
  (0, import_editor_editing_panel2.registerControlReplacement)({
277
- component: VariablesSelectionControl,
278
- condition: ({ value }) => hasAssignedVariable(value)
260
+ component: ColorVariablesSelectionControl,
261
+ condition: ({ value }) => hasAssignedColorVariable(value)
279
262
  });
280
263
  registerPopoverAction({
281
- id: "variables",
282
- useProps: usePropVariableAction
264
+ id: "color-variables",
265
+ useProps: usePropColorVariableAction
283
266
  });
284
267
  import_editor_canvas2.styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
285
268
  }
269
+
270
+ // src/init-font-variables.ts
271
+ var import_editor_canvas3 = require("@elementor/editor-canvas");
272
+ var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
273
+
274
+ // src/controls/font-variables-selection-control.tsx
275
+ var React6 = __toESM(require("react"));
276
+ var import_editor_controls4 = require("@elementor/editor-controls");
277
+
278
+ // src/components/font-variables-selection.tsx
279
+ var React5 = __toESM(require("react"));
280
+ var import_react4 = require("react");
281
+ var import_editor_controls3 = require("@elementor/editor-controls");
282
+ var import_icons4 = require("@elementor/icons");
283
+ var import_ui5 = require("@elementor/ui");
284
+ var FontVariablesSelection = ({ onSelect }) => {
285
+ const { value: variable, setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
286
+ const variables2 = usePropVariables(fontVariablePropTypeUtil.key);
287
+ const handleSetVariable = (newValue) => {
288
+ setVariable(newValue.key);
289
+ onSelect?.();
290
+ };
291
+ return /* @__PURE__ */ React5.createElement(import_react4.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.Divider, null), /* @__PURE__ */ React5.createElement(import_ui5.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React5.createElement(import_ui5.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React5.createElement(
292
+ StyledMenuItem,
293
+ {
294
+ key,
295
+ onClick: () => handleSetVariable({ value, label, key }),
296
+ selected: key === variable
297
+ },
298
+ /* @__PURE__ */ React5.createElement(import_ui5.ListItemIcon, null, /* @__PURE__ */ React5.createElement(import_icons4.TextIcon, null)),
299
+ /* @__PURE__ */ React5.createElement(
300
+ import_ui5.ListItemText,
301
+ {
302
+ primary: label,
303
+ secondary: value,
304
+ primaryTypographyProps: {
305
+ variant: "body2",
306
+ color: "text.secondary",
307
+ style: {
308
+ lineHeight: 2,
309
+ display: "inline-block",
310
+ overflow: "hidden",
311
+ textOverflow: "ellipsis",
312
+ whiteSpace: "nowrap",
313
+ maxWidth: "81px"
314
+ }
315
+ },
316
+ secondaryTypographyProps: {
317
+ variant: "caption",
318
+ color: "text.tertiary",
319
+ style: { marginTop: "1px", lineHeight: "1" }
320
+ },
321
+ sx: { display: "flex", alignItems: "center", gap: 1 }
322
+ }
323
+ ),
324
+ /* @__PURE__ */ React5.createElement(import_icons4.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
325
+ )))));
326
+ };
327
+
328
+ // src/controls/font-variables-selection-control.tsx
329
+ var FontVariablesSelectionControl = () => {
330
+ const { setValue } = (0, import_editor_controls4.useBoundProp)();
331
+ const { value: variableValue } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
332
+ const unlinkVariable = () => {
333
+ setValue("");
334
+ };
335
+ const selectedVariable = useVariable(fontVariablePropTypeUtil.key, variableValue);
336
+ if (!selectedVariable) {
337
+ throw new Error(`Global font variable ${variableValue} not found`);
338
+ }
339
+ return /* @__PURE__ */ React6.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React6.createElement(FontVariablesSelection, { onSelect: closePopover }));
340
+ };
341
+
342
+ // src/hooks/use-prop-font-variable-action.tsx
343
+ var React7 = __toESM(require("react"));
344
+ var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
345
+ var import_icons5 = require("@elementor/icons");
346
+ var import_i18n3 = require("@wordpress/i18n");
347
+ var usePropFontVariableAction = () => {
348
+ const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
349
+ const visible = !!propType && supportsFontVariables(propType);
350
+ return {
351
+ visible,
352
+ icon: import_icons5.ColorFilterIcon,
353
+ title: (0, import_i18n3.__)("Variables", "elementor"),
354
+ popoverContent: ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover })
355
+ };
356
+ };
357
+
358
+ // src/init-font-variables.ts
359
+ var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel4.controlActionsMenu;
360
+ function initFontVariables() {
361
+ (0, import_editor_editing_panel4.registerControlReplacement)({
362
+ component: FontVariablesSelectionControl,
363
+ condition: ({ value }) => hasAssignedFontVariable(value)
364
+ });
365
+ registerPopoverAction2({
366
+ id: "font-variables",
367
+ useProps: usePropFontVariableAction
368
+ });
369
+ import_editor_canvas3.styleTransformersRegistry.register(fontVariablePropTypeUtil.key, variableTransformer);
370
+ }
371
+
372
+ // src/init.ts
373
+ function init() {
374
+ initColorVariables();
375
+ initFontVariables();
376
+ }
286
377
  // Annotate the CommonJS export names for ESM import in node:
287
378
  0 && (module.exports = {
288
379
  init
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/controls/variables-selection-control.tsx","../src/components/variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/color-indicator.tsx","../src/components/variables-selection-popover.tsx","../src/hooks/use-prop-variable-action.tsx","../src/utils.ts","../src/transformers/variable-transformer.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { VariablesSelectionControl } from './controls/variables-selection-control';\nimport { usePropVariableAction } from './hooks/use-prop-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function init() {\n\tregisterControlReplacement( {\n\t\tcomponent: VariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'variables',\n\t\tuseProps: usePropVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( '' );\n\t};\n\n\tconst selectedVariable = useVariable( variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables();\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\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\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n\nconst StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import { useMemo } from 'react';\n\nimport { type Variable } from '../types';\n\nexport const usePropVariables = () => {\n\treturn useMemo( () => getVariables(), [] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tif ( ! variables[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst getVariables = (): Variable[] => {\n\treturn normalizeVariables();\n};\n\nconst normalizeVariables = () => {\n\treturn Object.entries( variables ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\n// @ts-expect-error the temporary solution to get the list of variables from the server\nconst variables: Record< string, { value: string; label: string } > = window?.ElementorV4Variables ?? {\n\t'e-gc-001': {\n\t\tvalue: '#ffffff',\n\t\tlabel: 'Main: white',\n\t},\n\t'e-gc-002': {\n\t\tvalue: '#000000',\n\t\tlabel: 'Main: black',\n\t},\n\t'e-gc-a01': {\n\t\tvalue: '#FF0000',\n\t\tlabel: 'Danger: red',\n\t},\n\t'e-gc-a02': {\n\t\tvalue: '#0000FF',\n\t\tlabel: 'Informative: blue',\n\t},\n\t'e-gc-a03': {\n\t\tvalue: '#FF7BE5',\n\t\tlabel: 'Elementor: pint',\n\t},\n\t'e-gc-a04': {\n\t\tvalue: '#808080',\n\t\tlabel: 'Gray: background',\n\t},\n\n\t'e-gc-b01': {\n\t\tvalue: '#213555',\n\t\tlabel: 'Navy: primary',\n\t},\n\t'e-gc-b02': {\n\t\tvalue: '#3E5879',\n\t\tlabel: 'Navy: secondary',\n\t},\n\t'e-gc-b03': {\n\t\tvalue: '#D8C4B6',\n\t\tlabel: 'Navy: light',\n\t},\n\t'e-gc-b04': {\n\t\tvalue: '#F5EFE7',\n\t\tlabel: 'Navy long text variable name: background',\n\t},\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, children }: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst { value, label } = selectedVariable;\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'center' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'tiny' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t\t{ children( { closePopover } ) }\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { supportsVariables } from '../utils';\n\nexport const usePropVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\n\nexport const hasAssignedVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_react","import_ui","variables","React","import_react","import_icons","import_ui","Tag","React","import_icons","import_i18n"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/init-color-variables.ts","../src/controls/color-variables-selection-control.tsx","../src/components/color-indicator.tsx","../src/components/color-variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/styled-menu-item.tsx","../src/components/variables-selection-popover.tsx","../src/hooks/use-prop-color-variable-action.tsx","../src/prop-types/font-variable-prop-type.ts","../src/utils.ts","../src/transformers/variable-transformer.ts","../src/init-font-variables.ts","../src/controls/font-variables-selection-control.tsx","../src/components/font-variables-selection.tsx","../src/hooks/use-prop-font-variable-action.tsx","../src/init.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';\nimport { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedColorVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initColorVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: ColorVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedColorVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'color-variables',\n\t\tuseProps: usePropColorVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { ColorIndicator } from '../components/color-indicator';\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const ColorVariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( '' );\n\t};\n\n\tconst selectedVariable = useVariable( colorVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover\n\t\t\tselectedVariable={ selectedVariable }\n\t\t\tunlinkVariable={ unlinkVariable }\n\t\t\tstartTagAdornment={ <ColorIndicator size=\"inherit\" component=\"span\" value={ selectedVariable.value } /> }\n\t\t>\n\t\t\t{ ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const ColorVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( colorVariablePropTypeUtil.key );\n\n\tconst handleSetColorVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetColorVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\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\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import { useMemo } from 'react';\n\ntype Variables = Record< string, { value: string; label: string } >;\n\ntype VariablesGroup = Record< string, Variables >;\n\nexport const usePropVariables = ( propTypeKey: string ) => {\n\treturn useMemo( () => normalizeVariables( propTypeKey ), [ propTypeKey ] );\n};\n\nexport const useVariable = ( propTypeKey: string, key: string ) => {\n\tif ( ! variables[ propTypeKey ][ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ propTypeKey ][ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propTypeKey: string ) => {\n\treturn Object.entries( variables[ propTypeKey ] ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\n// @ts-expect-error the temporary solution to get the list of variables from the server\nconst variables: VariablesGroup = window?.ElementorV4Variables;\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { MenuItem, styled } from '@elementor/ui';\n\nexport const StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n\tstartTagAdornment?: React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( {\n\tselectedVariable,\n\tunlinkVariable,\n\tstartTagAdornment,\n\tchildren,\n}: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst { label } = selectedVariable;\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t{ startTagAdornment }\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'center' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'tiny' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t\t{ children( { closePopover } ) }\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { supportsColorVariables } from '../utils';\n\nexport const usePropColorVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsColorVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const fontVariablePropTypeUtil = createPropUtils( 'global-font-variable', z.string() );\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\n\nexport const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsColorVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n\nexport const hasAssignedFontVariable = ( propValue: PropValue ): boolean => {\n\treturn !! fontVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsFontVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && fontVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { FontVariablesSelectionControl } from './controls/font-variables-selection-control';\nimport { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedFontVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initFontVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: FontVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedFontVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'font-variables',\n\t\tuseProps: usePropFontVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( fontVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\n\nexport const FontVariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( '' );\n\t};\n\n\tconst selectedVariable = useVariable( fontVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global font variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon, TextIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\nimport { type Variable } from '../types';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const FontVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( fontVariablePropTypeUtil.key );\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<TextIcon />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\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\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { supportsFontVariables } from '../utils';\n\nexport const usePropFontVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsFontVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\n\nexport function init() {\n\tinitColorVariables();\n\n\tinitFontVariables();\n}\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_react","import_ui","import_ui","variables","React","import_react","import_icons","import_ui","Tag","React","import_icons","import_i18n","import_editor_props","import_schema","import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","React","import_react","import_editor_controls","import_icons","import_ui","variables","React","import_editor_editing_panel","import_icons","import_i18n","registerPopoverAction"]}