@elementor/editor-editing-panel 0.13.0 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/index.js +92 -56
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +87 -51
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/accordion-section.tsx +25 -0
  8. package/src/components/collapsible-section.tsx +37 -17
  9. package/src/components/settings-tab.tsx +3 -3
  10. package/src/components/style-sections/size-section.tsx +16 -11
  11. package/src/components/style-sections/typography-section.tsx +3 -3
  12. package/src/controls/settings-control.tsx +14 -10
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/control-label.tsx","../src/components/collapsible-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/image-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/hooks/use-element-style-prop.ts","../src/sync/update-style.ts","../src/controls/hooks/use-style-control.ts","../src/controls/control-types/size-control.tsx","../src/controls/hooks/use-sync-external-state.tsx","../src/components/style-sections/typography-section.tsx","../src/controls/control-types/text-style-control.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<EditingPanelTabs />\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { CollapsibleSection } from './collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\nimport { ControlLabel } from '../components/control-label';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\n// TODO: When we start using useControl inside the label component, we should create a new component for it,\n// and keep ControlLabel as a simple label component without context.\nSettingsControl.Label = ControlLabel;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T | undefined ) => void;\n\tvalue: T | undefined;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { Typography } from '@elementor/ui';\n\nexport const ControlLabel = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype Image = {\n\t$$type: 'image';\n\tvalue:\n\t\t| {\n\t\t\t\tattachmentId: number;\n\t\t\t\turl?: never;\n\t\t }\n\t\t| {\n\t\t\t\tattachmentId?: never;\n\t\t\t\turl: string;\n\t\t };\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: Image = {\n\t$$type: 'image',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const ImageControl = () => {\n\tconst { value, setValue } = useControl< Image >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\treturn value?.value?.url ?? defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: [ 'image' ],\n\t\tmultiple: false,\n\t\tselected: value?.value?.attachmentId,\n\t\tonSelect: ( selectedAttachment ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image',\n\t\t\t\tvalue: {\n\t\t\t\t\tattachmentId: selectedAttachment.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { ImageControl } from './control-types/image-control';\n\nconst controlTypes = {\n\timage: ImageControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\nimport { TypographySection } from './style-sections/typography-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t\t<TypographySection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../../components/collapsible-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"minWidth\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"minHeight\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"maxWidth\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"maxHeight\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { ControlLabel } from '../components/control-label';\nimport { useStyleControl } from './hooks/use-style-control';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst [ value, setValue ] = useStyleControl( bind );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\n// TODO: When we start using useControl inside the label component, we should create a new component for it,\n// and keep ControlLabel as a simple label component without context.\nStyleControl.Label = ControlLabel;\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { useElementContext } from '../../contexts/element-context';\nimport { useStyleContext } from '../../contexts/style-context';\nimport { useElementStyleProp } from '../../hooks/use-element-style-prop';\nimport { updateStyle } from '../../sync/update-style';\nimport { PropKey, PropValue } from '../../types';\n\nexport const useStyleControl = < T extends PropValue >( propName: PropKey ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst value = useElementStyleProp< T >( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName,\n\t} );\n\n\tconst setValue = ( newValue: T ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ propName ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\treturn [ value, setValue ] as const;\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { TransformablePropValue } from '../../types';\nimport { useControl } from '../control-context';\nimport { useSyncExternalState } from '../hooks/use-sync-external-state';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >();\n\n\tconst [ state, setState ] = useSyncExternalState< SizeControlValue >( {\n\t\texternal: value,\n\t\tsetExternal: setValue,\n\t\tpersistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,\n\t\tfallback: ( controlValue ) => ( {\n\t\t\t$$type: 'size',\n\t\t\tvalue: { unit: controlValue?.value.unit || 'px', size: NaN },\n\t\t} ),\n\t} );\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tunit,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { value: size } = event.target;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tsize: size || size === '0' ? parseFloat( size ) : NaN,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ Number.isNaN( state.value.size ) ? '' : state.value.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ state.value.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n","import { useEffect, useState } from 'react';\n\ntype UseInternalStateOptions< TValue > = {\n\texternal: TValue | undefined;\n\tsetExternal: ( value: TValue | undefined ) => void;\n\tpersistWhen: ( value: TValue | undefined ) => boolean;\n\tfallback: ( value: TValue | undefined ) => TValue;\n};\n\nexport const useSyncExternalState = < TValue, >( {\n\texternal,\n\tsetExternal,\n\tpersistWhen,\n\tfallback,\n}: UseInternalStateOptions< TValue > ) => {\n\tfunction toExternal( internalValue: TValue | undefined ) {\n\t\tif ( persistWhen( internalValue ) ) {\n\t\t\treturn internalValue;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {\n\t\tif ( ! externalValue ) {\n\t\t\treturn fallback( internalValue );\n\t\t}\n\n\t\treturn externalValue;\n\t}\n\n\tconst [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );\n\n\tuseEffect( () => {\n\t\tsetInternal( ( prevInternal ) => toInternal( external, prevInternal ) );\n\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ external ] );\n\n\ttype SetterFunc = ( value: TValue ) => TValue;\n\n\tconst setInternalValue = ( setter: SetterFunc | TValue ) => {\n\t\tconst setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;\n\t\tconst updated = setterFn( internal );\n\n\t\tsetInternal( updated );\n\t\tsetExternal( toExternal( updated ) );\n\t};\n\n\treturn [ internal, setInternalValue ] as const;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../collapsible-section';\nimport { Stack } from '@elementor/ui';\nimport { TextStyleControl } from '../../controls/control-types/text-style-control';\nimport { __ } from '@wordpress/i18n';\n\nexport const TypographySection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Typography', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<TextStyleControl />\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n","import * as React from 'react';\nimport { Stack, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from '@elementor/ui';\nimport { ControlLabel } from '../../components/control-label';\nimport { useStyleControl } from '../hooks/use-style-control';\nimport { __ } from '@wordpress/i18n';\n\nexport const TextStyleControl = () => {\n\tconst [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'fontStyle' );\n\tconst [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'textDecoration' );\n\n\tconst formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];\n\n\treturn (\n\t\t<Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n\t\t\t<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>\n\t\t\t<ToggleButtonGroup value={ formats }>\n\t\t\t\t<ToggleButton\n\t\t\t\t\tvalue=\"italic\"\n\t\t\t\t\tonChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }\n\t\t\t\t\taria-label=\"italic\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { fontStyle: 'italic', fontSize: '12px' } }>I</span>\n\t\t\t\t</ToggleButton>\n\t\t\t\t<ShorthandControl\n\t\t\t\t\tvalue=\"line-through\"\n\t\t\t\t\tcurrentValues={ textDecoration || '' }\n\t\t\t\t\tupdateValues={ setTextDecoration }\n\t\t\t\t\taria-label=\"line-through\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { textDecoration: 'line-through', fontSize: '12px' } }>S</span>\n\t\t\t\t</ShorthandControl>\n\t\t\t\t<ShorthandControl\n\t\t\t\t\tvalue=\"underline\"\n\t\t\t\t\tcurrentValues={ textDecoration || '' }\n\t\t\t\t\tupdateValues={ setTextDecoration }\n\t\t\t\t\taria-label=\"underline\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { textDecoration: 'underline', fontSize: '12px' } }>U</span>\n\t\t\t\t</ShorthandControl>\n\t\t\t</ToggleButtonGroup>\n\t\t</Stack>\n\t);\n};\n\ntype ShorthandControlProps = React.PropsWithChildren< {\n\tvalue: string;\n\tcurrentValues: string;\n\tupdateValues: ( newValue: string | null ) => void;\n\t'aria-label': string;\n} >;\n\nexport const ShorthandControl = ( {\n\tchildren,\n\tvalue,\n\tcurrentValues,\n\tupdateValues,\n\t'aria-label': ariaLabel,\n}: ShorthandControlProps ) => {\n\tconst valuesArr = currentValues.split( ' ' ).filter( Boolean );\n\tconst selected = valuesArr.includes( value );\n\n\tconst toggleValue = ( newValue: string ) => {\n\t\tif ( selected ) {\n\t\t\tupdateValues( valuesArr.filter( ( v ) => v !== newValue ).join( ' ' ) || null );\n\t\t} else {\n\t\t\tupdateValues( [ ...valuesArr, newValue ].join( ' ' ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToggleButton value={ value } onChange={ toggleValue } selected={ selected } aria-label={ ariaLabel }>\n\t\t\t{ children }\n\t\t</ToggleButton>\n\t);\n};\n\ntype ControlToggleButtonProps = React.PropsWithChildren< {\n\tvalue: string;\n\tonChange: ( newValue: string ) => void;\n\tselected?: boolean;\n\t'aria-label': string;\n} >;\n\nconst ToggleButton = ( { onChange, ...props }: ControlToggleButtonProps ) => {\n\tconst handleChange = ( _e: React.MouseEvent< HTMLElement >, newValue: string ) => {\n\t\tonChange( newValue );\n\t};\n\n\treturn <ToggleButtonBase { ...props } onChange={ handleChange } size=\"tiny\" sx={ { px: 1.5 } } />;\n};\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","import_i18n","useListenTo","import_editor_v1_adapters","useListenTo","import_ui","React","import_i18n","React","import_ui","React","import_react","import_ui","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","React","import_react","import_ui","React","import_ui","React","import_ui","React","import_ui","React","import_ui","React","React","import_react","Context","import_editor_v1_adapters","useListenTo","import_ui","React","React","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_ui","import_react","units","import_ui","import_i18n","Control","React","import_ui","React","import_ui","import_i18n","ToggleButtonBase","import_i18n","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
1
+ {"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/control-label.tsx","../src/components/accordion-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/image-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/hooks/use-element-style-prop.ts","../src/sync/update-style.ts","../src/controls/hooks/use-style-control.ts","../src/components/collapsible-section.tsx","../src/controls/control-types/size-control.tsx","../src/controls/hooks/use-sync-external-state.tsx","../src/components/style-sections/typography-section.tsx","../src/controls/control-types/text-style-control.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<EditingPanelTabs />\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { AccordionSection } from './accordion-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<AccordionSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</AccordionSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\nimport { ControlLabel } from '../components/control-label';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )( ( { theme } ) => {\n\tconst gap = theme.spacing( 1 );\n\n\treturn {\n\t\tgap,\n\t\t'& > *': {\n\t\t\twidth: `calc(50% - ${ gap } / 2)`,\n\t\t},\n\t\t'& > label': {\n\t\t\tflexShrink: 0,\n\t\t},\n\t};\n} );\n\n// TODO: When we start using useControl inside the label component, we should create a new component for it,\n// and keep ControlLabel as a simple label component without context.\nSettingsControl.Label = ControlLabel;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T | undefined ) => void;\n\tvalue: T | undefined;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { Typography } from '@elementor/ui';\n\nexport const ControlLabel = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type AccordionSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const AccordionSection = ( { title, children }: AccordionSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype Image = {\n\t$$type: 'image';\n\tvalue:\n\t\t| {\n\t\t\t\tattachmentId: number;\n\t\t\t\turl?: never;\n\t\t }\n\t\t| {\n\t\t\t\tattachmentId?: never;\n\t\t\t\turl: string;\n\t\t };\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: Image = {\n\t$$type: 'image',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const ImageControl = () => {\n\tconst { value, setValue } = useControl< Image >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\treturn value?.value?.url ?? defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: [ 'image' ],\n\t\tmultiple: false,\n\t\tselected: value?.value?.attachmentId,\n\t\tonSelect: ( selectedAttachment ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image',\n\t\t\t\tvalue: {\n\t\t\t\t\tattachmentId: selectedAttachment.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { ImageControl } from './control-types/image-control';\n\nconst controlTypes = {\n\timage: ImageControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\nimport { TypographySection } from './style-sections/typography-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t\t<TypographySection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { AccordionSection } from '../accordion-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { CollapsibleSection } from '../collapsible-section';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<AccordionSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<CollapsibleSection>\n\t\t\t\t\t<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>\n\t\t\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t\t\t<Control bind=\"minWidth\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t\t\t<Control bind=\"minHeight\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t\t\t<Control bind=\"maxWidth\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t\t\t<Control bind=\"maxHeight\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</CollapsibleSection>\n\t\t\t</Stack>\n\t\t</AccordionSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { ControlLabel } from '../components/control-label';\nimport { useStyleControl } from './hooks/use-style-control';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst [ value, setValue ] = useStyleControl( bind );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\n// TODO: When we start using useControl inside the label component, we should create a new component for it,\n// and keep ControlLabel as a simple label component without context.\nStyleControl.Label = ControlLabel;\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { useElementContext } from '../../contexts/element-context';\nimport { useStyleContext } from '../../contexts/style-context';\nimport { useElementStyleProp } from '../../hooks/use-element-style-prop';\nimport { updateStyle } from '../../sync/update-style';\nimport { PropKey, PropValue } from '../../types';\n\nexport const useStyleControl = < T extends PropValue >( propName: PropKey ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst value = useElementStyleProp< T >( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName,\n\t} );\n\n\tconst setValue = ( newValue: T ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ propName ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\treturn [ value, setValue ] as const;\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { ChevronDownIcon } from '@elementor/icons';\nimport { Button, Collapse, Stack, styled } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype CollapsibleSectionProps = React.PropsWithChildren< {\n\tdefaultOpen?: boolean;\n} >;\n\nexport const CollapsibleSection = ( { children, defaultOpen = false }: CollapsibleSectionProps ) => {\n\tconst [ open, setOpen ] = useState( defaultOpen );\n\n\tconst handleToggle = () => {\n\t\tsetOpen( ( prevOpen ) => ! prevOpen );\n\t};\n\n\treturn (\n\t\t<Stack sx={ { py: 0.5 } }>\n\t\t\t<Button\n\t\t\t\tfullWidth\n\t\t\t\tsize=\"small\"\n\t\t\t\tcolor=\"secondary\"\n\t\t\t\tvariant=\"outlined\"\n\t\t\t\tonClick={ handleToggle }\n\t\t\t\tendIcon={ <ChevronIcon open={ open } /> }\n\t\t\t>\n\t\t\t\t{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }\n\t\t\t</Button>\n\t\t\t<Collapse in={ open } timeout=\"auto\">\n\t\t\t\t{ children }\n\t\t\t</Collapse>\n\t\t</Stack>\n\t);\n};\n\n// TODO: Replace this with future Rotate component that will be implemented in elementor-ui\nconst ChevronIcon = styled( ChevronDownIcon, {\n\tshouldForwardProp: ( prop ) => prop !== 'open',\n} )< { open: boolean } >( ( { theme, open } ) => ( {\n\ttransform: open ? 'rotate(180deg)' : 'rotate(0)',\n\ttransition: theme.transitions.create( 'transform', {\n\t\tduration: theme.transitions.duration.standard,\n\t} ),\n} ) );\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { TransformablePropValue } from '../../types';\nimport { useControl } from '../control-context';\nimport { useSyncExternalState } from '../hooks/use-sync-external-state';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >();\n\n\tconst [ state, setState ] = useSyncExternalState< SizeControlValue >( {\n\t\texternal: value,\n\t\tsetExternal: setValue,\n\t\tpersistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,\n\t\tfallback: ( controlValue ) => ( {\n\t\t\t$$type: 'size',\n\t\t\tvalue: { unit: controlValue?.value.unit || 'px', size: NaN },\n\t\t} ),\n\t} );\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tunit,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { value: size } = event.target;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tsize: size || size === '0' ? parseFloat( size ) : NaN,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ Number.isNaN( state.value.size ) ? '' : state.value.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ state.value.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n","import { useEffect, useState } from 'react';\n\ntype UseInternalStateOptions< TValue > = {\n\texternal: TValue | undefined;\n\tsetExternal: ( value: TValue | undefined ) => void;\n\tpersistWhen: ( value: TValue | undefined ) => boolean;\n\tfallback: ( value: TValue | undefined ) => TValue;\n};\n\nexport const useSyncExternalState = < TValue, >( {\n\texternal,\n\tsetExternal,\n\tpersistWhen,\n\tfallback,\n}: UseInternalStateOptions< TValue > ) => {\n\tfunction toExternal( internalValue: TValue | undefined ) {\n\t\tif ( persistWhen( internalValue ) ) {\n\t\t\treturn internalValue;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {\n\t\tif ( ! externalValue ) {\n\t\t\treturn fallback( internalValue );\n\t\t}\n\n\t\treturn externalValue;\n\t}\n\n\tconst [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );\n\n\tuseEffect( () => {\n\t\tsetInternal( ( prevInternal ) => toInternal( external, prevInternal ) );\n\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ external ] );\n\n\ttype SetterFunc = ( value: TValue ) => TValue;\n\n\tconst setInternalValue = ( setter: SetterFunc | TValue ) => {\n\t\tconst setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;\n\t\tconst updated = setterFn( internal );\n\n\t\tsetInternal( updated );\n\t\tsetExternal( toExternal( updated ) );\n\t};\n\n\treturn [ internal, setInternalValue ] as const;\n};\n","import * as React from 'react';\nimport { AccordionSection } from '../accordion-section';\nimport { Stack } from '@elementor/ui';\nimport { TextStyleControl } from '../../controls/control-types/text-style-control';\nimport { __ } from '@wordpress/i18n';\n\nexport const TypographySection = () => {\n\treturn (\n\t\t<AccordionSection title={ __( 'Typography', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<TextStyleControl />\n\t\t\t</Stack>\n\t\t</AccordionSection>\n\t);\n};\n","import * as React from 'react';\nimport { Stack, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from '@elementor/ui';\nimport { ControlLabel } from '../../components/control-label';\nimport { useStyleControl } from '../hooks/use-style-control';\nimport { __ } from '@wordpress/i18n';\n\nexport const TextStyleControl = () => {\n\tconst [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'fontStyle' );\n\tconst [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'textDecoration' );\n\n\tconst formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];\n\n\treturn (\n\t\t<Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n\t\t\t<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>\n\t\t\t<ToggleButtonGroup value={ formats }>\n\t\t\t\t<ToggleButton\n\t\t\t\t\tvalue=\"italic\"\n\t\t\t\t\tonChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }\n\t\t\t\t\taria-label=\"italic\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { fontStyle: 'italic', fontSize: '12px' } }>I</span>\n\t\t\t\t</ToggleButton>\n\t\t\t\t<ShorthandControl\n\t\t\t\t\tvalue=\"line-through\"\n\t\t\t\t\tcurrentValues={ textDecoration || '' }\n\t\t\t\t\tupdateValues={ setTextDecoration }\n\t\t\t\t\taria-label=\"line-through\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { textDecoration: 'line-through', fontSize: '12px' } }>S</span>\n\t\t\t\t</ShorthandControl>\n\t\t\t\t<ShorthandControl\n\t\t\t\t\tvalue=\"underline\"\n\t\t\t\t\tcurrentValues={ textDecoration || '' }\n\t\t\t\t\tupdateValues={ setTextDecoration }\n\t\t\t\t\taria-label=\"underline\"\n\t\t\t\t>\n\t\t\t\t\t<span style={ { textDecoration: 'underline', fontSize: '12px' } }>U</span>\n\t\t\t\t</ShorthandControl>\n\t\t\t</ToggleButtonGroup>\n\t\t</Stack>\n\t);\n};\n\ntype ShorthandControlProps = React.PropsWithChildren< {\n\tvalue: string;\n\tcurrentValues: string;\n\tupdateValues: ( newValue: string | null ) => void;\n\t'aria-label': string;\n} >;\n\nexport const ShorthandControl = ( {\n\tchildren,\n\tvalue,\n\tcurrentValues,\n\tupdateValues,\n\t'aria-label': ariaLabel,\n}: ShorthandControlProps ) => {\n\tconst valuesArr = currentValues.split( ' ' ).filter( Boolean );\n\tconst selected = valuesArr.includes( value );\n\n\tconst toggleValue = ( newValue: string ) => {\n\t\tif ( selected ) {\n\t\t\tupdateValues( valuesArr.filter( ( v ) => v !== newValue ).join( ' ' ) || null );\n\t\t} else {\n\t\t\tupdateValues( [ ...valuesArr, newValue ].join( ' ' ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToggleButton value={ value } onChange={ toggleValue } selected={ selected } aria-label={ ariaLabel }>\n\t\t\t{ children }\n\t\t</ToggleButton>\n\t);\n};\n\ntype ControlToggleButtonProps = React.PropsWithChildren< {\n\tvalue: string;\n\tonChange: ( newValue: string ) => void;\n\tselected?: boolean;\n\t'aria-label': string;\n} >;\n\nconst ToggleButton = ( { onChange, ...props }: ControlToggleButtonProps ) => {\n\tconst handleChange = ( _e: React.MouseEvent< HTMLElement >, newValue: string ) => {\n\t\tonChange( newValue );\n\t};\n\n\treturn <ToggleButtonBase { ...props } onChange={ handleChange } size=\"tiny\" sx={ { px: 1.5 } } />;\n};\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","import_i18n","useListenTo","import_editor_v1_adapters","useListenTo","import_ui","React","import_i18n","React","import_ui","React","import_react","import_ui","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","React","import_react","import_ui","React","import_ui","React","import_ui","React","import_ui","React","import_ui","React","React","import_react","Context","import_editor_v1_adapters","useListenTo","import_ui","React","React","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_react","import_icons","import_ui","import_i18n","React","import_ui","import_react","units","import_ui","import_i18n","Control","React","import_ui","React","import_ui","import_i18n","ToggleButtonBase","import_i18n","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
package/dist/index.mjs CHANGED
@@ -2,8 +2,8 @@
2
2
  import { __createPanel as createPanel } from "@elementor/editor-panels";
3
3
 
4
4
  // src/components/editing-panel.tsx
5
- import * as React18 from "react";
6
- import { __ as __6 } from "@wordpress/i18n";
5
+ import * as React19 from "react";
6
+ import { __ as __7 } from "@wordpress/i18n";
7
7
 
8
8
  // src/hooks/use-selected-elements.ts
9
9
  import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
@@ -83,9 +83,9 @@ function useElementContext() {
83
83
  }
84
84
 
85
85
  // src/components/editing-panel-tabs.tsx
86
- import { Stack as Stack9, Tabs, Tab, TabPanel, useTabs } from "@elementor/ui";
87
- import * as React17 from "react";
88
- import { __ as __5 } from "@wordpress/i18n";
86
+ import { Stack as Stack10, Tabs, Tab, TabPanel, useTabs } from "@elementor/ui";
87
+ import * as React18 from "react";
88
+ import { __ as __6 } from "@wordpress/i18n";
89
89
 
90
90
  // src/components/settings-tab.tsx
91
91
  import * as React9 from "react";
@@ -164,23 +164,26 @@ var SettingsControlProvider = ({ bind, children }) => {
164
164
  };
165
165
  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
166
166
  };
167
- var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React3.createElement(SettingsControlProvider, { bind }, /* @__PURE__ */ React3.createElement(StyledStack, { gap: 1, direction: "row", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }, children));
168
- var StyledStack = styled(Stack)`
169
- & > * {
170
- flex-grow: 1;
171
- }
172
-
173
- & > label {
174
- min-width: 50%;
175
- }
176
- `;
167
+ var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React3.createElement(SettingsControlProvider, { bind }, /* @__PURE__ */ React3.createElement(StyledStack, { direction: "row", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }, children));
168
+ var StyledStack = styled(Stack)(({ theme }) => {
169
+ const gap = theme.spacing(1);
170
+ return {
171
+ gap,
172
+ "& > *": {
173
+ width: `calc(50% - ${gap} / 2)`
174
+ },
175
+ "& > label": {
176
+ flexShrink: 0
177
+ }
178
+ };
179
+ });
177
180
  SettingsControl.Label = ControlLabel;
178
181
 
179
- // src/components/collapsible-section.tsx
182
+ // src/components/accordion-section.tsx
180
183
  import * as React4 from "react";
181
184
  import { useId } from "react";
182
185
  import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack as Stack2 } from "@elementor/ui";
183
- var CollapsibleSection = ({ title, children }) => {
186
+ var AccordionSection = ({ title, children }) => {
184
187
  const uid = useId();
185
188
  const labelId = `label-${uid}`;
186
189
  const contentId = `content-${uid}`;
@@ -312,7 +315,7 @@ var SettingsTab = () => {
312
315
  return /* @__PURE__ */ React9.createElement(Control, { key: value.bind, control: value });
313
316
  }
314
317
  if (type === "section") {
315
- return /* @__PURE__ */ React9.createElement(CollapsibleSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
318
+ return /* @__PURE__ */ React9.createElement(AccordionSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
316
319
  if (item.type === "control") {
317
320
  return /* @__PURE__ */ React9.createElement(Control, { key: item.value.bind, control: item.value });
318
321
  }
@@ -336,7 +339,7 @@ var Control = ({ control }) => {
336
339
  };
337
340
 
338
341
  // src/components/style-tab.tsx
339
- import * as React16 from "react";
342
+ import * as React17 from "react";
340
343
 
341
344
  // src/contexts/style-context.tsx
342
345
  import * as React10 from "react";
@@ -377,10 +380,10 @@ var useElementStyles = (elementID) => {
377
380
  };
378
381
 
379
382
  // src/components/style-tab.tsx
380
- import { Stack as Stack8 } from "@elementor/ui";
383
+ import { Stack as Stack9 } from "@elementor/ui";
381
384
 
382
385
  // src/components/style-sections/size-section.tsx
383
- import * as React13 from "react";
386
+ import * as React14 from "react";
384
387
 
385
388
  // src/controls/style-control.tsx
386
389
  import * as React11 from "react";
@@ -456,12 +459,45 @@ var StyleControl = ({ bind, children }) => {
456
459
  };
457
460
  StyleControl.Label = ControlLabel;
458
461
 
459
- // src/controls/control-types/size-control.tsx
462
+ // src/components/collapsible-section.tsx
460
463
  import * as React12 from "react";
461
- import { MenuItem as MenuItem2, Select as Select2, Stack as Stack4, TextField as TextField3 } from "@elementor/ui";
464
+ import { useState } from "react";
465
+ import { ChevronDownIcon } from "@elementor/icons";
466
+ import { Button as Button2, Collapse, Stack as Stack4, styled as styled2 } from "@elementor/ui";
467
+ import { __ as __2 } from "@wordpress/i18n";
468
+ var CollapsibleSection = ({ children, defaultOpen = false }) => {
469
+ const [open, setOpen] = useState(defaultOpen);
470
+ const handleToggle = () => {
471
+ setOpen((prevOpen) => !prevOpen);
472
+ };
473
+ return /* @__PURE__ */ React12.createElement(Stack4, { sx: { py: 0.5 } }, /* @__PURE__ */ React12.createElement(
474
+ Button2,
475
+ {
476
+ fullWidth: true,
477
+ size: "small",
478
+ color: "secondary",
479
+ variant: "outlined",
480
+ onClick: handleToggle,
481
+ endIcon: /* @__PURE__ */ React12.createElement(ChevronIcon, { open })
482
+ },
483
+ open ? __2("Show less", "elementor") : __2("Show more", "elementor")
484
+ ), /* @__PURE__ */ React12.createElement(Collapse, { in: open, timeout: "auto" }, children));
485
+ };
486
+ var ChevronIcon = styled2(ChevronDownIcon, {
487
+ shouldForwardProp: (prop) => prop !== "open"
488
+ })(({ theme, open }) => ({
489
+ transform: open ? "rotate(180deg)" : "rotate(0)",
490
+ transition: theme.transitions.create("transform", {
491
+ duration: theme.transitions.duration.standard
492
+ })
493
+ }));
494
+
495
+ // src/controls/control-types/size-control.tsx
496
+ import * as React13 from "react";
497
+ import { MenuItem as MenuItem2, Select as Select2, Stack as Stack5, TextField as TextField3 } from "@elementor/ui";
462
498
 
463
499
  // src/controls/hooks/use-sync-external-state.tsx
464
- import { useEffect, useState } from "react";
500
+ import { useEffect, useState as useState2 } from "react";
465
501
  var useSyncExternalState = ({
466
502
  external,
467
503
  setExternal,
@@ -480,7 +516,7 @@ var useSyncExternalState = ({
480
516
  }
481
517
  return externalValue;
482
518
  }
483
- const [internal, setInternal] = useState(toInternal(external, void 0));
519
+ const [internal, setInternal] = useState2(toInternal(external, void 0));
484
520
  useEffect(() => {
485
521
  setInternal((prevInternal) => toInternal(external, prevInternal));
486
522
  }, [external]);
@@ -525,7 +561,7 @@ var SizeControl = ({ units: units2, placeholder }) => {
525
561
  }
526
562
  }));
527
563
  };
528
- return /* @__PURE__ */ React12.createElement(Stack4, { direction: "row" }, /* @__PURE__ */ React12.createElement(
564
+ return /* @__PURE__ */ React13.createElement(Stack5, { direction: "row" }, /* @__PURE__ */ React13.createElement(
529
565
  TextField3,
530
566
  {
531
567
  size: "tiny",
@@ -534,7 +570,7 @@ var SizeControl = ({ units: units2, placeholder }) => {
534
570
  onChange: handleSizeChange,
535
571
  placeholder
536
572
  }
537
- ), /* @__PURE__ */ React12.createElement(
573
+ ), /* @__PURE__ */ React13.createElement(
538
574
  Select2,
539
575
  {
540
576
  size: "tiny",
@@ -545,42 +581,42 @@ var SizeControl = ({ units: units2, placeholder }) => {
545
581
  transformOrigin: { vertical: "top", horizontal: "right" }
546
582
  }
547
583
  },
548
- units2.map((unit) => /* @__PURE__ */ React12.createElement(MenuItem2, { key: unit, value: unit }, unit.toUpperCase()))
584
+ units2.map((unit) => /* @__PURE__ */ React13.createElement(MenuItem2, { key: unit, value: unit }, unit.toUpperCase()))
549
585
  ));
550
586
  };
551
587
 
552
588
  // src/components/style-sections/size-section.tsx
553
- import { Stack as Stack5 } from "@elementor/ui";
554
- import { __ as __2 } from "@wordpress/i18n";
589
+ import { Stack as Stack6 } from "@elementor/ui";
590
+ import { __ as __3 } from "@wordpress/i18n";
555
591
  var SizeSection = () => {
556
- return /* @__PURE__ */ React13.createElement(CollapsibleSection, { title: __2("Size", "elementor") }, /* @__PURE__ */ React13.createElement(Stack5, { gap: 1.5 }, /* @__PURE__ */ React13.createElement(Stack5, { direction: "row", gap: 2 }, /* @__PURE__ */ React13.createElement(Control2, { bind: "width", label: __2("Width", "elementor") }), /* @__PURE__ */ React13.createElement(Control2, { bind: "height", label: __2("Height", "elementor") })), /* @__PURE__ */ React13.createElement(Stack5, { direction: "row", gap: 2 }, /* @__PURE__ */ React13.createElement(Control2, { bind: "minWidth", label: __2("Min. Width", "elementor") }), /* @__PURE__ */ React13.createElement(Control2, { bind: "minHeight", label: __2("Min. Height", "elementor") })), /* @__PURE__ */ React13.createElement(Stack5, { direction: "row", gap: 2 }, /* @__PURE__ */ React13.createElement(Control2, { bind: "maxWidth", label: __2("Max. Width", "elementor") }), /* @__PURE__ */ React13.createElement(Control2, { bind: "maxHeight", label: __2("Max. Height", "elementor") }))));
592
+ return /* @__PURE__ */ React14.createElement(AccordionSection, { title: __3("Size", "elementor") }, /* @__PURE__ */ React14.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 2 }, /* @__PURE__ */ React14.createElement(Control2, { bind: "width", label: __3("Width", "elementor") }), /* @__PURE__ */ React14.createElement(Control2, { bind: "height", label: __3("Height", "elementor") })), /* @__PURE__ */ React14.createElement(CollapsibleSection, null, /* @__PURE__ */ React14.createElement(Stack6, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 2 }, /* @__PURE__ */ React14.createElement(Control2, { bind: "minWidth", label: __3("Min. Width", "elementor") }), /* @__PURE__ */ React14.createElement(Control2, { bind: "minHeight", label: __3("Min. Height", "elementor") })), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 2 }, /* @__PURE__ */ React14.createElement(Control2, { bind: "maxWidth", label: __3("Max. Width", "elementor") }), /* @__PURE__ */ React14.createElement(Control2, { bind: "maxHeight", label: __3("Max. Height", "elementor") }))))));
557
593
  };
