@elementor/editor-variables 0.3.2 → 0.5.0

package/dist/index.mjs

@@ -1,101 +1,68 @@
-// src/init.ts
+// src/init-color-variables.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
 
-// src/controls/variables-selection-control.tsx
+// src/controls/color-variables-selection-control.tsx
 import * as React3 from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 
-// src/components/variables-selection.tsx
+// src/components/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+
+// src/components/color-variables-selection.tsx
 import * as React from "react";
 import { Fragment } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
 import { EditIcon } from "@elementor/icons";
-import { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled as styled2 } from "@elementor/ui";
+import { Box, Divider, ListItemIcon, ListItemText, MenuList } from "@elementor/ui";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
-var usePropVariables = () => {
-  return useMemo(() => getVariables(), []);
+var usePropVariables = (propTypeKey) => {
+  return useMemo(() => normalizeVariables(propTypeKey), [propTypeKey]);
 };
-var useVariable = (key) => {
-  if (!variables[key]) {
+var useVariable = (propTypeKey, key) => {
+  if (!variables[propTypeKey][key]) {
     return null;
   }
   return {
-    ...variables[key],
+    ...variables[propTypeKey][key],
     key
   };
 };
-var getVariables = () => {
-  return normalizeVariables();
-};
-var normalizeVariables = () => {
-  return Object.entries(variables).map(([key, { label, value }]) => ({
+var normalizeVariables = (propTypeKey) => {
+  return Object.entries(variables[propTypeKey]).map(([key, { label, value }]) => ({
     key,
     label,
     value
   }));
 };
-var variables = window?.ElementorV4Variables ?? {
-  "e-gc-001": {
-    value: "#ffffff",
-    label: "Main: white"
-  },
-  "e-gc-002": {
-    value: "#000000",
-    label: "Main: black"
-  },
-  "e-gc-a01": {
-    value: "#FF0000",
-    label: "Danger: red"
-  },
-  "e-gc-a02": {
-    value: "#0000FF",
-    label: "Informative: blue"
-  },
-  "e-gc-a03": {
-    value: "#FF7BE5",
-    label: "Elementor: pint"
-  },
-  "e-gc-a04": {
-    value: "#808080",
-    label: "Gray: background"
-  },
-  "e-gc-b01": {
-    value: "#213555",
-    label: "Navy: primary"
-  },
-  "e-gc-b02": {
-    value: "#3E5879",
-    label: "Navy: secondary"
-  },
-  "e-gc-b03": {
-    value: "#D8C4B6",
-    label: "Navy: light"
-  },
-  "e-gc-b04": {
-    value: "#F5EFE7",
-    label: "Navy long text variable name: background"
-  }
-};
+var variables = window?.ElementorV4Variables;
 
 // src/prop-types/color-variable-prop-type.ts
 import { createPropUtils } from "@elementor/editor-props";
 import { z } from "@elementor/schema";
 var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
-// src/components/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`
+// src/components/styled-menu-item.tsx
+import { MenuItem, styled as styled2 } from "@elementor/ui";
+var StyledMenuItem = styled2(MenuItem)(() => ({
+  pl: 2,
+  pr: 1,
+  py: 0.5,
+  "&:hover .MuiSvgIcon-root": {
+    opacity: 1
+  }
 }));
 
-// src/components/variables-selection.tsx
-var VariablesSelection = ({ onSelect }) => {
+// src/components/color-variables-selection.tsx
+var ColorVariablesSelection = ({ onSelect }) => {
   const { value: variable, setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
-  const variables2 = usePropVariables();
-  const handleSetVariable = (newValue) => {
+  const variables2 = usePropVariables(colorVariablePropTypeUtil.key);
+  const handleSetColorVariable = (newValue) => {
     setVariable(newValue.key);
     onSelect?.();
   };
@@ -103,7 +70,7 @@ var VariablesSelection = ({ onSelect }) => {
     StyledMenuItem,
     {
       key,
-      onClick: () => handleSetVariable({ value, label, key }),
+      onClick: () => handleSetColorVariable({ value, label, key }),
       selected: key === variable
     },
     /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
@@ -135,14 +102,6 @@ var VariablesSelection = ({ onSelect }) => {
     /* @__PURE__ */ React.createElement(EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
   )))));
 };
-var StyledMenuItem = styled2(MenuItem)(() => ({
-  pl: 2,
-  pr: 1,
-  py: 0.5,
-  "&:hover .MuiSvgIcon-root": {
-    opacity: 1
-  }
-}));
 
 // src/components/variables-selection-popover.tsx
 import * as React2 from "react";
@@ -161,18 +120,23 @@ import {
   usePopupState
 } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
-var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children }) => {
+var VariablesSelectionPopover = ({
+  selectedVariable,
+  unlinkVariable,
+  startTagAdornment,
+  children
+}) => {
   const id = useId();
   const popupState = usePopupState({ variant: "popover", popupId: `elementor-variables-action-${id}` });
   const closePopover = () => popupState.close();
-  const { value, label } = selectedVariable;
+  const { label } = selectedVariable;
   return /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       ...bindTrigger(popupState),
-      startIcon: /* @__PURE__ */ React2.createElement(Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React2.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      startIcon: /* @__PURE__ */ React2.createElement(Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React2.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
       label: /* @__PURE__ */ React2.createElement(Box2, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
       actions: /* @__PURE__ */ React2.createElement(IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": __("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(DetachIcon, { fontSize: "tiny" }))
     }
@@ -196,43 +160,62 @@ var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children })
   ));
 };
 
-// src/controls/variables-selection-control.tsx
-var VariablesSelectionControl = () => {
+// src/controls/color-variables-selection-control.tsx
+var ColorVariablesSelectionControl = () => {
   const { setValue } = useBoundProp2();
   const { value: variableValue } = useBoundProp2(colorVariablePropTypeUtil);
   const unlinkVariable = () => {
-    setValue("");
+    setValue(null);
   };
-  const selectedVariable = useVariable(variableValue);
+  const selectedVariable = useVariable(colorVariablePropTypeUtil.key, variableValue);
   if (!selectedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
   }
-  return /* @__PURE__ */ React3.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover }));
+  return /* @__PURE__ */ React3.createElement(
+    VariablesSelectionPopover,
+    {
+      selectedVariable,
+      unlinkVariable,
+      startTagAdornment: /* @__PURE__ */ React3.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
+    },
+    ({ closePopover }) => /* @__PURE__ */ React3.createElement(ColorVariablesSelection, { onSelect: closePopover })
+  );
 };
 
-// src/hooks/use-prop-variable-action.tsx
+// src/hooks/use-prop-color-variable-action.tsx
 import * as React4 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
 import { __ as __2 } from "@wordpress/i18n";
 
+// src/prop-types/font-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+
 // src/utils.ts
-var hasAssignedVariable = (propValue) => {
+var hasAssignedColorVariable = (propValue) => {
   return !!colorVariablePropTypeUtil.isValid(propValue);
 };
-var supportsVariables = (propType) => {
+var supportsColorVariables = (propType) => {
   return propType.kind === "union" && colorVariablePropTypeUtil.key in propType.prop_types;
 };
+var hasAssignedFontVariable = (propValue) => {
+  return !!fontVariablePropTypeUtil.isValid(propValue);
+};
+var supportsFontVariables = (propType) => {
+  return propType.kind === "union" && fontVariablePropTypeUtil.key in propType.prop_types;
+};
 
-// src/hooks/use-prop-variable-action.tsx
-var usePropVariableAction = () => {
+// src/hooks/use-prop-color-variable-action.tsx
+var usePropColorVariableAction = () => {
   const { propType } = useBoundProp3();
-  const visible = !!propType && supportsVariables(propType);
+  const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
     icon: ColorFilterIcon2,
     title: __2("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(VariablesSelection, { onSelect: closePopover })
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
   };
 };
 
@@ -245,19 +228,127 @@ var variableTransformer = createTransformer((value) => {
   return `var(--${value})`;
 });
 
-// src/init.ts
+// src/init-color-variables.ts
 var { registerPopoverAction } = controlActionsMenu;
-function init() {
+function initColorVariables() {
   registerControlReplacement({
-    component: VariablesSelectionControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    component: ColorVariablesSelectionControl,
+    condition: ({ value }) => hasAssignedColorVariable(value)
   });
   registerPopoverAction({
-    id: "variables",
-    useProps: usePropVariableAction
+    id: "color-variables",
+    useProps: usePropColorVariableAction
   });
   styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
 }
+
+// src/init-font-variables.ts
+import { styleTransformersRegistry as styleTransformersRegistry2 } from "@elementor/editor-canvas";
+import { controlActionsMenu as controlActionsMenu2, registerControlReplacement as registerControlReplacement2 } from "@elementor/editor-editing-panel";
+
+// src/controls/font-variables-selection-control.tsx
+import * as React6 from "react";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+
+// src/components/font-variables-selection.tsx
+import * as React5 from "react";
+import { Fragment as Fragment2 } from "react";
+import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { EditIcon as EditIcon2, TextIcon } from "@elementor/icons";
+import { Box as Box3, Divider as Divider2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, MenuList as MenuList2 } from "@elementor/ui";
+var FontVariablesSelection = ({ onSelect }) => {
+  const { value: variable, setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
+  const variables2 = usePropVariables(fontVariablePropTypeUtil.key);
+  const handleSetVariable = (newValue) => {
+    setVariable(newValue.key);
+    onSelect?.();
+  };
+  return /* @__PURE__ */ React5.createElement(Fragment2, null, /* @__PURE__ */ React5.createElement(Divider2, null), /* @__PURE__ */ React5.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React5.createElement(MenuList2, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React5.createElement(
+    StyledMenuItem,
+    {
+      key,
+      onClick: () => handleSetVariable({ value, label, key }),
+      selected: key === variable
+    },
+    /* @__PURE__ */ React5.createElement(ListItemIcon2, null, /* @__PURE__ */ React5.createElement(TextIcon, null)),
+    /* @__PURE__ */ React5.createElement(
+      ListItemText2,
+      {
+        primary: label,
+        secondary: value,
+        primaryTypographyProps: {
+          variant: "body2",
+          color: "text.secondary",
+          style: {
+            lineHeight: 2,
+            display: "inline-block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            maxWidth: "81px"
+          }
+        },
+        secondaryTypographyProps: {
+          variant: "caption",
+          color: "text.tertiary",
+          style: { marginTop: "1px", lineHeight: "1" }
+        },
+        sx: { display: "flex", alignItems: "center", gap: 1 }
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(EditIcon2, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
+  )))));
+};
+
+// src/controls/font-variables-selection-control.tsx
+var FontVariablesSelectionControl = () => {
+  const { setValue } = useBoundProp5();
+  const { value: variableValue } = useBoundProp5(fontVariablePropTypeUtil);
+  const unlinkVariable = () => {
+    setValue(null);
+  };
+  const selectedVariable = useVariable(fontVariablePropTypeUtil.key, variableValue);
+  if (!selectedVariable) {
+    throw new Error(`Global font variable ${variableValue} not found`);
+  }
+  return /* @__PURE__ */ React6.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React6.createElement(FontVariablesSelection, { onSelect: closePopover }));
+};
+
+// src/hooks/use-prop-font-variable-action.tsx
+import * as React7 from "react";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-editing-panel";
+import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
+import { __ as __3 } from "@wordpress/i18n";
+var usePropFontVariableAction = () => {
+  const { propType } = useBoundProp6();
+  const visible = !!propType && supportsFontVariables(propType);
+  return {
+    visible,
+    icon: ColorFilterIcon3,
+    title: __3("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover })
+  };
+};
+
+// src/init-font-variables.ts
+var { registerPopoverAction: registerPopoverAction2 } = controlActionsMenu2;
+function initFontVariables() {
+  registerControlReplacement2({
+    component: FontVariablesSelectionControl,
+    condition: ({ value }) => hasAssignedFontVariable(value)
+  });
+  registerPopoverAction2({
+    id: "font-variables",
+    useProps: usePropFontVariableAction
+  });
+  styleTransformersRegistry2.register(fontVariablePropTypeUtil.key, variableTransformer);
+}
+
+// src/init.ts
+function init() {
+  initColorVariables();
+  initFontVariables();
+}
 export {
   init
 };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../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":["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":["React","useBoundProp","styled","variables","styled","React","Box","Box","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__"]}
+{"version":3,"sources":["../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":["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( null );\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( null );\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":["React","useBoundProp","styled","variables","React","Box","useBoundProp","React","useBoundProp","ColorFilterIcon","__","createPropUtils","z","useBoundProp","ColorFilterIcon","__","styleTransformersRegistry","controlActionsMenu","registerControlReplacement","React","useBoundProp","React","Fragment","useBoundProp","EditIcon","Box","Divider","ListItemIcon","ListItemText","MenuList","useBoundProp","variables","Fragment","Divider","Box","MenuList","ListItemIcon","ListItemText","EditIcon","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","registerPopoverAction","controlActionsMenu","registerControlReplacement","styleTransformersRegistry"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,11 +39,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-editing-panel": "1.33.1",
-    "@elementor/editor-canvas": "0.21.0",
+    "@elementor/editor-editing-panel": "1.35.0",
+    "@elementor/editor-canvas": "0.21.2",
     "@elementor/editor-props": "0.12.0",
     "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "0.28.2",
+    "@elementor/editor-controls": "0.30.0",
     "@elementor/icons": "1.40.1",
     "@wordpress/i18n": "^5.13.0",
     "@elementor/ui": "1.34.2"

package/src/components/{variables-selection.tsx → color-variables-selection.tsx}

@@ -2,23 +2,24 @@ import * as React from 'react';
 import { Fragment } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { EditIcon } from '@elementor/icons';
-import { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled } from '@elementor/ui';
+import { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';
 
 import { usePropVariables } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 import { type Variable } from '../types';
 import { ColorIndicator } from './color-indicator';
+import { StyledMenuItem } from './styled-menu-item';
 
 type Props = {
 	onSelect?: () => void;
 };
 
-export const VariablesSelection = ( { onSelect }: Props ) => {
+export const ColorVariablesSelection = ( { onSelect }: Props ) => {
 	const { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
 
-	const variables = usePropVariables();
+	const variables = usePropVariables( colorVariablePropTypeUtil.key );
 
-	const handleSetVariable = ( newValue: Variable ) => {
+	const handleSetColorVariable = ( newValue: Variable ) => {
 		setVariable( newValue.key );
 
 		onSelect?.();
@@ -32,7 +33,7 @@ export const VariablesSelection = ( { onSelect }: Props ) => {
 					{ variables.map( ( { value, label, key } ) => (
 						<StyledMenuItem
 							key={ key }
-							onClick={ () => handleSetVariable( { value, label, key } ) }
+							onClick={ () => handleSetColorVariable( { value, label, key } ) }
 							selected={ key === variable }
 						>
 							<ListItemIcon>
@@ -68,12 +69,3 @@ export const VariablesSelection = ( { onSelect }: Props ) => {
 		</Fragment>
 	);
 };
-
-const StyledMenuItem = styled( MenuItem )( () => ( {
-	pl: 2,
-	pr: 1,
-	py: 0.5,
-	'&:hover .MuiSvgIcon-root': {
-		opacity: 1,
-	},
-} ) );

package/src/components/font-variables-selection.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Fragment } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { EditIcon, TextIcon } from '@elementor/icons';
+import { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';
+
+import { usePropVariables } from '../hooks/use-prop-variables';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+import { type Variable } from '../types';
+import { StyledMenuItem } from './styled-menu-item';
+
+type Props = {
+	onSelect?: () => void;
+};
+
+export const FontVariablesSelection = ( { onSelect }: Props ) => {
+	const { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
+
+	const variables = usePropVariables( fontVariablePropTypeUtil.key );
+
+	const handleSetVariable = ( newValue: Variable ) => {
+		setVariable( newValue.key );
+
+		onSelect?.();
+	};
+
+	return (
+		<Fragment>
+			<Divider />
+			<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+				<MenuList role="listbox" tabIndex={ 0 }>
+					{ variables.map( ( { value, label, key } ) => (
+						<StyledMenuItem
+							key={ key }
+							onClick={ () => handleSetVariable( { value, label, key } ) }
+							selected={ key === variable }
+						>
+							<ListItemIcon>
+								<TextIcon />
+							</ListItemIcon>
+							<ListItemText
+								primary={ label }
+								secondary={ value }
+								primaryTypographyProps={ {
+									variant: 'body2',
+									color: 'text.secondary',
+									style: {
+										lineHeight: 2,
+										display: 'inline-block',
+										overflow: 'hidden',
+										textOverflow: 'ellipsis',
+										whiteSpace: 'nowrap',
+										maxWidth: '81px',
+									},
+								} }
+								secondaryTypographyProps={ {
+									variant: 'caption',
+									color: 'text.tertiary',
+									style: { marginTop: '1px', lineHeight: '1' },
+								} }
+								sx={ { display: 'flex', alignItems: 'center', gap: 1 } }
+							/>
+							<EditIcon color="action" fontSize="inherit" sx={ { mx: 1, opacity: '0' } } />
+						</StyledMenuItem>
+					) ) }
+				</MenuList>
+			</Box>
+		</Fragment>
+	);
+};

package/src/components/styled-menu-item.tsx

@@ -0,0 +1,10 @@
+import { MenuItem, styled } from '@elementor/ui';
+
+export const StyledMenuItem = styled( MenuItem )( () => ( {
+	pl: 2,
+	pr: 1,
+	py: 0.5,
+	'&:hover .MuiSvgIcon-root': {
+		opacity: 1,
+	},
+} ) );