@elementor/editor-variables 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @elementor/editor-variables
+
+## 0.1.0
+
+### Minor Changes
+
+- 97e4d7d: create `editor-variables` package
+- 9eb90c2: styled variable replaces control component
+
+### Patch Changes
+
+- Updated dependencies [093b7ca]
+- Updated dependencies [5f348b8]
+- Updated dependencies [10cbbe9]
+- Updated dependencies [ce1852b]
+- Updated dependencies [baa9d17]
+- Updated dependencies [97e4d7d]
+  - @elementor/editor-controls@0.27.0
+  - @elementor/editor-editing-panel@1.30.0
+  - @elementor/editor-canvas@0.19.0

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+declare function init(): void;
+
+export { init };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare function init(): void;
+
+export { init };

package/dist/index.js

@@ -0,0 +1,143 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  init: () => init
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/init.ts
+var import_editor_canvas2 = require("@elementor/editor-canvas");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+
+// src/controls/variables-selection-control.tsx
+var React = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var VariablesSelectionControl = () => {
+  const { setValue } = (0, import_editor_controls.useBoundProp)();
+  const value = "#FF7BE5";
+  const label = "Light Fuchsia Pink";
+  const unlinkVariable = () => {
+    setValue(null);
+  };
+  return /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(
+    import_ui.UnstableTag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React.createElement(import_ui.Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React.createElement(import_icons.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React.createElement(import_icons.DetachIcon, { fontSize: "tiny" }))
+    }
+  ));
+};
+var StyledUnstableColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+
+// src/hooks/use-prop-variable-action.tsx
+var React3 = __toESM(require("react"));
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_icons2 = require("@elementor/icons");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/variables-selection.tsx
+var React2 = __toESM(require("react"));
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_ui2 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/prop-types/color-variable-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
+
+// src/components/variables-selection.tsx
+var VariablesSelection = ({ onSelect }) => {
+  const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
+  const handleSetVariable = () => {
+    const value = colorVariablePropTypeUtil.create("");
+    setVariable(value.value);
+    onSelect?.();
+  };
+  return /* @__PURE__ */ React2.createElement(import_ui2.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React2.createElement(import_ui2.MenuItem, { onClick: handleSetVariable }, (0, import_i18n2.__)("Variables", "elementor")));
+};
+
+// src/utils.ts
+var hasAssignedVariable = (propValue) => {
+  return !!colorVariablePropTypeUtil.isValid(propValue);
+};
+var supportsVariables = (propType) => {
+  return propType.kind === "union" && colorVariablePropTypeUtil.key in propType.prop_types;
+};
+
+// src/hooks/use-prop-variable-action.tsx
+var usePropVariableAction = () => {
+  const { propType } = (0, import_editor_editing_panel.useBoundProp)();
+  const visible = !!propType && supportsVariables(propType);
+  return {
+    visible,
+    icon: import_icons2.ColorFilterIcon,
+    title: (0, import_i18n3.__)("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover })
+  };
+};
+
+// src/transformers/variable-transformer.ts
+var import_editor_canvas = require("@elementor/editor-canvas");
+var variableTransformer = (0, import_editor_canvas.createTransformer)((value) => {
+  if (!value.trim()) {
+    return null;
+  }
+  return `var(--${value})`;
+});
+
+// src/init.ts
+var { registerPopoverAction } = import_editor_editing_panel2.controlActionsMenu;
+function init() {
+  (0, import_editor_editing_panel2.registerControlReplacement)({
+    component: VariablesSelectionControl,
+    condition: ({ value }) => hasAssignedVariable(value)
+  });
+  registerPopoverAction({
+    id: "variables",
+    useProps: usePropVariableAction
+  });
+  import_editor_canvas2.styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/controls/variables-selection-control.tsx","../src/hooks/use-prop-variable-action.tsx","../src/components/variables-selection.tsx","../src/prop-types/color-variable-prop-type.ts","../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';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\n\tconst value = '#FF7BE5';\n\tconst label = 'Light Fuchsia Pink';\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\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\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<StyledUnstableColorIndicator 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</Box>\n\t);\n};\n\nconst StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\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 * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { Box, MenuItem } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst handleSetVariable = () => {\n\t\tconst value = colorVariablePropTypeUtil.create( '' );\n\n\t\tsetVariable( value.value );\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t<MenuItem onClick={ handleSetVariable }>{ __( 'Variables', 'elementor' ) }</MenuItem>\n\t\t</Box>\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 { 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","Tag","React","import_icons","import_i18n","React","import_editor_controls","import_ui","import_i18n"]}

package/dist/index.mjs

@@ -0,0 +1,106 @@
+// src/init.ts
+import { styleTransformersRegistry } from "@elementor/editor-canvas";
+import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
+
+// src/controls/variables-selection-control.tsx
+import * as React from "react";
+import { useBoundProp } from "@elementor/editor-controls";
+import { ColorFilterIcon, DetachIcon } from "@elementor/icons";
+import { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var VariablesSelectionControl = () => {
+  const { setValue } = useBoundProp();
+  const value = "#FF7BE5";
+  const label = "Light Fuchsia Pink";
+  const unlinkVariable = () => {
+    setValue(null);
+  };
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React.createElement(Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React.createElement(Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React.createElement(IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": __("Unlink", "elementor") }, /* @__PURE__ */ React.createElement(DetachIcon, { fontSize: "tiny" }))
+    }
+  ));
+};
+var StyledUnstableColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+
+// src/hooks/use-prop-variable-action.tsx
+import * as React3 from "react";
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-editing-panel";
+import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/variables-selection.tsx
+import * as React2 from "react";
+import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { Box as Box2, MenuItem } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+
+// 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/variables-selection.tsx
+var VariablesSelection = ({ onSelect }) => {
+  const { setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
+  const handleSetVariable = () => {
+    const value = colorVariablePropTypeUtil.create("");
+    setVariable(value.value);
+    onSelect?.();
+  };
+  return /* @__PURE__ */ React2.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React2.createElement(MenuItem, { onClick: handleSetVariable }, __2("Variables", "elementor")));
+};
+
+// src/utils.ts
+var hasAssignedVariable = (propValue) => {
+  return !!colorVariablePropTypeUtil.isValid(propValue);
+};
+var supportsVariables = (propType) => {
+  return propType.kind === "union" && colorVariablePropTypeUtil.key in propType.prop_types;
+};
+
+// src/hooks/use-prop-variable-action.tsx
+var usePropVariableAction = () => {
+  const { propType } = useBoundProp3();
+  const visible = !!propType && supportsVariables(propType);
+  return {
+    visible,
+    icon: ColorFilterIcon2,
+    title: __3("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover })
+  };
+};
+
+// src/transformers/variable-transformer.ts
+import { createTransformer } from "@elementor/editor-canvas";
+var variableTransformer = createTransformer((value) => {
+  if (!value.trim()) {
+    return null;
+  }
+  return `var(--${value})`;
+});
+
+// src/init.ts
+var { registerPopoverAction } = controlActionsMenu;
+function init() {
+  registerControlReplacement({
+    component: VariablesSelectionControl,
+    condition: ({ value }) => hasAssignedVariable(value)
+  });
+  registerPopoverAction({
+    id: "variables",
+    useProps: usePropVariableAction
+  });
+  styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
+}
+export {
+  init
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/controls/variables-selection-control.tsx","../src/hooks/use-prop-variable-action.tsx","../src/components/variables-selection.tsx","../src/prop-types/color-variable-prop-type.ts","../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';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\n\tconst value = '#FF7BE5';\n\tconst label = 'Light Fuchsia Pink';\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\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\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<StyledUnstableColorIndicator 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</Box>\n\t);\n};\n\nconst StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\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 * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { Box, MenuItem } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst handleSetVariable = () => {\n\t\tconst value = colorVariablePropTypeUtil.create( '' );\n\n\t\tsetVariable( value.value );\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t<MenuItem onClick={ handleSetVariable }>{ __( 'Variables', 'elementor' ) }</MenuItem>\n\t\t</Box>\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 { 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","ColorFilterIcon","__","React","useBoundProp","Box","__","useBoundProp","Box","__","useBoundProp","ColorFilterIcon","__"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@elementor/editor-variables",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-variables"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor-editing-panel": "1.30.0",
+    "@elementor/editor-canvas": "0.19.0",
+    "@elementor/editor-props": "0.12.0",
+    "@elementor/schema": "0.1.2",
+    "@elementor/editor-controls": "0.27.0",
+    "@elementor/icons": "1.37.0",
+    "@wordpress/i18n": "^5.13.0",
+    "@elementor/ui": "1.33.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  }
+}

package/src/components/variables-selection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { Box, MenuItem } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+
+type Props = {
+	onSelect?: () => void;
+};
+
+export const VariablesSelection = ( { onSelect }: Props ) => {
+	const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
+
+	const handleSetVariable = () => {
+		const value = colorVariablePropTypeUtil.create( '' );
+
+		setVariable( value.value );
+		onSelect?.();
+	};
+
+	return (
+		<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+			<MenuItem onClick={ handleSetVariable }>{ __( 'Variables', 'elementor' ) }</MenuItem>
+		</Box>
+	);
+};

package/src/controls/variables-selection-control.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { ColorFilterIcon, DetachIcon } from '@elementor/icons';
+import { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const VariablesSelectionControl = () => {
+	const { setValue } = useBoundProp();
+
+	const value = '#FF7BE5';
+	const label = 'Light Fuchsia Pink';
+
+	const unlinkVariable = () => {
+		setValue( null );
+	};
+
+	return (
+		<Box>
+			<Tag
+				fullWidth
+				showActionsOnHover
+				startIcon={
+					<Stack spacing={ 1 } direction="row" alignItems="center">
+						<StyledUnstableColorIndicator size="inherit" component="span" value={ value } />
+						<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
+					</Stack>
+				}
+				label={
+					<Box sx={ { display: 'inline-grid' } }>
+						<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant="subtitle2">
+							{ label }
+						</Typography>
+					</Box>
+				}
+				actions={
+					<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
+						<DetachIcon fontSize={ 'tiny' } />
+					</IconButton>
+				}
+			/>
+		</Box>
+	);
+};
+
+const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );

package/src/hooks/use-prop-variable-action.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
+import { ColorFilterIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { VariablesSelection } from '../components/variables-selection';
+import { supportsVariables } from '../utils';
+
+export const usePropVariableAction = (): PopoverActionProps => {
+	const { propType } = useBoundProp();
+
+	const visible = !! propType && supportsVariables( propType );
+
+	return {
+		visible,
+		icon: ColorFilterIcon,
+		title: __( 'Variables', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,
+	};
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { init } from './init';

package/src/init.ts

@@ -0,0 +1,24 @@
+import { styleTransformersRegistry } from '@elementor/editor-canvas';
+import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
+
+import { VariablesSelectionControl } from './controls/variables-selection-control';
+import { usePropVariableAction } from './hooks/use-prop-variable-action';
+import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { variableTransformer } from './transformers/variable-transformer';
+import { hasAssignedVariable } from './utils';
+
+const { registerPopoverAction } = controlActionsMenu;
+
+export function init() {
+	registerControlReplacement( {
+		component: VariablesSelectionControl,
+		condition: ( { value } ) => hasAssignedVariable( value ),
+	} );
+
+	registerPopoverAction( {
+		id: 'variables',
+		useProps: usePropVariableAction,
+	} );
+
+	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
+}

package/src/prop-types/color-variable-prop-type.ts

@@ -0,0 +1,4 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );

package/src/transformers/variable-transformer.ts

@@ -0,0 +1,9 @@
+import { createTransformer } from '@elementor/editor-canvas';
+
+export const variableTransformer = createTransformer( ( value: string ) => {
+	if ( ! value.trim() ) {
+		return null;
+	}
+
+	return `var(--${ value })`;
+} );

package/src/utils.ts

@@ -0,0 +1,11 @@
+import { type PropType, type PropValue } from '@elementor/editor-props';
+
+import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+
+export const hasAssignedVariable = ( propValue: PropValue ): boolean => {
+	return !! colorVariablePropTypeUtil.isValid( propValue );
+};
+
+export const supportsVariables = ( propType: PropType ): boolean => {
+	return propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;
+};