558
594
  var units = ["px", "%", "em", "rem", "vw"];
559
595
  var Control2 = ({ label, bind }) => {
560
- return /* @__PURE__ */ React13.createElement(StyleControl, { bind }, /* @__PURE__ */ React13.createElement(Stack5, { gap: 1, sx: { flex: "0 1 50%" } }, /* @__PURE__ */ React13.createElement(StyleControl.Label, null, label), /* @__PURE__ */ React13.createElement(SizeControl, { units })));
596
+ return /* @__PURE__ */ React14.createElement(StyleControl, { bind }, /* @__PURE__ */ React14.createElement(Stack6, { gap: 1, sx: { flex: "0 1 50%" } }, /* @__PURE__ */ React14.createElement(StyleControl.Label, null, label), /* @__PURE__ */ React14.createElement(SizeControl, { units })));
561
597
  };
562
598
 
563
599
  // src/components/style-sections/typography-section.tsx
564
- import * as React15 from "react";
565
- import { Stack as Stack7 } from "@elementor/ui";
600
+ import * as React16 from "react";
601
+ import { Stack as Stack8 } from "@elementor/ui";
566
602
 
567
603
  // src/controls/control-types/text-style-control.tsx
568
- import * as React14 from "react";
569
- import { Stack as Stack6, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from "@elementor/ui";
570
- import { __ as __3 } from "@wordpress/i18n";
604
+ import * as React15 from "react";
605
+ import { Stack as Stack7, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from "@elementor/ui";
606
+ import { __ as __4 } from "@wordpress/i18n";
571
607
  var TextStyleControl = () => {
572
608
  const [fontStyle, setFontStyle] = useStyleControl("fontStyle");
573
609
  const [textDecoration, setTextDecoration] = useStyleControl("textDecoration");
574
610
  const formats = [fontStyle, ...(textDecoration || "").split(" ")];
575
- return /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React14.createElement(ControlLabel, null, __3("Style", "elementor")), /* @__PURE__ */ React14.createElement(ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React14.createElement(
611
+ return /* @__PURE__ */ React15.createElement(Stack7, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React15.createElement(ControlLabel, null, __4("Style", "elementor")), /* @__PURE__ */ React15.createElement(ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React15.createElement(
576
612
  ToggleButton,
577
613
  {
578
614
  value: "italic",
579
615
  onChange: (v) => setFontStyle(fontStyle === v ? null : v),
580
616
  "aria-label": "italic"
581
617
  },
582
- /* @__PURE__ */ React14.createElement("span", { style: { fontStyle: "italic", fontSize: "12px" } }, "I")
583
- ), /* @__PURE__ */ React14.createElement(
618
+ /* @__PURE__ */ React15.createElement("span", { style: { fontStyle: "italic", fontSize: "12px" } }, "I")
619
+ ), /* @__PURE__ */ React15.createElement(
584
620
  ShorthandControl,
585
621
  {
586
622
  value: "line-through",
@@ -588,8 +624,8 @@ var TextStyleControl = () => {
588
624
  updateValues: setTextDecoration,
589
625
  "aria-label": "line-through"
590
626
  },
591
- /* @__PURE__ */ React14.createElement("span", { style: { textDecoration: "line-through", fontSize: "12px" } }, "S")
592
- ), /* @__PURE__ */ React14.createElement(
627
+ /* @__PURE__ */ React15.createElement("span", { style: { textDecoration: "line-through", fontSize: "12px" } }, "S")
628
+ ), /* @__PURE__ */ React15.createElement(
593
629
  ShorthandControl,
594
630
  {
595
631
  value: "underline",
@@ -597,7 +633,7 @@ var TextStyleControl = () => {
597
633
  updateValues: setTextDecoration,
598
634
  "aria-label": "underline"
599
635
  },
600
- /* @__PURE__ */ React14.createElement("span", { style: { textDecoration: "underline", fontSize: "12px" } }, "U")
636
+ /* @__PURE__ */ React15.createElement("span", { style: { textDecoration: "underline", fontSize: "12px" } }, "U")
601
637
  )));
602
638
  };
603
639
  var ShorthandControl = ({
@@ -616,19 +652,19 @@ var ShorthandControl = ({
616
652
  updateValues([...valuesArr, newValue].join(" "));
617
653
  }
618
654
  };
619
- return /* @__PURE__ */ React14.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
655
+ return /* @__PURE__ */ React15.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
620
656
  };
621
657
  var ToggleButton = ({ onChange, ...props }) => {
622
658
  const handleChange = (_e, newValue) => {
623
659
  onChange(newValue);
624
660
  };
625
- return /* @__PURE__ */ React14.createElement(ToggleButtonBase, { ...props, onChange: handleChange, size: "tiny", sx: { px: 1.5 } });
661
+ return /* @__PURE__ */ React15.createElement(ToggleButtonBase, { ...props, onChange: handleChange, size: "tiny", sx: { px: 1.5 } });
626
662
  };
627
663
 
628
664
  // src/components/style-sections/typography-section.tsx
629
- import { __ as __4 } from "@wordpress/i18n";
665
+ import { __ as __5 } from "@wordpress/i18n";
630
666
  var TypographySection = () => {
631
- return /* @__PURE__ */ React15.createElement(CollapsibleSection, { title: __4("Typography", "elementor") }, /* @__PURE__ */ React15.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React15.createElement(TextStyleControl, null)));
667
+ return /* @__PURE__ */ React16.createElement(AccordionSection, { title: __5("Typography", "elementor") }, /* @__PURE__ */ React16.createElement(Stack8, { gap: 1.5 }, /* @__PURE__ */ React16.createElement(TextStyleControl, null)));
632
668
  };
633
669
 
634
670
  // src/components/style-tab.tsx
@@ -636,13 +672,13 @@ var StyleTab = () => {
636
672
  const { element } = useElementContext();
637
673
  const elementStyles = useElementStyles(element.id);
638
674
  const [selectedStyleDef = null] = Object.values(elementStyles || {});
639
- return /* @__PURE__ */ React16.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React16.createElement(Stack8, null, /* @__PURE__ */ React16.createElement(SizeSection, null), /* @__PURE__ */ React16.createElement(TypographySection, null)));
675
+ return /* @__PURE__ */ React17.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React17.createElement(Stack9, null, /* @__PURE__ */ React17.createElement(SizeSection, null), /* @__PURE__ */ React17.createElement(TypographySection, null)));
640
676
  };
641
677
 
642
678
  // src/components/editing-panel-tabs.tsx
643
679
  var EditingPanelTabs = () => {
644
680
  const { getTabProps, getTabPanelProps, getTabsProps } = useTabs("settings");
645
- return /* @__PURE__ */ React17.createElement(Stack9, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React17.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React17.createElement(Tab, { label: __5("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React17.createElement(Tab, { label: __5("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React17.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React17.createElement(SettingsTab, null)), /* @__PURE__ */ React17.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React17.createElement(StyleTab, null)));
681
+ return /* @__PURE__ */ React18.createElement(Stack10, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React18.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React18.createElement(Tab, { label: __6("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React18.createElement(Tab, { label: __6("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React18.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React18.createElement(SettingsTab, null)), /* @__PURE__ */ React18.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React18.createElement(StyleTab, null)));
646
682
  };
647
683
 
648
684
  // src/components/editing-panel.tsx
@@ -653,8 +689,8 @@ var EditingPanel = () => {
653
689
  if (elements.length !== 1 || !elementType) {
654
690
  return null;
655
691
  }
656
- const panelTitle = __6("Edit %s", "elementor").replace("%s", elementType.title);
657
- return /* @__PURE__ */ React18.createElement(Panel, null, /* @__PURE__ */ React18.createElement(PanelHeader, null, /* @__PURE__ */ React18.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React18.createElement(EditingPanelTabs, null))));
692
+ const panelTitle = __7("Edit %s", "elementor").replace("%s", elementType.title);
693
+ return /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React19.createElement(PanelBody, null, /* @__PURE__ */ React19.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React19.createElement(EditingPanelTabs, null))));
658
694
  };
659
695
 
660
696
  // src/panel.ts