@elementor/editor-global-classes 0.4.0 → 0.5.0

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/components/class-manager/global-classes-list.tsx","../src/store.ts","../src/errors.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes',\n\t\tcomponent: ClassManagerButton,\n\t} );\n}\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<Tooltip title={ __( 'Class manager' ) } placement=\"top\">\n\t\t\t<IconButton onClick={ open }>\n\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassesList } from './global-classes-list';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nfunction ClassManagerPanel() {\n\treturn (\n\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t<Panel>\n\t\t\t\t<PanelHeader>\n\t\t\t\t\t<Stack p={ 1 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t{ __( 'CSS Class manager' ) }\n\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton sx={ { marginLeft: 'auto' } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t</PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\n};\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import * as React from 'react';\nimport { EllipsisWithTooltip } from '@elementor/editor-ui';\nimport { List, ListItemButton, Stack, Typography } from '@elementor/ui';\n\nimport { useOrderedGlobalClasses } from '../../store';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedGlobalClasses();\n\n\treturn (\n\t\t<Stack>\n\t\t\t<List role=\"list\">\n\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Stack key={ id } direction=\"row\" alignItems=\"center\" gap={ 1 } role=\"listitem\">\n\t\t\t\t\t\t\t<ListItemButton sx={ { borderRadius: 1 } }>\n\t\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t\t</ListItemButton>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</List>\n\t\t</Stack>\n\t);\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\t__useSelector as useSelector,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\nexport type GlobalClassesState = SliceState< typeof slice >;\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const useOrderedGlobalClasses = () => {\n\tconst items = useSelector( selectOrderedGlobalClasses );\n\n\treturn items;\n};\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );\n\t},\n\tput: async ( id: string, data: UpdateActionPayload ) => {\n\t\treturn httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );\n\t},\n};\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectClass, selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t\tupdate: async ( payload ) => {\n\t\t\tconst style = selectClass( getState(), payload.id );\n\t\t\tconst mergedData = { ...style, ...payload };\n\n\t\t\tconst res = await apiClient.put( payload.id, mergedData );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: GlobalClassesState ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global CSS Class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { init } from './init';\n\ninit();\n"],"mappings":";AAAA,SAAS,uBAAuB;AAChC,SAAS,sCAAsC;AAC/C,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,wBAAwB;AACjC,SAAS,mBAAmB,qBAAqB;;;ACJjD,YAAYA,YAAW;AACvB,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,cAAAC,aAAY,eAAe;AACpC,SAAS,MAAAC,WAAU;;;ACHnB,YAAYC,YAAW;AACvB;AAAA,EACC,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,aAAa;AACvC,SAAS,OAAO,KAAK,eAAe,YAAkC,SAAAC,cAAa;AACnF,SAAS,UAAU;;;ACVnB,YAAY,WAAW;AACvB,SAAS,2BAA2B;AACpC,SAAS,MAAM,gBAAgB,OAAO,kBAAkB;;;ACFxD,SAAS,kBAA8B;AACvC;AAAA,EACC;AAAA,OAIM;AACP;AAAA,EACC,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,OAGX;;;ACbP,SAAS,mBAAmB;AAErB,IAAM,2BAA2B,YAAoC;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACV,CAAE;;;ADiBF,IAAM,eAAsB;AAAA,EAC3B,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACT;AAKO,IAAM,aAAa;AAEnB,IAAM,QAAQ,YAAa;AAAA,EACjC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,EAAE,QAAQ,GAA4B;AAClD,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,IAAK,OAAO,EAAE,QAAQ,GAA0E;AAC/F,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,OAAQ,OAAO,EAAE,QAAQ,GAA0E;AAClG,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,YACC,OACA;AAAA,MACC;AAAA,IACD,GACC;AACD,YAAM,QAAQ,MAAM,MAAO,QAAQ,EAAG;AAEtC,UAAK,CAAE,OAAQ;AACd,cAAM,IAAI,yBAA0B,EAAE,SAAS,EAAE,SAAS,QAAQ,GAAG,EAAE,CAAE;AAAA,MAC1E;AAEA,YAAM,UAAU,iBAAkB,OAAO,QAAQ,IAAK;AAEtD,UAAK,SAAU;AACd,gBAAQ,QAAQ,WAAY,QAAQ,OAAO,QAAQ,KAAM;AAAA,MAC1D,OAAO;AACN,cAAM,SAAS,KAAM,EAAE,MAAM,QAAQ,MAAM,OAAO,QAAQ,MAAM,CAAE;AAAA,MACnE;AAAA,IACD;AAAA,EACD;AACD,CAAE;AAGF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AACjF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AAE1E,IAAM,6BAA6B;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAa,CAAE,OAAO,UAC5F,MAAM,IAAK,CAAE,OAAQ,MAAO,EAAG,CAAE;AAClC;AAEO,IAAM,cAAc,CAAE,OAAmC,OAC/D,MAAO,UAAW,EAAE,MAAO,EAAG,KAAK;AAE7B,IAAM,0BAA0B,MAAM;AAC5C,QAAM,QAAQ,YAAa,0BAA2B;AAEtD,SAAO;AACR;;;ADhFO,IAAM,oBAAoB,MAAM;AACtC,QAAM,aAAa,wBAAwB;AAE3C,SACC,oCAAC,aACA,oCAAC,QAAK,MAAK,UACR,YAAY,IAAK,CAAE,EAAE,IAAI,MAAM,MAAO;AACvC,WACC,oCAAC,SAAM,KAAM,IAAK,WAAU,OAAM,YAAW,UAAS,KAAM,GAAI,MAAK,cACpE,oCAAC,kBAAe,IAAK,EAAE,cAAc,EAAE,KACtC,oCAAC,uBAAoB,OAAQ,OAAQ,IAAK,YAAa,SAAQ,WAAU,CAC1E,CACD;AAAA,EAEF,CAAE,CACH,CACD;AAEF;;;ADVO,IAAM,EAAE,OAAO,iBAAiB,eAAe,IAAI,YAAa;AAAA,EACtE,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;AAEF,SAAS,oBAAoB;AAC5B,SACC,qCAAC,iBAAc,UAAW,qCAAC,2BAAsB,KAChD,qCAAC,aACA,qCAAC,mBACA,qCAACC,QAAA,EAAM,GAAI,GAAI,OAAM,QAAO,WAAU,OAAM,YAAW,YACtD,qCAAC,oBAAiB,IAAK,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,IAAI,KACxE,qCAAC,mBAAgB,UAAS,WAAU,IAAK,EAAE,WAAW,gBAAgB,GAAI,GACxE,GAAI,mBAAoB,CAC3B,GACA,qCAAC,eAAY,IAAK,EAAE,YAAY,OAAO,GAAI,CAC5C,CACD,GACA,qCAAC,aAAU,IAAK,KACf,qCAAC,uBAAkB,CACpB,CACD,CACD;AAEF;AAEA,IAAM,cAAc,CAAE,UAA4B;AACjD,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,SACC,qCAAC,cAAW,MAAK,SAAQ,OAAM,aAAY,SAAU,OAAU,GAAG,SACjE,qCAAC,SAAM,UAAS,SAAQ,CACzB;AAEF;AAEA,IAAM,wBAAwB,MAC7B,qCAAC,OAAI,MAAK,SAAQ,IAAK,EAAE,WAAW,QAAQ,GAAG,EAAE,KAChD,qCAAC,SAAM,UAAS,SAAQ,IAAK,EAAE,IAAI,GAAG,UAAU,KAAK,WAAW,SAAS,KACxE,qCAAC,gBAAS,GAAI,wBAAwB,WAAY,CAAG,CACtD,CACD;;;ADhDM,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,SACC,qCAAC,WAAQ,OAAQC,IAAI,eAAgB,GAAI,WAAU,SAClD,qCAACC,aAAA,EAAW,SAAU,QACrB,qCAACC,kBAAA,EAAgB,UAAS,QAAO,CAClC,CACD;AAEF;;;AKjBA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,mBAAmB;;;ACC7C,SAA4B,mBAAmB;AAE/C,IAAM,eAAe;AAMd,IAAM,YAAY;AAAA,EACxB,KAAK,YAAY;AAChB,WAAO,YAAY,EAAE,IAAoC,YAAa;AAAA,EACvE;AAAA,EACA,MAAM,OAAQ,SAA+B;AAC5C,WAAO,YAAY,EAAE,KAAmC,cAAc,IAAK;AAAA,EAC5E;AAAA,EACA,KAAK,OAAQ,IAAY,SAA+B;AACvD,WAAO,YAAY,EAAE,IAAiC,GAAI,YAAa,IAAK,EAAG,IAAI,IAAK;AAAA,EACzF;AACD;;;ADdO,SAAS,aAAa;AAC5B,QAAMC,YAAW,YAAY;AAE7B,YAAW,MAAM;AAChB,cAAU,IAAI,EAAE,KAAM,CAAE,QAAS;AAChC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B,MAAAA,UAAU,MAAM,QAAQ,KAAM,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,CAAE,CAAE;AAAA,IACpE,CAAE;AAAA,EACH,GAAG,CAAEA,SAAS,CAAE;AAEhB,SAAO;AACR;;;AEjBA;AAAA,EACC,cAAc;AAAA,EACd,cAAc;AAAA,EACd,2BAA2B;AAAA,OACrB;AACP,SAAS,MAAAC,WAAU;AAKZ,IAAM,8BAA8B;AAAA,EAC1C,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM,2BAA4B,SAAS,CAAE;AAAA,IAClD,SAAS,CAAE,OAAQ,YAAa,SAAS,GAAG,EAAG;AAAA,IAC/C,QAAQ,OAAQ,UAAW;AAC1B,YAAM,MAAM,MAAM,UAAU,KAAM,KAAM;AAExC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B;AAAA,QACC,MAAM,QAAQ,IAAK;AAAA,UAClB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,IACA,QAAQ,OAAQ,YAAa;AAC5B,YAAM,QAAQ,YAAa,SAAS,GAAG,QAAQ,EAAG;AAClD,YAAM,aAAa,EAAE,GAAG,OAAO,GAAG,QAAQ;AAE1C,YAAM,MAAM,MAAM,UAAU,IAAK,QAAQ,IAAI,UAAW;AAExD,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B;AAAA,QACC,MAAM,QAAQ,OAAQ;AAAA,UACrB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,IAEA,aAAa,CAAE,SAAU;AACxB;AAAA,QACC,MAAM,QAAQ,YAAa;AAAA,UAC1B,IAAI,KAAK;AAAA,UACT,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AAAA,EACA,WAAW,CAAE,OAAQ,sBAAuB,CAAE,UAA+B,MAAM,eAAe,EAAG;AAAA,EACrG,QAAQ;AAAA,IACP,UAAUC,IAAI,oBAAoB,WAAY;AAAA,IAC9C,QAAQA,IAAI,sBAAsB,WAAY;AAAA,EAC/C;AACD;;;ARpDO,SAAS,OAAO;AACtB,gBAAe,KAAM;AACrB,gBAAe,KAAM;AAErB,mBAAiB,SAAU,2BAA4B;AAEvD,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AAEF,iCAAgC;AAAA,IAC/B,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;ASzBA,KAAK;","names":["React","ColorSwatchIcon","IconButton","__","React","Stack","Stack","__","IconButton","ColorSwatchIcon","dispatch","__","__"]}
+{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/components/class-manager/global-classes-list.tsx","../src/global-classes-styles-provider.ts","../src/errors.ts","../src/store.ts","../src/components/class-manager/delete-confirmation-dialog.tsx","../src/components/class-manager/sortable.tsx","../src/components/populate-store.tsx","../src/api.ts","../src/sync-with-document-save.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { PopulateStore } from './components/populate-store';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\nimport { syncWithDocumentSave } from './sync-with-document-save';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-populate-store',\n\t\tcomponent: PopulateStore,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes-manager-button',\n\t\tcomponent: ClassManagerButton,\n\t} );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tsyncWithDocumentSave();\n\t} );\n}\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<Tooltip title={ __( 'Class manager' ) } placement=\"top\">\n\t\t\t<IconButton onClick={ open }>\n\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassesList } from './global-classes-list';\n\nexport const { panel, usePanelActions } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nfunction ClassManagerPanel() {\n\treturn (\n\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t<Panel>\n\t\t\t\t<PanelHeader>\n\t\t\t\t\t<Stack p={ 1 } pl={ 2 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t{ __( 'CSS Class manager' ) }\n\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton sx={ { marginLeft: 'auto' } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t</PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\n};\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import * as React from 'react';\nimport { type StyleDefinitionID } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';\nimport { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tList,\n\tListItem,\n\tListItemButton,\n\tListItemText,\n\tMenu,\n\tMenuItem,\n\tStack,\n\tstyled,\n\ttype Theme,\n\tTooltip,\n\tTypography,\n\ttype TypographyProps,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\nimport { useGlobalClassesOrder, useOrderedGlobalClasses } from '../../store';\nimport { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';\nimport { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedGlobalClasses();\n\n\tconst [ classesOrder, reorderClasses ] = useClassesOrder();\n\n\tif ( ! cssClasses?.length ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<DeleteConfirmationProvider>\n\t\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>\n\t\t\t\t<SortableProvider value={ classesOrder } onChange={ reorderClasses }>\n\t\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\t\tconst renameClass = ( newLabel: string ) => {\n\t\t\t\t\t\t\tglobalClassesStylesProvider.actions.update( { label: newLabel, id } );\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SortableItem key={ id } id={ id }>\n\t\t\t\t\t\t\t\t{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (\n\t\t\t\t\t\t\t\t\t<ClassItem\n\t\t\t\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\trenameClass={ renameClass }\n\t\t\t\t\t\t\t\t\t\tselected={ isDragged }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ showDropIndication && (\n\t\t\t\t\t\t\t\t\t\t\t<SortableItemIndicator style={ dropIndicationStyle } />\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</ClassItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</SortableItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</SortableProvider>\n\t\t\t</List>\n\t\t</DeleteConfirmationProvider>\n\t);\n};\n\nconst useClassesOrder = () => {\n\tconst order = useGlobalClassesOrder();\n\n\tconst reorder = ( newIds: StyleDefinitionID[] ) => {\n\t\tglobalClassesStylesProvider.actions.setOrder( newIds );\n\t};\n\n\treturn [ order, reorder ] as const;\n};\n\nconst ClassItem = ( {\n\tid,\n\tlabel,\n\trenameClass,\n\tselected,\n\tchildren,\n}: React.PropsWithChildren< {\n\tid: string;\n\tlabel: string;\n\trenameClass: ( newLabel: string ) => void;\n\tselected: boolean;\n} > ) => {\n\tconst {\n\t\tref: editableRef,\n\t\topenEditMode,\n\t\tisEditing,\n\t\terror,\n\t\tgetProps: getEditableProps,\n\t} = useEditable( {\n\t\tvalue: label,\n\t\tonSubmit: renameClass,\n\t\tvalidation: validateLabel,\n\t} );\n\n\tconst { openDialog } = useDeleteConfirmation();\n\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>\n\t\t\t<StyledListItem\n\t\t\t\tcomponent={ 'div' }\n\t\t\t\tdisablePadding\n\t\t\t\tdisableGutters\n\t\t\t\tsecondaryAction={\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\tclassName=\"class-item-more-actions\"\n\t\t\t\t\t\ttitle={ __( 'More actions', 'elementor' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconButton size=\"tiny\" { ...bindTrigger( popupState ) } aria-label=\"More actions\">\n\t\t\t\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<ListItemButton\n\t\t\t\t\tdense\n\t\t\t\t\tdisableGutters\n\t\t\t\t\tshape=\"rounded\"\n\t\t\t\t\tonDoubleClick={ openEditMode }\n\t\t\t\t\tselected={ selected || popupState.isOpen }\n\t\t\t\t\tfocusVisibleClassName=\"visible-class-item\"\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tminHeight: '36px',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t'&.visible-class-item': {\n\t\t\t\t\t\t\tboxShadow: 'none !important',\n\t\t\t\t\t\t},\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Indicator isActive={ isEditing } isError={ !! error }>\n\t\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t\t<EditableField\n\t\t\t\t\t\t\t\tref={ editableRef }\n\t\t\t\t\t\t\t\terror={ error }\n\t\t\t\t\t\t\t\tas={ Typography }\n\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t{ ...getEditableProps() }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Indicator>\n\t\t\t\t</ListItemButton>\n\t\t\t\t{ children }\n\t\t\t\t<Menu\n\t\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\t\tanchorOrigin={ {\n\t\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t\ttransformOrigin={ {\n\t\t\t\t\t\tvertical: 'top',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tsx={ { minWidth: '160px' } }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenEditMode();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Rename', 'elementor' ) } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenDialog( { id, label } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</Menu>\n\t\t\t</StyledListItem>\n\t\t</Stack>\n\t);\n};\n\nconst StyledListItem = styled( ListItem )`\n\t.class-item-more-actions {\n\t\tvisibility: hidden;\n\t}\n\t&:hover {\n\t\t.class-item-more-actions {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n`;\n\nconst EmptyState = () => (\n\t<Stack alignItems=\"center\" gap={ 3 } pt={ 4 } px={ 0.5 }>\n\t\t<PhotoIcon fontSize=\"large\" />\n\t\t<StyledHeader variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\">\n\t\t\t{ __( 'No CSS classes created yet', 'elementor' ) }\n\t\t</StyledHeader>\n\t\t<Typography align=\"center\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ __(\n\t\t\t\t'CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.',\n\t\t\t\t'elementor'\n\t\t\t) }\n\t\t</Typography>\n\t</Stack>\n);\n\n// Override panel reset styles.\nconst StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {\n\t'&.MuiTypography-root': {\n\t\t...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),\n\t},\n} ) );\n\nconst Indicator = styled( Box, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),\n} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {\n\tdisplay: 'flex',\n\twidth: '100%',\n\tflexGrow: 1,\n\tborderRadius: theme.spacing( 0.5 ),\n\tborder: getIndicatorBorder( { isActive, isError, theme } ),\n\tpadding: `0 ${ theme.spacing( 1 ) }`,\n\tmarginLeft: isActive ? theme.spacing( 1 ) : 0,\n} ) );\n\nconst getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {\n\tif ( isError ) {\n\t\treturn `2px solid ${ theme.palette.error.main }`;\n\t}\n\n\tif ( isActive ) {\n\t\treturn `2px solid ${ theme.palette.secondary.main }`;\n\t}\n\n\treturn 'none';\n};\n\nconst validateLabel = ( newLabel: string ) => {\n\tif ( ! stylesRepository.isLabelValid( newLabel ) ) {\n\t\treturn __( 'Format is not valid', 'elementor' );\n\t}\n\n\tif ( stylesRepository.isLabelExist( newLabel ) ) {\n\t\treturn __( 'Existing name', 'elementor' );\n\t}\n};\n","import { generateId } from '@elementor/editor-styles';\nimport type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassLabelAlreadyExistsError } from './errors';\nimport {\n\tselectClass,\n\tselectGlobalClasses,\n\tselectOrderedGlobalClasses,\n\tslice,\n\ttype StateWithGlobalClasses,\n} from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: ( label ) => {\n\t\t\tconst classes = selectGlobalClasses( getState() );\n\n\t\t\tconst existingLabels = Object.values( classes ).map( ( style ) => style.label );\n\n\t\t\tif ( existingLabels.includes( label ) ) {\n\t\t\t\tthrow new GlobalClassLabelAlreadyExistsError( { context: { label } } );\n\t\t\t}\n\n\t\t\tconst existingIds = Object.keys( classes );\n\t\t\tconst id = generateId( 'g-', existingIds );\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'class',\n\t\t\t\t\tlabel,\n\t\t\t\t\tvariants: [],\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn id;\n\t\t},\n\t\tupdate: ( payload ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: payload,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tdelete: ( id ) => {\n\t\t\tdispatch( slice.actions.delete( id ) );\n\t\t},\n\t\tsetOrder: ( order ) => {\n\t\t\tdispatch( slice.actions.setOrder( order ) );\n\t\t},\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n\nexport const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {\n\tcode: 'global_class_label_already_exists',\n\tmessage: 'Class with this name already exists.',\n} );\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport { type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\t__useSelector as useSelector,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type GlobalClassesState = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n\tisDirty: boolean;\n};\n\nconst initialState: GlobalClassesState = {\n\titems: {},\n\torder: [],\n\tisDirty: false,\n};\n\nexport type StateWithGlobalClasses = SliceState< typeof slice >;\n\n// Slice\nconst SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' | 'order' > > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\n\t\t\tstate.isDirty = false;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< StyleDefinition > ) {\n\t\t\tstate.items[ payload.id ] = payload;\n\t\t\tstate.order.push( payload.id );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tdelete( state, { payload }: PayloadAction< StyleDefinitionID > ) {\n\t\t\tstate.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );\n\n\t\t\tstate.order = state.order.filter( ( id ) => id !== payload );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tsetOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {\n\t\t\tstate.order = payload;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {\n\t\t\tconst style = state.items[ payload.style.id ];\n\n\t\t\tconst mergedData = {\n\t\t\t\t...style,\n\t\t\t\t...payload.style,\n\t\t\t};\n\n\t\t\tstate.items[ payload.style.id ] = mergedData;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\n\t\tsetPristine( state ) {\n\t\t\tstate.isDirty = false;\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\n\nexport const selectOrderedGlobalClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;\n\nexport const useOrderedGlobalClasses = () => {\n\tconst items = useSelector( selectOrderedGlobalClasses );\n\n\treturn items;\n};\n\nexport const useGlobalClassesOrder = () => useSelector( selectOrder );\n","import * as React from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { AlertOctagonFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\tDialogTitle,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\n\ntype DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;\n\ntype DeleteConfirmationContext = {\n\topenDialog: ( props: DeleteConfirmationDialogProps ) => void;\n\tcloseDialog: () => void;\n\tdialogProps: DeleteConfirmationDialogProps | null;\n};\n\nconst context = createContext< DeleteConfirmationContext | null >( null );\n\nexport const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {\n\tconst [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps | null >( null );\n\n\tconst openDialog = ( props: DeleteConfirmationDialogProps ) => {\n\t\tsetDialogProps( props );\n\t};\n\n\tconst closeDialog = () => {\n\t\tsetDialogProps( null );\n\t};\n\n\treturn (\n\t\t<context.Provider value={ { openDialog, closeDialog, dialogProps } }>\n\t\t\t{ children }\n\t\t\t{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }\n\t\t</context.Provider>\n\t);\n};\n\nconst TITLE_ID = 'delete-class-dialog';\n\nconst DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {\n\tconst { closeDialog } = useDeleteConfirmation();\n\n\tconst onConfirm = () => {\n\t\tglobalClassesStylesProvider.actions.delete( id );\n\n\t\tcloseDialog();\n\t};\n\n\treturn (\n\t\t<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t\t\t<AlertOctagonFilledIcon color=\"error\" />\n\t\t\t\t{ __( 'Delete global class', 'elementor' ) }\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t\t\t{ __( 'Deleting', 'elementor' ) }\n\t\t\t\t\t<Typography variant=\"subtitle2\" component=\"span\">\n\t\t\t\t\t\t&nbsp;{ label }&nbsp;\n\t\t\t\t\t</Typography>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button color=\"secondary\" onClick={ closeDialog }>\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button variant=\"contained\" color=\"error\" onClick={ onConfirm }>\n\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nexport const useDeleteConfirmation = () => {\n\tconst contextValue = useContext( context );\n\n\tif ( ! contextValue ) {\n\t\tthrow new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );\n\t}\n\n\treturn contextValue;\n};\n","import * as React from 'react';\nimport { GripVerticalIcon } from '@elementor/icons';\nimport {\n\tBox,\n\tPaper,\n\tstyled,\n\tUnstableSortableItem,\n\ttype UnstableSortableItemProps,\n\ttype UnstableSortableItemRenderProps,\n\tUnstableSortableProvider,\n\ttype UnstableSortableProviderProps,\n} from '@elementor/ui';\n\nexport const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (\n\t<UnstableSortableProvider restrictAxis variant=\"static\" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />\n);\n\nconst SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (\n\t<div { ...props } role=\"button\" className=\"class-item-sortable-trigger\">\n\t\t<GripVerticalIcon fontSize=\"tiny\" />\n\t</div>\n);\n\ntype ItemRenderProps = Record< string, unknown > & {\n\tisDragged: boolean;\n\tshowDropIndication: boolean;\n\tdropIndicationStyle: React.CSSProperties;\n};\n\ntype SortableItemProps = {\n\tid: UnstableSortableItemProps[ 'id' ];\n\tchildren: ( props: ItemRenderProps ) => React.ReactNode;\n};\n\nexport const SortableItem = ( { children, id }: SortableItemProps ) => {\n\treturn (\n\t\t<UnstableSortableItem\n\t\t\tid={ id }\n\t\t\trender={ ( {\n\t\t\t\titemProps,\n\t\t\t\tisDragged,\n\t\t\t\ttriggerProps,\n\t\t\t\titemStyle,\n\t\t\t\ttriggerStyle,\n\t\t\t\tdropIndicationStyle,\n\t\t\t\tshowDropIndication,\n\t\t\t}: UnstableSortableItemRenderProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role=\"listitem\">\n\t\t\t\t\t\t<SortableTrigger { ...triggerProps } style={ triggerStyle } />\n\t\t\t\t\t\t{ children( {\n\t\t\t\t\t\t\titemProps,\n\t\t\t\t\t\t\tisDragged,\n\t\t\t\t\t\t\ttriggerProps,\n\t\t\t\t\t\t\titemStyle,\n\t\t\t\t\t\t\ttriggerStyle,\n\t\t\t\t\t\t\tdropIndicationStyle,\n\t\t\t\t\t\t\tshowDropIndication,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</StyledSortableItem>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst StyledSortableItem = styled( Paper )`\n\tposition: relative;\n\n\t&:hover {\n\t\t& .class-item-sortable-trigger {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n\n\t& .class-item-sortable-trigger {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 50%;\n\t\ttransform: translate( -75%, -50% );\n\t}\n`;\n\nexport const SortableItemIndicator = styled( Box )`\n\twidth: 100%;\n\theight: 3px;\n\tborder-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };\n\tbackground-color: ${ ( { theme } ) => theme.palette.text.primary };\n`;\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function PopulateStore() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nimport { type GlobalClassesState } from './store';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\n\ntype UpdatePayload = Pick< GlobalClassesState, 'items' | 'order' >;\n\nexport const apiClient = {\n\tall: () => httpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL ),\n\tupdate: ( payload: UpdatePayload ) => httpService().put( 'elementor/v1' + RESOURCE_URL, payload ),\n};\n","import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __dispatch, __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectIsDirty, slice } from './store';\n\nexport function syncWithDocumentSave() {\n\tconst unsubscribe = syncDirtyState();\n\n\tbindSaveAction();\n\n\treturn unsubscribe;\n}\n\nfunction syncDirtyState() {\n\treturn subscribeWithSelector( selectIsDirty, () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\trunCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );\n\t} );\n}\n\nfunction bindSaveAction() {\n\tregisterDataHook( 'after', 'document/save/save', async () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst state: GlobalClassesState = getState().globalClasses;\n\n\t\tawait apiClient.update( {\n\t\t\titems: state.items,\n\t\t\torder: state.order,\n\t\t} );\n\n\t\t__dispatch( slice.actions.setPristine() );\n\t} );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["stylesRepository","React","ColorSwatchIcon","IconButton","Tooltip","__","React","Box","IconButton","Stack","__","React","Box","styled","Typography","__","__","__","React","__","Typography","styled","Box","Stack","__","IconButton","Box","Tooltip","__","IconButton","ColorSwatchIcon","dispatch","getState","subscribeWithSelector","subscribeWithSelector","getState","stylesRepository"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,25 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.5",
-    "@elementor/editor-editing-panel": "1.10.0",
-    "@elementor/editor-panels": "0.10.5",
-    "@elementor/editor-props": "0.8.0",
-    "@elementor/editor-styles": "0.5.4",
-    "@elementor/editor-styles-repository": "0.6.0",
-    "@elementor/editor-ui": "0.1.0",
+    "@elementor/editor": "0.18.0",
+    "@elementor/editor-editing-panel": "1.11.0",
+    "@elementor/editor-panels": "0.11.0",
+    "@elementor/editor-props": "0.9.0",
+    "@elementor/editor-styles": "0.5.5",
+    "@elementor/editor-styles-repository": "0.7.0",
+    "@elementor/editor-ui": "0.2.0",
+    "@elementor/editor-v1-adapters": "0.10.0",
     "@elementor/http": "0.1.3",
