@elementor/editor-variables 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/dist/index.js +918 -332
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +961 -329
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +10 -9
  7. package/src/components/color-variable-creation.tsx +65 -64
  8. package/src/components/color-variable-edit.tsx +117 -0
  9. package/src/components/color-variables-selection.tsx +98 -52
  10. package/src/components/font-variable-creation.tsx +143 -0
  11. package/src/components/font-variable-edit.tsx +146 -0
  12. package/src/components/font-variables-selection.tsx +97 -51
  13. package/src/components/ui/menu-item-content.tsx +51 -0
  14. package/src/components/ui/no-search-results.tsx +38 -0
  15. package/src/components/ui/no-variables.tsx +35 -0
  16. package/src/components/ui/styled-menu-list.tsx +31 -0
  17. package/src/components/variable-selection-popover.tsx +133 -0
  18. package/src/components/variables-repeater-item-slot.tsx +29 -0
  19. package/src/controls/color-variable-control.tsx +90 -0
  20. package/src/controls/font-variable-control.tsx +88 -0
  21. package/src/create-style-variables-repository.ts +3 -2
  22. package/src/hooks/use-prop-color-variable-action.tsx +7 -2
  23. package/src/hooks/use-prop-font-variable-action.tsx +7 -2
  24. package/src/hooks/use-prop-variables.ts +31 -4
  25. package/src/init-color-variables.ts +51 -3
  26. package/src/init-font-variables.ts +2 -2
  27. package/src/service.ts +23 -3
  28. package/src/storage.ts +5 -1
  29. package/src/types.ts +12 -8
  30. package/src/components/styled-menu-item.tsx +0 -10
  31. package/src/components/variables-selection-popover.tsx +0 -106
  32. package/src/controls/color-variables-selection-control.tsx +0 -34
  33. package/src/controls/font-variables-selection-control.tsx +0 -29
  34. /package/src/components/{color-indicator.tsx → ui/color-indicator.tsx} +0 -0
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/init.ts","../src/init-color-variables.ts","../src/controls/color-variables-selection-control.tsx","../src/components/color-indicator.tsx","../src/components/color-variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/api.ts","../src/storage.ts","../src/service.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/styled-menu-item.tsx","../src/components/variables-selection-popover.tsx","../src/components/color-variable-creation.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/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';\nimport { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedColorVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initColorVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: ColorVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedColorVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'color-variables',\n\t\tuseProps: usePropColorVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { colorPropTypeUtil } from '@elementor/editor-props';\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 selectedVariable = useVariable( variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( colorPropTypeUtil.create( selectedVariable.value ) );\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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\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 normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\t\treturn id;\n\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) || '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tthis.state.variables = variables;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\n};\n","import { type StyleVariables, type Variables, type VariableValue } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {\n\t\treturn ! ( key in variables ) || variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\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, useRef } from 'react';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorVariableCreation } from './color-variable-creation';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n\tstartTagAdornment?: React.ReactNode;\n};\n\nconst SIZE = 'tiny';\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\tconst creationPopupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-creation-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst handleCreateButtonClick = ( event: React.MouseEvent ) => {\n\t\tclosePopover();\n\t\tbindTrigger( creationPopupState ).onClick( event );\n\t};\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\tconst { label } = selectedVariable;\n\n\tconst colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\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={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ SIZE } />\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\t{ ...bindPopover( popupState ) }\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t>\n\t\t\t\t<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Variables', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <ColorFilterIcon fontSize={ SIZE } /> }\n\t\t\t\t\tactions={ [\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tkey=\"createVariable\"\n\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\tsize={ SIZE }\n\t\t\t\t\t\t\tonClick={ handleCreateButtonClick }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t\t{ children?.( { closePopover } ) }\n\t\t\t</Popover>\n\n\t\t\t{ colorCreationEnabled && <ColorVariableCreation popupState={ creationPopupState } /> }\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { BrushIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tBox,\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tPopover,\n\ttype PopupState,\n\tStack,\n\tTextField,\n\tUnstableColorField,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { createVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nconst SIZE = 'tiny';\n\nexport const ColorVariableCreation = ( { popupState }: { popupState: PopupState } ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst [ color, setColor ] = useState( '' );\n\tconst [ label, setLabel ] = useState( '' );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst resetFields = () => {\n\t\tsetColor( '' );\n\t\tsetLabel( '' );\n\t};\n\n\tconst closePopover = () => {\n\t\tresetFields();\n\t\tpopupState.close();\n\t};\n\n\tconst handleCreate = () => {\n\t\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\n\t};\n\n\tconst isInValidForm = () => {\n\t\treturn ! color?.trim() || ! label?.trim();\n\t};\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\n\t\t\t<Popover\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t>\n\t\t\t\t<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Create variable', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <BrushIcon fontSize={ SIZE } /> }\n\t\t\t\t/>\n\n\t\t\t\t<Divider />\n\n\t\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Name', 'elementor' ) }</FormLabel>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Grid>\n\n\t\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Value', 'elementor' ) }</FormLabel>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<UnstableColorField\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\t\t\tonChange={ setColor }\n\t\t\t\t\t\t\t\tslotProps={ {\n\t\t\t\t\t\t\t\t\tcolorPicker: {\n\t\t\t\t\t\t\t\t\t\tanchorEl: anchorRef.current,\n\t\t\t\t\t\t\t\t\t\tanchorOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t\t\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: -10 },\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/>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Stack>\n\n\t\t\t\t<CardActions>\n\t\t\t\t\t<Button size=\"small\" onClick={ closePopover } color=\"secondary\" variant=\"text\">\n\t\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isInValidForm() } onClick={ handleCreate }>\n\t\t\t\t\t\t{ __( 'Create', 'elementor' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardActions>\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';\nimport { stringPropTypeUtil } from '@elementor/editor-props';\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: setFontFamily } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst selectedVariable = useVariable( variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global font variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );\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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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 * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container || ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\n}\n"],"mappings":"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","names":["React","useBoundProp","styled","React","useRef","PopoverHeader","bindPopover","Box","Popover","Stack","__","React","useBoundProp","Box","Divider","useBoundProp","Box","Divider","SIZE","useRef","Box","Stack","__","Popover","bindPopover","PopoverHeader","useBoundProp","React","useBoundProp","ColorFilterIcon","__","createPropUtils","z","useBoundProp","ColorFilterIcon","__","styleTransformersRegistry","controlActionsMenu","registerControlReplacement","React","useBoundProp","React","Fragment","useBoundProp","EditIcon","Box","Divider","ListItemIcon","ListItemText","MenuList","useBoundProp","Fragment","Divider","Box","MenuList","ListItemIcon","ListItemText","EditIcon","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","registerPopoverAction","controlActionsMenu","registerControlReplacement","styleTransformersRegistry","React","useState","useState"]}
1
+ {"version":3,"sources":["../src/init.ts","../src/init-color-variables.ts","../src/components/variables-repeater-item-slot.tsx","../src/hooks/use-prop-variables.ts","../src/api.ts","../src/storage.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.ts","../src/service.ts","../src/components/ui/color-indicator.tsx","../src/controls/color-variable-control.tsx","../src/components/variable-selection-popover.tsx","../src/prop-types/color-variable-prop-type.ts","../src/prop-types/font-variable-prop-type.ts","../src/components/color-variable-creation.tsx","../src/components/color-variable-edit.tsx","../src/components/color-variables-selection.tsx","../src/components/ui/menu-item-content.tsx","../src/components/ui/no-search-results.tsx","../src/components/ui/no-variables.tsx","../src/components/ui/styled-menu-list.tsx","../src/components/font-variable-creation.tsx","../src/components/font-variable-edit.tsx","../src/components/font-variables-selection.tsx","../src/hooks/use-prop-color-variable-action.tsx","../src/utils.ts","../src/transformers/variable-transformer.ts","../src/init-font-variables.ts","../src/controls/font-variable-control.tsx","../src/hooks/use-prop-font-variable-action.tsx","../src/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\nimport { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';\n\nimport {\n\tBackgroundRepeaterColorIndicator,\n\tBackgroundRepeaterLabel,\n\tBoxShadowRepeaterColorIndicator,\n} from './components/variables-repeater-item-slot';\nimport { ColorVariableControl } from './controls/color-variable-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\nconst conditions = {\n\tbackgroundOverlay: ( { value: prop }: { value: PropValue } ) => {\n\t\treturn hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );\n\t},\n\n\tboxShadow: ( { value: prop }: { value: PropValue } ) => {\n\t\treturn hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );\n\t},\n};\n\nfunction registerControlsAndActions() {\n\tregisterControlReplacement( {\n\t\tcomponent: ColorVariableControl,\n\t\tcondition: ( { value } ) => hasAssignedColorVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'color-variables',\n\t\tuseProps: usePropColorVariableAction,\n\t} );\n}\n\nfunction registerRepeaterItemIcons() {\n\tinjectIntoRepeaterItemIcon( {\n\t\tid: 'color-variables-background-icon',\n\t\tcomponent: BackgroundRepeaterColorIndicator,\n\t\tcondition: conditions.backgroundOverlay,\n\t} );\n\n\tinjectIntoRepeaterItemIcon( {\n\t\tid: 'color-variables-icon',\n\t\tcomponent: BoxShadowRepeaterColorIndicator,\n\t\tcondition: conditions.boxShadow,\n\t} );\n}\n\nfunction registerRepeaterItemLabels() {\n\tinjectIntoRepeaterItemLabel( {\n\t\tid: 'color-variables-label',\n\t\tcomponent: BackgroundRepeaterLabel,\n\t\tcondition: conditions.backgroundOverlay,\n\t} );\n}\n\nfunction registerStyleTransformers() {\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n\nexport function initColorVariables() {\n\tregisterControlsAndActions();\n\tregisterRepeaterItemIcons();\n\tregisterRepeaterItemLabels();\n\tregisterStyleTransformers();\n}\n","import * as React from 'react';\nimport { type BackgroundColorOverlayPropValue, type BoxShadowPropValue, type PropValue } from '@elementor/editor-props';\n\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { ColorIndicator } from './ui/color-indicator';\n\nconst useColorVariable = ( value: BackgroundColorOverlayPropValue | BoxShadowPropValue ) => {\n\tconst variableId = value?.value?.color?.value;\n\n\treturn useVariable( variableId || '' );\n};\n\nexport const BackgroundRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {\n\tconst colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );\n\n\treturn <ColorIndicator component=\"span\" size=\"inherit\" value={ colorVariable?.value } />;\n};\n\nexport const BackgroundRepeaterLabel = ( { value }: { value: PropValue } ) => {\n\tconst colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );\n\n\treturn <span>{ colorVariable?.label }</span>;\n};\n\nexport const BoxShadowRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {\n\tconst colorVariable = useColorVariable( value as BoxShadowPropValue );\n\n\treturn <ColorIndicator component=\"span\" size=\"inherit\" value={ colorVariable?.value } />;\n};\n","import { useMemo } from 'react';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\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\nexport const useFilteredVariables = ( searchValue: string, propTypeKey: string ) => {\n\tconst variables = usePropVariables( propTypeKey );\n\n\tconst filteredVariables = variables.filter( ( { label } ) => {\n\t\treturn label.toLowerCase().includes( searchValue.toLowerCase() );\n\t} );\n\n\treturn {\n\t\tlist: filteredVariables,\n\t\thasMatches: filteredVariables.length > 0,\n\t\tisSourceNotEmpty: variables.length > 0,\n\t};\n};\n\nconst usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nconst normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\n\t\treturn id;\n\t} );\n};\n\nexport const updateVariable = ( updateId: string, { value, label }: { value: string; label: string } ) => {\n\treturn service\n\t\t.update( updateId, { value, label } )\n\t\t.then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\t\tstyleVariablesRepository.update( {\n\t\t\t\t[ id ]: variable,\n\t\t\t} );\n\n\t\t\treturn id;\n\t\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) || '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.variables = {};\n\t\tif ( variables && Object.keys( variables ).length ) {\n\t\t\tthis.state.variables = variables;\n\t\t}\n\n\t\tthis.state.watermark = watermark;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { type StyleVariables, type Variable } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\ntype Variables = Record< string, Variable >;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: string ): boolean => {\n\t\treturn ! ( key in variables ) || variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariablesList } from './storage';\nimport { styleVariablesRepository } from './style-variables-repository';\nimport { type Variable } from './types';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\tstyleVariablesRepository.update( variables );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: Variable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\tstyleVariablesRepository.update( {\n\t\t\t\t\t[ variableId ]: createdVariable,\n\t\t\t\t} );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: Omit< Variable, 'type' > ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\tstyleVariablesRepository.update( {\n\t\t\t\t\t[ variableId ]: updatedVariable,\n\t\t\t\t} );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\tstyleVariablesRepository.update( {\n\t\t\t\t\t[ variableId ]: deletedVariable,\n\t\t\t\t} );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\tstyleVariablesRepository.update( {\n\t\t\t\t\t[ variableId ]: restoredVariable,\n\t\t\t\t} );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\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 { useId, useRef } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { colorPropTypeUtil } from '@elementor/editor-props';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { ColorIndicator } from '../components/ui/color-indicator';\nimport { VariableSelectionPopover } from '../components/variable-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nconst SIZE = 'tiny';\n\nexport const ColorVariableControl = () => {\n\tconst { setValue: setColor } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst popupId = useId();\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tpopupId: `elementor-variables-list-${ popupId }`,\n\t} );\n\n\tconst selectedVariable = useVariable( variableValue );\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetColor( colorPropTypeUtil.create( selectedVariable.value ) );\n\t};\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\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={ 0.75 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<ColorIndicator size=\"inherit\" value={ selectedVariable.value } component=\"span\" />\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', minWidth: 0 } }>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tsx={ { textOverflow: 'ellipsis', overflowX: 'hidden', lineHeight: 1 } }\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ selectedVariable.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={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ SIZE } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<VariableSelectionPopover\n\t\t\t\t\tselectedVariable={ selectedVariable }\n\t\t\t\t\tclosePopover={ popupState.close }\n\t\t\t\t\tpropTypeKey={ colorVariablePropTypeUtil.key }\n\t\t\t\t/>\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorVariableCreation } from './color-variable-creation';\nimport { ColorVariableEdit } from './color-variable-edit';\nimport { ColorVariablesSelection } from './color-variables-selection';\nimport { FontVariableCreation } from './font-variable-creation';\nimport { FontVariableEdit } from './font-variable-edit';\nimport { FontVariablesSelection } from './font-variables-selection';\n\nconst VIEW_LIST = 'list';\nconst VIEW_ADD = 'add';\nconst VIEW_EDIT = 'edit';\n\ntype View = typeof VIEW_LIST | typeof VIEW_ADD | typeof VIEW_EDIT;\n\ntype Props = {\n\tclosePopover: () => void;\n\tpropTypeKey: string;\n\tselectedVariable?: Variable;\n};\n\nexport const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {\n\tconst [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );\n\tconst editIdRef = useRef< string >( '' );\n\n\treturn renderStage( {\n\t\tpropTypeKey,\n\t\tcurrentView,\n\t\tselectedVariable,\n\t\teditIdRef,\n\t\tsetCurrentView,\n\t\tclosePopover,\n\t} );\n};\n\ntype StageProps = {\n\tpropTypeKey: string;\n\tcurrentView: View;\n\tselectedVariable?: Variable;\n\teditIdRef: React.MutableRefObject< string >;\n\tsetCurrentView: ( stage: View ) => void;\n\tclosePopover: () => void;\n};\n\nfunction renderStage( props: StageProps ): React.ReactNode {\n\tconst handleSubmitOnEdit = () => {\n\t\tif ( props?.selectedVariable?.key === props.editIdRef.current ) {\n\t\t\tprops.closePopover();\n\t\t} else {\n\t\t\tprops.setCurrentView( VIEW_LIST );\n\t\t}\n\t};\n\n\tif ( fontVariablePropTypeUtil.key === props.propTypeKey ) {\n\t\tif ( VIEW_LIST === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<FontVariablesSelection\n\t\t\t\t\tclosePopover={ props.closePopover }\n\t\t\t\t\tonAdd={ () => {\n\t\t\t\t\t\tprops.setCurrentView( VIEW_ADD );\n\t\t\t\t\t} }\n\t\t\t\t\tonEdit={ ( key ) => {\n\t\t\t\t\t\tprops.editIdRef.current = key;\n\t\t\t\t\t\tprops.setCurrentView( VIEW_EDIT );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( VIEW_ADD === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<FontVariableCreation\n\t\t\t\t\tonGoBack={ () => props.setCurrentView( VIEW_LIST ) }\n\t\t\t\t\tonClose={ props.closePopover }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( VIEW_EDIT === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<FontVariableEdit\n\t\t\t\t\teditId={ props.editIdRef.current ?? '' }\n\t\t\t\t\tonGoBack={ () => props.setCurrentView( VIEW_LIST ) }\n\t\t\t\t\tonClose={ props.closePopover }\n\t\t\t\t\tonSubmit={ handleSubmitOnEdit }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( colorVariablePropTypeUtil.key === props.propTypeKey ) {\n\t\tif ( VIEW_LIST === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<ColorVariablesSelection\n\t\t\t\t\tclosePopover={ props.closePopover }\n\t\t\t\t\tonAdd={ () => {\n\t\t\t\t\t\tprops.setCurrentView( VIEW_ADD );\n\t\t\t\t\t} }\n\t\t\t\t\tonEdit={ ( key ) => {\n\t\t\t\t\t\tprops.editIdRef.current = key;\n\t\t\t\t\t\tprops.setCurrentView( VIEW_EDIT );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( VIEW_ADD === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<ColorVariableCreation\n\t\t\t\t\tonGoBack={ () => props.setCurrentView( VIEW_LIST ) }\n\t\t\t\t\tonClose={ props.closePopover }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( VIEW_EDIT === props.currentView ) {\n\t\t\treturn (\n\t\t\t\t<ColorVariableEdit\n\t\t\t\t\teditId={ props.editIdRef.current ?? '' }\n\t\t\t\t\tonGoBack={ () => props.setCurrentView( VIEW_LIST ) }\n\t\t\t\t\tonClose={ props.closePopover }\n\t\t\t\t\tonSubmit={ handleSubmitOnEdit }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t}\n\n\treturn null;\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 { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const fontVariablePropTypeUtil = createPropUtils( 'global-font-variable', z.string() );\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { ArrowLeftIcon, BrushIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tIconButton,\n\tStack,\n\tTextField,\n\tUnstableColorField,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { createVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tonGoBack?: () => void;\n\tonClose: () => void;\n};\n\nexport const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst [ color, setColor ] = useState( '' );\n\tconst [ label, setLabel ] = useState( '' );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst resetFields = () => {\n\t\tsetColor( '' );\n\t\tsetLabel( '' );\n\t};\n\n\tconst closePopover = () => {\n\t\tresetFields();\n\t\tonClose();\n\t};\n\n\tconst handleCreate = () => {\n\t\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\n\t};\n\n\tconst isFormInvalid = () => {\n\t\treturn ! color?.trim() || ! label?.trim();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ticon={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ onGoBack && (\n\t\t\t\t\t\t\t<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>\n\t\t\t\t\t\t\t\t<ArrowLeftIcon fontSize={ SIZE } />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<BrushIcon fontSize={ SIZE } />\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\ttitle={ __( 'Create variable', 'elementor' ) }\n\t\t\t\tonClose={ closePopover }\n\t\t\t/>\n\n\t\t\t<Divider />\n\n\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Name', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Value', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<UnstableColorField\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\t\tonChange={ setColor }\n\t\t\t\t\t\t\tslotProps={ {\n\t\t\t\t\t\t\t\tcolorPicker: {\n\t\t\t\t\t\t\t\t\tanchorEl: anchorRef.current,\n\t\t\t\t\t\t\t\t\tanchorOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: -10 },\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\t\t\t</Stack>\n\n\t\t\t<CardActions>\n\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isFormInvalid() } onClick={ handleCreate }>\n\t\t\t\t\t{ __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardActions>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { ArrowLeftIcon, BrushIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tIconButton,\n\tStack,\n\tTextField,\n\tUnstableColorField,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { updateVariable, useVariable } from '../hooks/use-prop-variables';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\teditId: string;\n\tonClose: () => void;\n\tonGoBack?: () => void;\n\tonSubmit?: () => void;\n};\n\nexport const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {\n\tconst variable = useVariable( editId );\n\n\tif ( ! variable ) {\n\t\tthrow new Error( `Global color variable not found` );\n\t}\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst [ color, setColor ] = useState( variable.value );\n\tconst [ label, setLabel ] = useState( variable.label );\n\n\tconst handleUpdate = () => {\n\t\tupdateVariable( editId, {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t} ).then( () => {\n\t\t\tonSubmit?.();\n\t\t} );\n\t};\n\n\tconst noValueChanged = () => color === variable.value && label === variable.label;\n\tconst hasEmptyValue = () => '' === color.trim() || '' === label.trim();\n\tconst isSaveDisabled = () => noValueChanged() || hasEmptyValue();\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ttitle={ __( 'Edit variable', 'elementor' ) }\n\t\t\t\tonClose={ onClose }\n\t\t\t\ticon={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ onGoBack && (\n\t\t\t\t\t\t\t<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>\n\t\t\t\t\t\t\t\t<ArrowLeftIcon fontSize={ SIZE } />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<BrushIcon fontSize={ SIZE } />\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\n\t\t\t<Divider />\n\n\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Name', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Value', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<UnstableColorField\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\t\tonChange={ setColor }\n\t\t\t\t\t\t\tslotProps={ {\n\t\t\t\t\t\t\t\tcolorPicker: {\n\t\t\t\t\t\t\t\t\tanchorEl: anchorRef.current,\n\t\t\t\t\t\t\t\t\tanchorOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: -10 },\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\t\t\t</Stack>\n\n\t\t\t<CardActions>\n\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isSaveDisabled() } onClick={ handleUpdate }>\n\t\t\t\t\t{ __( 'Save', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardActions>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';\nimport { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';\nimport { Divider, IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useFilteredVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type ExtendedVirtualizedItem } from '../types';\nimport { ColorIndicator } from './ui/color-indicator';\nimport { MenuItemContent } from './ui/menu-item-content';\nimport { NoSearchResults } from './ui/no-search-results';\nimport { NoVariables } from './ui/no-variables';\nimport { VariablesStyledMenuList } from './ui/styled-menu-list';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tclosePopover: () => void;\n\tonAdd?: () => void;\n\tonEdit?: ( key: string ) => void;\n\tonSettings?: () => void;\n};\n\nexport const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\n\tconst {\n\t\tlist: variables,\n\t\thasMatches: hasSearchResults,\n\t\tisSourceNotEmpty: hasVariables,\n\t} = useFilteredVariables( searchValue, colorVariablePropTypeUtil.key );\n\n\tconst handleSetColorVariable = ( key: string ) => {\n\t\tsetVariable( key );\n\t\tclosePopover();\n\t};\n\n\tconst actions = [];\n\n\tif ( onAdd ) {\n\t\tactions.push(\n\t\t\t<IconButton key=\"add\" size={ SIZE } onClick={ onAdd }>\n\t\t\t\t<PlusIcon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t);\n\t}\n\n\tif ( onSettings ) {\n\t\tactions.push(\n\t\t\t<IconButton key=\"settings\" size={ SIZE } onClick={ onSettings }>\n\t\t\t\t<SettingsIcon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t);\n\t}\n\n\tconst items: ExtendedVirtualizedItem[] = variables.map( ( { value, label, key } ) => ( {\n\t\ttype: 'item' as const,\n\t\tvalue: key,\n\t\tlabel,\n\t\ticon: <ColorIndicator size=\"inherit\" component=\"span\" value={ value } />,\n\t\tsecondaryText: value,\n\t\tonEdit: () => onEdit?.( key ),\n\t} ) );\n\n\tconst handleSearch = ( search: string ) => {\n\t\tsetSearchValue( search );\n\t};\n\n\tconst handleClearSearch = () => {\n\t\tsetSearchValue( '' );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ttitle={ __( 'Variables', 'elementor' ) }\n\t\t\t\ticon={ <ColorFilterIcon fontSize={ SIZE } /> }\n\t\t\t\tonClose={ closePopover }\n\t\t\t\tactions={ actions }\n\t\t\t/>\n\n\t\t\t{ hasVariables && (\n\t\t\t\t<PopoverSearch\n\t\t\t\t\tvalue={ searchValue }\n\t\t\t\t\tonSearch={ handleSearch }\n\t\t\t\t\tplaceholder={ __( 'Search', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<Divider />\n\n\t\t\t{ hasVariables && hasSearchResults && (\n\t\t\t\t<PopoverMenuList< 'item', string >\n\t\t\t\t\titems={ items }\n\t\t\t\t\tonSelect={ handleSetColorVariable }\n\t\t\t\t\tonClose={ () => {} }\n\t\t\t\t\tselectedValue={ variable }\n\t\t\t\t\tdata-testid=\"color-variables-list\"\n\t\t\t\t\tmenuListTemplate={ VariablesStyledMenuList }\n\t\t\t\t\tmenuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (\n\t\t\t\t\t\t<MenuItemContent item={ item } />\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! hasSearchResults && hasVariables && (\n\t\t\t\t<NoSearchResults searchValue={ searchValue } onClear={ handleClearSearch } />\n\t\t\t) }\n\n\t\t\t{ ! hasVariables && <NoVariables icon={ <ColorFilterIcon fontSize=\"large\" /> } onAdd={ onAdd } /> }\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport type { VirtualizedItem } from '@elementor/editor-ui';\nimport { EditIcon } from '@elementor/icons';\nimport { IconButton, ListItemIcon, ListItemText } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst SIZE = 'tiny';\n\nexport const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {\n\tconst onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;\n\n\treturn (\n\t\t<>\n\t\t\t<ListItemIcon>{ item.icon }</ListItemIcon>\n\t\t\t<ListItemText\n\t\t\t\tprimary={ item.label || item.value }\n\t\t\t\tsecondary={ item.secondaryText }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t},\n\t\t\t\t} }\n\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t} }\n\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t/>\n\t\t\t{ !! onEdit && (\n\t\t\t\t<IconButton\n\t\t\t\t\tsx={ { mx: 1, opacity: '0' } }\n\t\t\t\t\tonClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tonEdit( item.value );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ __( 'Edit', 'elementor' ) }\n\t\t\t\t>\n\t\t\t\t\t<EditIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t</IconButton>\n\t\t\t) }\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { Link, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype Props = {\n\tsearchValue: string;\n\tonClear?: () => void;\n};\n\nexport const NoSearchResults = ( { searchValue, onClear }: Props ) => {\n\treturn (\n\t\t<Stack\n\t\t\tgap={ 1 }\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tcolor=\"text.secondary\"\n\t\t\tsx={ { p: 2.5, pb: 5.5 } }\n\t\t>\n\t\t\t<ColorFilterIcon fontSize=\"large\" />\n\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t\t{ __( 'Sorry, nothing matched', 'elementor' ) }\n\t\t\t\t<br />\n\t\t\t\t&ldquo;{ searchValue }&rdquo;.\n\t\t\t</Typography>\n\n\t\t\t<Typography align=\"center\" variant=\"caption\">\n\t\t\t\t{ __( 'Try something else.', 'elementor' ) }\n\t\t\t\t<br />\n\t\t\t\t<Link color=\"text.secondary\" variant=\"caption\" component=\"button\" onClick={ onClear }>\n\t\t\t\t\t{ __( 'Clear & try again', 'elementor' ) }\n\t\t\t\t</Link>\n\t\t\t</Typography>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Button, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype Props = {\n\ticon?: React.ReactNode;\n\tonAdd?: () => void;\n};\n\nexport const NoVariables = ( { icon, onAdd }: Props ) => (\n\t<Stack\n\t\tgap={ 1 }\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"center\"\n\t\theight=\"100%\"\n\t\tcolor=\"text.secondary\"\n\t\tsx={ { p: 2.5, pb: 5.5 } }\n\t>\n\t\t{ icon }\n\n\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t{ __( 'Create your first variable', 'elementor' ) }\n\t\t</Typography>\n\n\t\t<Typography align=\"center\" variant=\"caption\" maxWidth=\"180px\">\n\t\t\t{ __( 'Variables are saved attributes that you can apply anywhere on your site.', 'elementor' ) }\n\t\t</Typography>\n\n\t\t{ onAdd && (\n\t\t\t<Button variant=\"outlined\" color=\"secondary\" size=\"small\" onClick={ onAdd }>\n\t\t\t\t{ __( 'Create a variable', 'elementor' ) }\n\t\t\t</Button>\n\t\t) }\n\t</Stack>\n);\n","import { MenuList, styled } from '@elementor/ui';\n\nexport const VariablesStyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: 32,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.5, 1, 0.5, 2 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t\t'&:hover .MuiIconButton-root, .MuiIconButton-root:focus': {\n\t\t\topacity: 1,\n\t\t},\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { FontFamilySelector, useBoundProp } from '@elementor/editor-controls';\nimport { useFontFamilies } from '@elementor/editor-editing-panel';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { ArrowLeftIcon, ChevronDownIcon, TextIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTextField,\n\tUnstableTag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { createVariable } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tonGoBack?: () => void;\n\tonClose: () => void;\n};\n\nexport const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {\n\tconst fontFamilies = useFontFamilies();\n\tconst { setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst [ fontFamily, setFontFamily ] = useState( '' );\n\tconst [ label, setLabel ] = useState( '' );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\tconst fontPopoverState = usePopupState( { variant: 'popover' } );\n\n\tconst resetFields = () => {\n\t\tsetFontFamily( '' );\n\t\tsetLabel( '' );\n\t};\n\n\tconst closePopover = () => {\n\t\tresetFields();\n\t\tonClose();\n\t};\n\n\tconst handleCreate = () => {\n\t\tcreateVariable( {\n\t\t\tvalue: fontFamily,\n\t\t\tlabel,\n\t\t\ttype: fontVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\n\t};\n\n\tconst isFormInvalid = () => {\n\t\treturn ! fontFamily?.trim() || ! label?.trim();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ticon={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ onGoBack && (\n\t\t\t\t\t\t\t<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>\n\t\t\t\t\t\t\t\t<ArrowLeftIcon fontSize={ SIZE } />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TextIcon fontSize={ SIZE } />\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\ttitle={ __( 'Create variable', 'elementor' ) }\n\t\t\t\tonClose={ closePopover }\n\t\t\t/>\n\n\t\t\t<Divider />\n\n\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Name', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Value', 'elementor' ) }</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<UnstableTag\n\t\t\t\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\t\t\t\tlabel={ fontFamily }\n\t\t\t\t\t\t\t\tendIcon={ <ChevronDownIcon fontSize=\"tiny\" /> }\n\t\t\t\t\t\t\t\t{ ...bindTrigger( fontPopoverState ) }\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Popover\n\t\t\t\t\t\t\t\tdisablePortal\n\t\t\t\t\t\t\t\tdisableScrollLock\n\t\t\t\t\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\t\t\t\t\tanchorOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t\t\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: -20 } }\n\t\t\t\t\t\t\t\t{ ...bindPopover( fontPopoverState ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FontFamilySelector\n\t\t\t\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\t\t\t\tfontFamily={ fontFamily }\n\t\t\t\t\t\t\t\t\tonFontFamilyChange={ setFontFamily }\n\t\t\t\t\t\t\t\t\tonClose={ fontPopoverState.close }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Popover>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\t\t\t</Stack>\n\n\t\t\t<CardActions>\n\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isFormInvalid() } onClick={ handleCreate }>\n\t\t\t\t\t{ __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardActions>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useId, useRef, useState } from 'react';\nimport { FontFamilySelector } from '@elementor/editor-controls';\nimport { useFontFamilies } from '@elementor/editor-editing-panel';\nimport { PopoverHeader } from '@elementor/editor-ui';\nimport { ArrowLeftIcon, ChevronDownIcon, TextIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTextField,\n\tUnstableTag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { updateVariable, useVariable } from '../hooks/use-prop-variables';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\teditId: string;\n\tonClose: () => void;\n\tonGoBack?: () => void;\n\tonSubmit?: () => void;\n};\n\nexport const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {\n\tconst variable = useVariable( editId );\n\n\tif ( ! variable ) {\n\t\tthrow new Error( `Global font variable \"${ editId }\" not found` );\n\t}\n\n\tconst [ fontFamily, setFontFamily ] = useState( variable.value );\n\tconst [ label, setLabel ] = useState( variable.label );\n\n\tconst variableNameId = useId();\n\tconst variableValueId = useId();\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\tconst fontPopoverState = usePopupState( { variant: 'popover' } );\n\n\tconst fontFamilies = useFontFamilies();\n\n\tconst handleUpdate = () => {\n\t\tupdateVariable( editId, {\n\t\t\tvalue: fontFamily,\n\t\t\tlabel,\n\t\t} ).then( () => {\n\t\t\tonSubmit?.();\n\t\t} );\n\t};\n\n\tconst noValueChanged = () => fontFamily === variable.value && label === variable.label;\n\tconst hasEmptyValue = () => '' === fontFamily.trim() || '' === label.trim();\n\tconst isSaveDisabled = () => noValueChanged() || hasEmptyValue();\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ticon={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ onGoBack && (\n\t\t\t\t\t\t\t<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>\n\t\t\t\t\t\t\t\t<ArrowLeftIcon fontSize={ SIZE } />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TextIcon fontSize={ SIZE } />\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\ttitle={ __( 'Edit variable', 'elementor' ) }\n\t\t\t\tonClose={ onClose }\n\t\t\t/>\n\n\t\t\t<Divider />\n\n\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel htmlFor={ variableNameId } size=\"small\">\n\t\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t\t</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\tid={ variableNameId }\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\n\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<FormLabel htmlFor={ variableValueId } size=\"small\">\n\t\t\t\t\t\t\t{ __( 'Value', 'elementor' ) }\n\t\t\t\t\t\t</FormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<UnstableTag\n\t\t\t\t\t\t\t\tid={ variableValueId }\n\t\t\t\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\t\t\t\tlabel={ fontFamily }\n\t\t\t\t\t\t\t\tendIcon={ <ChevronDownIcon fontSize=\"tiny\" /> }\n\t\t\t\t\t\t\t\t{ ...bindTrigger( fontPopoverState ) }\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Popover\n\t\t\t\t\t\t\t\tdisablePortal\n\t\t\t\t\t\t\t\tdisableScrollLock\n\t\t\t\t\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\t\t\t\t\tanchorOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t\t\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: -20 } }\n\t\t\t\t\t\t\t\t{ ...bindPopover( fontPopoverState ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FontFamilySelector\n\t\t\t\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\t\t\t\tfontFamily={ fontFamily }\n\t\t\t\t\t\t\t\t\tonFontFamilyChange={ setFontFamily }\n\t\t\t\t\t\t\t\t\tonClose={ fontPopoverState.close }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Popover>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Grid>\n\t\t\t</Stack>\n\n\t\t\t<CardActions>\n\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isSaveDisabled() } onClick={ handleUpdate }>\n\t\t\t\t\t{ __( 'Save', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardActions>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';\nimport { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';\nimport { Divider, IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useFilteredVariables } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\nimport { type ExtendedVirtualizedItem } from '../types';\nimport { MenuItemContent } from './ui/menu-item-content';\nimport { NoSearchResults } from './ui/no-search-results';\nimport { NoVariables } from './ui/no-variables';\nimport { VariablesStyledMenuList } from './ui/styled-menu-list';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tclosePopover: () => void;\n\tonAdd?: () => void;\n\tonEdit?: ( key: string ) => void;\n\tonSettings?: () => void;\n};\n\nexport const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\n\tconst {\n\t\tlist: variables,\n\t\thasMatches: hasSearchResults,\n\t\tisSourceNotEmpty: hasVariables,\n\t} = useFilteredVariables( searchValue, fontVariablePropTypeUtil.key );\n\n\tconst handleSetVariable = ( key: string ) => {\n\t\tsetVariable( key );\n\t\tclosePopover();\n\t};\n\n\tconst actions = [];\n\n\tif ( onAdd ) {\n\t\tactions.push(\n\t\t\t<IconButton key=\"add\" size={ SIZE } onClick={ onAdd }>\n\t\t\t\t<PlusIcon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t);\n\t}\n\n\tif ( onSettings ) {\n\t\tactions.push(\n\t\t\t<IconButton key=\"settings\" size={ SIZE } onClick={ onSettings }>\n\t\t\t\t<SettingsIcon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t);\n\t}\n\n\tconst items: ExtendedVirtualizedItem[] = variables.map( ( { value, label, key } ) => ( {\n\t\ttype: 'item' as const,\n\t\tvalue: key,\n\t\tlabel,\n\t\ticon: <TextIcon />,\n\t\tsecondaryText: value,\n\t\tonEdit: () => onEdit?.( key ),\n\t} ) );\n\n\tconst handleSearch = ( search: string ) => {\n\t\tsetSearchValue( search );\n\t};\n\n\tconst handleClearSearch = () => {\n\t\tsetSearchValue( '' );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PopoverHeader\n\t\t\t\ttitle={ __( 'Variables', 'elementor' ) }\n\t\t\t\tonClose={ closePopover }\n\t\t\t\ticon={ <ColorFilterIcon fontSize={ SIZE } /> }\n\t\t\t\tactions={ actions }\n\t\t\t/>\n\n\t\t\t{ hasVariables && (\n\t\t\t\t<PopoverSearch\n\t\t\t\t\tvalue={ searchValue }\n\t\t\t\t\tonSearch={ handleSearch }\n\t\t\t\t\tplaceholder={ __( 'Search', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<Divider />\n\n\t\t\t{ hasVariables && hasSearchResults && (\n\t\t\t\t<PopoverMenuList\n\t\t\t\t\titems={ items }\n\t\t\t\t\tonSelect={ handleSetVariable }\n\t\t\t\t\tonClose={ () => {} }\n\t\t\t\t\tselectedValue={ variable }\n\t\t\t\t\tdata-testid=\"font-variables-list\"\n\t\t\t\t\tmenuListTemplate={ VariablesStyledMenuList }\n\t\t\t\t\tmenuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (\n\t\t\t\t\t\t<MenuItemContent item={ item } />\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! hasSearchResults && hasVariables && (\n\t\t\t\t<NoSearchResults searchValue={ searchValue } onClear={ handleClearSearch } />\n\t\t\t) }\n\n\t\t\t{ ! hasVariables && <NoVariables icon={ <TextIcon fontSize=\"large\" /> } onAdd={ onAdd } /> }\n\t\t</>\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 { VariableSelectionPopover } from '../components/variable-selection-popover';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\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\tcontent: ( { close: closePopover } ) => {\n\t\t\treturn (\n\t\t\t\t<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ colorVariablePropTypeUtil.key } />\n\t\t\t);\n\t\t},\n\t};\n};\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 { FontVariableControl } from './controls/font-variable-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: FontVariableControl,\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 { useId, useRef } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { stringPropTypeUtil } from '@elementor/editor-props';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariableSelectionPopover } from '../components/variable-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\n\nconst SIZE = 'tiny';\n\nexport const FontVariableControl = () => {\n\tconst { setValue: setFontFamily } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst popupId = useId();\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tpopupId: `elementor-variables-list-${ popupId }`,\n\t} );\n\n\tconst selectedVariable = useVariable( variableValue );\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global font variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );\n\t};\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\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={ 0.75 } direction=\"row\" alignItems=\"center\">\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', minWidth: 0 } }>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tsx={ { textOverflow: 'ellipsis', overflowX: 'hidden', lineHeight: 1 } }\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ selectedVariable.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={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ SIZE } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<VariableSelectionPopover\n\t\t\t\t\tselectedVariable={ selectedVariable }\n\t\t\t\t\tclosePopover={ popupState.close }\n\t\t\t\t\tpropTypeKey={ fontVariablePropTypeUtil.key }\n\t\t\t\t/>\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 { VariableSelectionPopover } from '../components/variable-selection-popover';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\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\tcontent: ( { close: closePopover } ) => {\n\t\t\treturn (\n\t\t\t\t<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ fontVariablePropTypeUtil.key } />\n\t\t\t);\n\t\t},\n\t};\n};\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container || ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\n}\n"],"mappings":"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","names":["React","useId","useRef","useBoundProp","ColorFilterIcon","bindPopover","bindTrigger","IconButton","Popover","Stack","Typography","usePopupState","__","React","useRef","useState","createPropUtils","z","React","React","useRef","useState","PopoverHeader","ArrowLeftIcon","BrushIcon","Button","CardActions","Divider","FormLabel","Grid","IconButton","Stack","TextField","UnstableColorField","__","SIZE","useRef","useState","PopoverHeader","__","IconButton","ArrowLeftIcon","BrushIcon","Divider","Stack","Grid","FormLabel","TextField","UnstableColorField","CardActions","Button","React","useState","useBoundProp","PopoverHeader","ColorFilterIcon","Divider","IconButton","__","React","IconButton","__","SIZE","React","Stack","__","React","Button","Stack","Typography","__","styled","SIZE","useBoundProp","useState","IconButton","PopoverHeader","__","ColorFilterIcon","Divider","React","useRef","useState","useBoundProp","PopoverHeader","ArrowLeftIcon","Button","CardActions","Divider","FormLabel","Grid","IconButton","Stack","TextField","__","SIZE","useBoundProp","useState","useRef","PopoverHeader","IconButton","__","ArrowLeftIcon","Divider","Stack","Grid","FormLabel","TextField","CardActions","Button","React","useRef","useState","FontFamilySelector","useFontFamilies","PopoverHeader","ArrowLeftIcon","ChevronDownIcon","TextIcon","bindPopover","bindTrigger","Button","CardActions","Divider","FormLabel","Grid","IconButton","Popover","Stack","TextField","UnstableTag","usePopupState","__","SIZE","useState","useRef","usePopupState","useFontFamilies","PopoverHeader","IconButton","__","ArrowLeftIcon","TextIcon","Divider","Stack","Grid","FormLabel","TextField","UnstableTag","ChevronDownIcon","bindTrigger","Popover","bindPopover","FontFamilySelector","CardActions","Button","React","useState","useBoundProp","PopoverHeader","PopoverMenuList","PopoverSearch","ColorFilterIcon","PlusIcon","SettingsIcon","TextIcon","Divider","IconButton","__","SIZE","useBoundProp","useState","IconButton","PlusIcon","SettingsIcon","TextIcon","PopoverHeader","__","ColorFilterIcon","PopoverSearch","Divider","PopoverMenuList","useState","useRef","SIZE","useBoundProp","useRef","useId","usePopupState","Stack","ColorFilterIcon","Typography","IconButton","__","bindTrigger","Popover","bindPopover","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","styleTransformersRegistry","controlActionsMenu","registerControlReplacement","React","useId","useRef","useBoundProp","ColorFilterIcon","DetachIcon","bindPopover","bindTrigger","Box","IconButton","Popover","Stack","Typography","Tag","usePopupState","__","SIZE","useBoundProp","useRef","useId","usePopupState","Box","Tag","Stack","ColorFilterIcon","Typography","IconButton","__","DetachIcon","bindTrigger","Popover","bindPopover","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","registerPopoverAction","controlActionsMenu","registerControlReplacement","styleTransformersRegistry","React","useState","useState"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-variables",
3
- "version": "0.12.0",
3
+ "version": "0.14.0",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -39,21 +39,22 @@
39
39
  "dev": "tsup --config=../../tsup.dev.ts"
40
40
  },
41
41
  "dependencies": {
42
- "@elementor/editor": "0.19.4",
43
- "@elementor/editor-editing-panel": "1.44.0",
44
- "@elementor/editor-canvas": "0.22.3",
45
- "@elementor/editor-props": "0.12.1",
42
+ "@elementor/editor": "0.20.0",
43
+ "@elementor/editor-editing-panel": "1.46.0",
44
+ "@elementor/editor-canvas": "0.24.0",
45
+ "@elementor/editor-props": "0.14.0",
46
46
  "@elementor/schema": "0.1.2",
47
- "@elementor/editor-controls": "0.36.0",
47
+ "@elementor/editor-controls": "1.1.0",
48
48
  "@elementor/icons": "1.44.0",
49
49
  "@wordpress/i18n": "^5.13.0",
50
- "@elementor/ui": "1.34.5",
50
+ "@elementor/ui": "1.35.5",
51
51
  "@elementor/editor-v1-adapters": "0.12.0",
52
52
  "@elementor/http-client": "0.3.0",
53
- "@elementor/editor-ui": "0.11.0"
53
+ "@elementor/editor-ui": "0.12.0"
54
54
  },
55
55
  "peerDependencies": {
56
- "react": "^18.3.1"
56
+ "react": "^18.3.1",
57
+ "react-dom": "^18.3.1"
57
58
  },
58
59
  "devDependencies": {
59
60
  "tsup": "^8.3.5"
package/src/components/color-variable-creation.tsx CHANGED
@@ -2,17 +2,14 @@ import * as React from 'react';
2
2
  import { useRef, useState } from 'react';
3
3
  import { useBoundProp } from '@elementor/editor-controls';
4
4
  import { PopoverHeader } from '@elementor/editor-ui';
5
- import { BrushIcon } from '@elementor/icons';
5
+ import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
6
6
  import {
7
- bindPopover,
8
- Box,
9
7
  Button,
10
8
  CardActions,
11
9
  Divider,
12
10
  FormLabel,
13
11
  Grid,
14
- Popover,
15
- type PopupState,
12
+ IconButton,
16
13
  Stack,
17
14
  TextField,
18
15
  UnstableColorField,
@@ -24,7 +21,12 @@ import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-typ
24
21
 
25
22
  const SIZE = 'tiny';
26
23
 
27
- export const ColorVariableCreation = ( { popupState }: { popupState: PopupState } ) => {
24
+ type Props = {
25
+ onGoBack?: () => void;
26
+ onClose: () => void;
27
+ };
28
+
29
+ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
28
30
  const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
29
31
 
30
32
  const [ color, setColor ] = useState( '' );
@@ -39,7 +41,7 @@ export const ColorVariableCreation = ( { popupState }: { popupState: PopupState
39
41
 
40
42
  const closePopover = () => {
41
43
  resetFields();
42
- popupState.close();
44
+ onClose();
43
45
  };
44
46
 
45
47
  const handleCreate = () => {
@@ -53,72 +55,71 @@ export const ColorVariableCreation = ( { popupState }: { popupState: PopupState
53
55
  } );
54
56
  };
55
57
 
56
- const isInValidForm = () => {
58
+ const isFormInvalid = () => {
57
59
  return ! color?.trim() || ! label?.trim();
58
60
  };
59
61
 
60
62
  return (
61
- <Box ref={ anchorRef }>
62
- <Popover
63
- { ...bindPopover( popupState ) }
64
- anchorEl={ anchorRef.current }
65
- anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
66
- transformOrigin={ { vertical: 'top', horizontal: 'right' } }
67
- >
68
- <PopoverHeader
69
- title={ __( 'Create variable', 'elementor' ) }
70
- onClose={ closePopover }
71
- icon={ <BrushIcon fontSize={ SIZE } /> }
72
- />
63
+ <>
64
+ <PopoverHeader
65
+ icon={
66
+ <>
67
+ { onGoBack && (
68
+ <IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
69
+ <ArrowLeftIcon fontSize={ SIZE } />
70
+ </IconButton>
71
+ ) }
72
+ <BrushIcon fontSize={ SIZE } />
73
+ </>
74
+ }
75
+ title={ __( 'Create variable', 'elementor' ) }
76
+ onClose={ closePopover }
77
+ />
73
78
 
74
- <Divider />
79
+ <Divider />
75
80
 
76
- <Stack p={ 1.5 } gap={ 1.5 }>
77
- <Grid container gap={ 0.75 } alignItems="center">
78
- <Grid item xs={ 12 }>
79
- <FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
80
- </Grid>
81
- <Grid item xs={ 12 }>
82
- <TextField
83
- size="tiny"
84
- fullWidth
85
- value={ label }
86
- onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
87
- />
88
- </Grid>
81
+ <Stack p={ 1.5 } gap={ 1.5 }>
82
+ <Grid container gap={ 0.75 } alignItems="center">
83
+ <Grid item xs={ 12 }>
84
+ <FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
89
85
  </Grid>
86
+ <Grid item xs={ 12 }>
87
+ <TextField
88
+ size="tiny"
89
+ fullWidth
90
+ value={ label }
91
+ onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
92
+ />
93
+ </Grid>
94
+ </Grid>
90
95
 
91
- <Grid container gap={ 0.75 } alignItems="center">
92
- <Grid item xs={ 12 }>
93
- <FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
94
- </Grid>
95
- <Grid item xs={ 12 }>
96
- <UnstableColorField
97
- size="tiny"
98
- fullWidth
99
- value={ color }
100
- onChange={ setColor }
101
- slotProps={ {
102
- colorPicker: {
103
- anchorEl: anchorRef.current,
104
- anchorOrigin: { vertical: 'top', horizontal: 'right' },
105
- transformOrigin: { vertical: 'top', horizontal: -10 },
106
- },
107
- } }
108
- />
109
- </Grid>
96
+ <Grid container gap={ 0.75 } alignItems="center">
97
+ <Grid item xs={ 12 }>
98
+ <FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
99
+ </Grid>
100
+ <Grid item xs={ 12 }>
101
+ <UnstableColorField
102
+ size="tiny"
103
+ fullWidth
104
+ value={ color }
105
+ onChange={ setColor }
106
+ slotProps={ {
107
+ colorPicker: {
108
+ anchorEl: anchorRef.current,
109
+ anchorOrigin: { vertical: 'top', horizontal: 'right' },
110
+ transformOrigin: { vertical: 'top', horizontal: -10 },
111
+ },
112
+ } }
113
+ />
110
114
  </Grid>
111
- </Stack>
115
+ </Grid>
116
+ </Stack>
112
117
 
113
- <CardActions>
114
- <Button size="small" onClick={ closePopover } color="secondary" variant="text">
115
- { __( 'Cancel', 'elementor' ) }
116
- </Button>
117
- <Button size="small" variant="contained" disabled={ isInValidForm() } onClick={ handleCreate }>
118
- { __( 'Create', 'elementor' ) }
119
- </Button>
120
- </CardActions>
121
- </Popover>
122
- </Box>
118
+ <CardActions>
119
+ <Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
120
+ { __( 'Create', 'elementor' ) }
121
+ </Button>
122
+ </CardActions>
123
+ </>
123
124
  );
124
125
  };