npm - @elementor/editor-variables - Versions diffs - 0.2.0 → 0.3.1 - Mend

@elementor/editor-variables 0.2.0 → 0.3.1

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 (7) hide show

package/CHANGELOG.md +23 -0
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/index.mjs +1 -1
package/dist/index.mjs.map +1 -1
package/package.json +4 -4
package/src/hooks/use-prop-variables.ts +2 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,28 @@
 # @elementor/editor-variables
+## 0.3.1
+### Patch Changes
+- Updated dependencies [a1d7b3b]
+  - @elementor/editor-editing-panel@1.33.0
+  - @elementor/editor-controls@0.28.2
+  - @elementor/editor-canvas@0.20.1
+## 0.3.0
+### Minor Changes
+- e038e2f: temporary solution to sync the list of variables from the server
+### Patch Changes
+- Updated dependencies [7daaa99]
+- Updated dependencies [6984b75]
+  - @elementor/editor-controls@0.28.1
+  - @elementor/editor-editing-panel@1.32.0
+  - @elementor/editor-canvas@0.20.0
 ## 0.2.0
 ### Minor Changes

package/dist/index.js CHANGED Viewed

@@ -73,7 +73,7 @@ var normalizeVariables = () => {
     value
   }));
 };
-var variables = {
+var variables = window?.ElementorV4Variables ?? {
   "e-gc-001": {
     value: "#ffffff",
     label: "Main: white"

package/dist/index.js.map CHANGED Viewed

	@@ -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\nconst variables: Record< string, { value: string; label: string } > = {\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.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"]}

package/dist/index.mjs CHANGED Viewed

@@ -37,7 +37,7 @@ var normalizeVariables = () => {
     value
   }));
 };
-var variables = {
+var variables = window?.ElementorV4Variables ?? {
   "e-gc-001": {
     value: "#ffffff",
     label: "Main: white"

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +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\nconst variables: Record< string, { value: string; label: string } > = {\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","__"]}
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","__"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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.31.0",
-    "@elementor/editor-canvas": "0.19.1",
+    "@elementor/editor-editing-panel": "1.33.0",
+    "@elementor/editor-canvas": "0.20.1",
     "@elementor/editor-props": "0.12.0",
     "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "0.28.0",
+    "@elementor/editor-controls": "0.28.2",
     "@elementor/icons": "1.40.1",
     "@wordpress/i18n": "^5.13.0",
     "@elementor/ui": "1.34.2"

package/src/hooks/use-prop-variables.ts CHANGED Viewed

@@ -29,7 +29,8 @@ const normalizeVariables = () => {
 	} ) );
 };
-const variables: Record< string, { value: string; label: string } > = {
+// @ts-expect-error the temporary solution to get the list of variables from the server
+const variables: Record< string, { value: string; label: string } > = window?.ElementorV4Variables ?? {
 	'e-gc-001': {
 		value: '#ffffff',
 		label: 'Main: white',