-    "@elementor/icons": "1.26.0",
+    "@elementor/icons": "1.31.0",
     "@elementor/store": "0.9.0",
-    "@elementor/ui": "1.24.1",
-    "@elementor/utils": "0.3.0",
+    "@elementor/ui": "1.26.0",
+    "@elementor/utils": "0.3.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/api.ts

@@ -1,21 +1,15 @@
 import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';
-import { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';
 import { type HttpResponse, httpService } from '@elementor/http';
 
+import { type GlobalClassesState } from './store';
+
 const RESOURCE_URL = '/global-classes';
 
 export type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;
-export type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;
-export type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;
+
+type UpdatePayload = Pick< GlobalClassesState, 'items' | 'order' >;
 
 export const apiClient = {
-	all: async () => {
-		return httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );
-	},
-	post: async ( data: CreateActionPayload ) => {
-		return httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );
-	},
-	put: async ( id: string, data: UpdateActionPayload ) => {
-		return httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );
-	},
+	all: () => httpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL ),
+	update: ( payload: UpdatePayload ) => httpService().put( 'elementor/v1' + RESOURCE_URL, payload ),
 };

package/src/components/class-manager/class-manager-panel.tsx

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 
 import { GlobalClassesList } from './global-classes-list';
 
-export const { panel, usePanelActions, usePanelStatus } = createPanel( {
+export const { panel, usePanelActions } = createPanel( {
 	id: 'class-manager-panel',
 	component: ClassManagerPanel,
 } );
@@ -22,7 +22,7 @@ function ClassManagerPanel() {
 		<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
 			<Panel>
 				<PanelHeader>
-					<Stack p={ 1 } width="100%" direction="row" alignItems="center">
+					<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
 						<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
 							<ColorSwatchIcon fontSize="inherit" sx={ { transform: 'rotate(90deg)' } } />
 							{ __( 'CSS Class manager' ) }

package/src/components/class-manager/delete-confirmation-dialog.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { createContext, useContext, useState } from 'react';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { AlertOctagonFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+
+type DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;
+
+type DeleteConfirmationContext = {
+	openDialog: ( props: DeleteConfirmationDialogProps ) => void;
+	closeDialog: () => void;
+	dialogProps: DeleteConfirmationDialogProps | null;
+};
+
+const context = createContext< DeleteConfirmationContext | null >( null );
+
+export const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {
+	const [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps | null >( null );
+
+	const openDialog = ( props: DeleteConfirmationDialogProps ) => {
+		setDialogProps( props );
+	};
+
+	const closeDialog = () => {
+		setDialogProps( null );
+	};
+
+	return (
+		<context.Provider value={ { openDialog, closeDialog, dialogProps } }>
+			{ children }
+			{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }
+		</context.Provider>
+	);
+};
+
+const TITLE_ID = 'delete-class-dialog';
+
+const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {
+	const { closeDialog } = useDeleteConfirmation();
+
+	const onConfirm = () => {
+		globalClassesStylesProvider.actions.delete( id );
+
+		closeDialog();
+	};
+
+	return (
+		<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
+			<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
+				<AlertOctagonFilledIcon color="error" />
+				{ __( 'Delete global class', 'elementor' ) }
+			</DialogTitle>
+			<DialogContent>
+				<DialogContentText variant="body2" color="textPrimary">
+					{ __( 'Deleting', 'elementor' ) }
+					<Typography variant="subtitle2" component="span">
+						&nbsp;{ label }&nbsp;
+					</Typography>
+					{ __(
+						'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',
+						'elementor'
+					) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions>
+				<Button color="secondary" onClick={ closeDialog }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button variant="contained" color="error" onClick={ onConfirm }>
+					{ __( 'Delete', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+export const useDeleteConfirmation = () => {
+	const contextValue = useContext( context );
+
+	if ( ! contextValue ) {
+		throw new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );
+	}
+
+	return contextValue;
+};

package/src/components/class-manager/global-classes-list.tsx

@@ -1,25 +1,261 @@
 import * as React from 'react';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { List, ListItemButton, Stack, Typography } from '@elementor/ui';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
+import { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindTrigger,
+	Box,
+	IconButton,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemText,
+	Menu,
+	MenuItem,
+	Stack,
+	styled,
+	type Theme,
+	Tooltip,
+	Typography,
+	type TypographyProps,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
-import { useOrderedGlobalClasses } from '../../store';
+import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+import { useGlobalClassesOrder, useOrderedGlobalClasses } from '../../store';
+import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
+import { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';
 
 export const GlobalClassesList = () => {
 	const cssClasses = useOrderedGlobalClasses();
 
+	const [ classesOrder, reorderClasses ] = useClassesOrder();
+
+	if ( ! cssClasses?.length ) {
+		return <EmptyState />;
+	}
+
 	return (
-		<Stack>
-			<List role="list">
-				{ cssClasses?.map( ( { id, label } ) => {
-					return (
-						<Stack key={ id } direction="row" alignItems="center" gap={ 1 } role="listitem">
-							<ListItemButton sx={ { borderRadius: 1 } }>
-								<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
-							</ListItemButton>
-						</Stack>
-					);
-				} ) }
+		<DeleteConfirmationProvider>
+			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+				<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
+					{ cssClasses?.map( ( { id, label } ) => {
+						const renameClass = ( newLabel: string ) => {
+							globalClassesStylesProvider.actions.update( { label: newLabel, id } );
+						};
+
+						return (
+							<SortableItem key={ id } id={ id }>
+								{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (
+									<ClassItem
+										id={ id }
+										label={ label }
+										renameClass={ renameClass }
+										selected={ isDragged }
+									>
+										{ showDropIndication && (
+											<SortableItemIndicator style={ dropIndicationStyle } />
+										) }
+									</ClassItem>
+								) }
+							</SortableItem>
+						);
+					} ) }
+				</SortableProvider>
 			</List>
+		</DeleteConfirmationProvider>
+	);
+};
+
+const useClassesOrder = () => {
+	const order = useGlobalClassesOrder();
+
+	const reorder = ( newIds: StyleDefinitionID[] ) => {
+		globalClassesStylesProvider.actions.setOrder( newIds );
+	};
+
+	return [ order, reorder ] as const;
+};
+
+const ClassItem = ( {
+	id,
+	label,
+	renameClass,
+	selected,
+	children,
+}: React.PropsWithChildren< {
+	id: string;
+	label: string;
+	renameClass: ( newLabel: string ) => void;
+	selected: boolean;
+} > ) => {
+	const {
+		ref: editableRef,
+		openEditMode,
+		isEditing,
+		error,
+		getProps: getEditableProps,
+	} = useEditable( {
+		value: label,
+		onSubmit: renameClass,
+		validation: validateLabel,
+	} );
+
+	const { openDialog } = useDeleteConfirmation();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	return (
+		<Stack direction="row" alignItems="center" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>
+			<StyledListItem
+				component={ 'div' }
+				disablePadding
+				disableGutters
+				secondaryAction={
+					<Tooltip
+						placement="top"
+						className="class-item-more-actions"
+						title={ __( 'More actions', 'elementor' ) }
+					>
+						<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+							<DotsVerticalIcon fontSize="tiny" />
+						</IconButton>
+					</Tooltip>
+				}
+			>
+				<ListItemButton
+					dense
+					disableGutters
+					shape="rounded"
+					onDoubleClick={ openEditMode }
+					selected={ selected || popupState.isOpen }
+					focusVisibleClassName="visible-class-item"
+					sx={ {
+						minHeight: '36px',
+						display: 'flex',
+						'&.visible-class-item': {
+							boxShadow: 'none !important',
+						},
+					} }
+				>
+					<Indicator isActive={ isEditing } isError={ !! error }>
+						{ isEditing ? (
+							<EditableField
+								ref={ editableRef }
+								error={ error }
+								as={ Typography }
+								variant="caption"
+								{ ...getEditableProps() }
+							/>
+						) : (
+							<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
+						) }
+					</Indicator>
+				</ListItemButton>
+				{ children }
+				<Menu
+					{ ...bindMenu( popupState ) }
+					anchorOrigin={ {
+						vertical: 'bottom',
+						horizontal: 'right',
+					} }
+					transformOrigin={ {
+						vertical: 'top',
+						horizontal: 'right',
+					} }
+				>
+					<MenuItem
+						sx={ { minWidth: '160px' } }
+						onClick={ () => {
+							popupState.close();
+							openEditMode();
+						} }
+					>
+						<ListItemText primary={ __( 'Rename', 'elementor' ) } />
+					</MenuItem>
+					<MenuItem
+						onClick={ () => {
+							popupState.close();
+							openDialog( { id, label } );
+						} }
+					>
+						<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />
+					</MenuItem>
+				</Menu>
+			</StyledListItem>
 		</Stack>
 	);
 };
+
+const StyledListItem = styled( ListItem )`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+
+const EmptyState = () => (
+	<Stack alignItems="center" gap={ 3 } pt={ 4 } px={ 0.5 }>
+		<PhotoIcon fontSize="large" />
+		<StyledHeader variant="subtitle2" component="h2" color="text.secondary">
+			{ __( 'No CSS classes created yet', 'elementor' ) }
+		</StyledHeader>
+		<Typography align="center" variant="caption" color="text.secondary">
+			{ __(
+				'CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.',
+				'elementor'
+			) }
+		</Typography>
+	</Stack>
+);
+
+// Override panel reset styles.
+const StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {
+	'&.MuiTypography-root': {
+		...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),
+	},
+} ) );
+
+const Indicator = styled( Box, {
+	shouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),
+} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {
+	display: 'flex',
+	width: '100%',
+	flexGrow: 1,
+	borderRadius: theme.spacing( 0.5 ),
+	border: getIndicatorBorder( { isActive, isError, theme } ),
+	padding: `0 ${ theme.spacing( 1 ) }`,
+	marginLeft: isActive ? theme.spacing( 1 ) : 0,
+} ) );
+
+const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {
+	if ( isError ) {
+		return `2px solid ${ theme.palette.error.main }`;
+	}
+
+	if ( isActive ) {
+		return `2px solid ${ theme.palette.secondary.main }`;
+	}
+
+	return 'none';
+};
+
+const validateLabel = ( newLabel: string ) => {
+	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
+		return __( 'Format is not valid', 'elementor' );
+	}
+
+	if ( stylesRepository.isLabelExist( newLabel ) ) {
+		return __( 'Existing name', 'elementor' );
+	}
+};