@elementor/editor-components 4.0.0-633 → 4.0.0-635

package/src/extended/sync/create-components-before-save.ts

@@ -1,9 +1,9 @@
 import { updateElementSettings, type V1ElementData } from '@elementor/editor-elements';
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../../api';
 import { type ComponentInstanceProp } from '../../prop-types/component-instance-prop-type';
-import { selectUnpublishedComponents, slice } from '../../store/store';
+import { componentsActions } from '../../store/dispatchers';
+import { componentsSelectors } from '../../store/selectors';
 import { type DocumentSaveStatus, type UnpublishedComponent } from '../../types';
 
 export async function createComponentsBeforeSave( {
@@ -13,7 +13,7 @@ export async function createComponentsBeforeSave( {
 	elements: V1ElementData[];
 	status: DocumentSaveStatus;
 } ) {
-	const unpublishedComponents = selectUnpublishedComponents( getState() );
+	const unpublishedComponents = componentsSelectors.getUnpublishedComponents();
 
 	if ( ! unpublishedComponents.length ) {
 		return;
@@ -24,20 +24,18 @@ export async function createComponentsBeforeSave( {
 
 		updateComponentInstances( elements, uidToComponentId );
 
-		dispatch(
-			slice.actions.add(
-				unpublishedComponents.map( ( component ) => ( {
-					id: uidToComponentId.get( component.uid ) as number,
-					name: component.name,
-					uid: component.uid,
-					overridableProps: component.overridableProps ? component.overridableProps : undefined,
-				} ) )
-			)
+		componentsActions.add(
+			unpublishedComponents.map( ( component ) => ( {
+				id: uidToComponentId.get( component.uid ) as number,
+				name: component.name,
+				uid: component.uid,
+				overridableProps: component.overridableProps ? component.overridableProps : undefined,
+			} ) )
 		);
-		dispatch( slice.actions.resetUnpublished() );
+		componentsActions.resetUnpublished();
 	} catch ( error ) {
 		const failedUids = unpublishedComponents.map( ( component ) => component.uid );
-		dispatch( slice.actions.removeUnpublished( failedUids ) );
+		componentsActions.removeUnpublished( failedUids );
 
 		throw new Error( `Failed to publish components: ${ error }` );
 	}

package/src/extended/sync/set-component-overridable-props-settings-before-save.ts

@@ -1,8 +1,7 @@
 import { type V1Document } from '@elementor/editor-documents';
 import { type V1Element } from '@elementor/editor-elements';
-import { __getState as getState } from '@elementor/store';
 
-import { selectOverridableProps } from '../../store/store';
+import { componentsSelectors } from '../../store/selectors';
 import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 
 export const setComponentOverridablePropsSettingsBeforeSave = ( {
@@ -16,7 +15,7 @@ export const setComponentOverridablePropsSettingsBeforeSave = ( {
 		return;
 	}
 
-	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+	const overridableProps = componentsSelectors.getOverridableProps( currentDocument.id );
 	if ( overridableProps ) {
 		container.settings.set( 'overridable_props', overridableProps );
 	}

package/src/extended/sync/update-archived-component-before-save.ts

@@ -1,8 +1,7 @@
 import { type NotificationData, notify } from '@elementor/editor-notifications';
-import { __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../../api';
-import { selectArchivedThisSession } from '../../store/store';
+import { componentsSelectors } from '../../store/selectors';
 import { type DocumentSaveStatus } from '../../types';
 
 const failedNotification = ( message: string ): NotificationData => ( {
@@ -13,7 +12,7 @@ const failedNotification = ( message: string ): NotificationData => ( {
 
 export const updateArchivedComponentBeforeSave = async ( status: DocumentSaveStatus ) => {
 	try {
-		const archivedComponents = selectArchivedThisSession( getState() );
+		const archivedComponents = componentsSelectors.getArchivedThisSession();
 
 		if ( ! archivedComponents.length ) {
 			return;

package/src/extended/sync/update-component-title-before-save.ts

@@ -1,11 +1,10 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
 import { apiClient } from '../../api';
-import { selectUpdatedComponentNames, slice } from '../../store/store';
+import { componentsActions } from '../../store/dispatchers';
+import { componentsSelectors } from '../../store/selectors';
 import { type DocumentSaveStatus } from '../../types';
 
 export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
-	const updatedComponentNames = selectUpdatedComponentNames( getState() );
+	const updatedComponentNames = componentsSelectors.getUpdatedComponentNames();
 
 	if ( ! updatedComponentNames.length ) {
 		return;
@@ -14,6 +13,6 @@ export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus
 	const result = await apiClient.updateComponentTitle( updatedComponentNames, status );
 
 	if ( result.failedIds.length === 0 ) {
-		dispatch( slice.actions.cleanUpdatedComponentNames() );
+		componentsActions.cleanUpdatedComponentNames();
 	}
 };

package/src/extended/utils/component-name-validation.ts

@@ -1,12 +1,10 @@
-import { __getState as getState } from '@elementor/store';
-
-import { selectComponents } from '../../store/store';
+import { componentsSelectors } from '../../store/selectors';
 import { createSubmitComponentSchema } from './component-form-schema';
 
 type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };
 
 export function validateComponentName( label: string ): ValidationResult {
-	const existingComponentTitles = selectComponents( getState() )?.map( ( { name } ) => name ) ?? [];
+	const existingComponentTitles = componentsSelectors.getComponents()?.map( ( { name } ) => name ) ?? [];
 	const schema = createSubmitComponentSchema( existingComponentTitles );
 	const result = schema.safeParse( { componentName: label.toLowerCase() } );
 

package/src/extended/utils/is-editing-component.ts

@@ -1,13 +1,5 @@
-import { __getStore as getStore } from '@elementor/store';
-
-import { type ComponentsSlice, selectCurrentComponentId } from '../../store/store';
+import { componentsSelectors } from '../../store/selectors';
 
 export function isEditingComponent(): boolean {
-	const state = getStore()?.getState() as ComponentsSlice | undefined;
-
-	if ( ! state ) {
-		return false;
-	}
-
-	return selectCurrentComponentId( state ) !== null;
+	return componentsSelectors.getCurrentComponentId() !== null;
 }

package/src/index.ts

@@ -1 +1,121 @@
 export { init } from './init';
+
+export { apiClient } from './api';
+export type { ComponentItems, CreateComponentPayload, CreateComponentResponse } from './api';
+
+export { ComponentSearch } from './components/components-tab/component-search';
+export { ComponentItem, ComponentName } from './components/components-tab/components-item';
+export type { ComponentItemProps, ComponentNameProps } from './components/components-tab/components-item';
+export {
+	ComponentsList,
+	EmptySearchResult,
+	EmptyState as ComponentsEmptyState,
+	useFilteredComponents,
+} from './components/components-tab/components-list';
+export { LoadingComponents } from './components/components-tab/loading-components';
+export { SearchProvider, useSearch } from './components/components-tab/search-provider';
+export { EmptyState as InstanceEmptyState } from './components/instance-editing-panel/empty-state';
+export { InstancePanelBody } from './components/instance-editing-panel/instance-panel-body';
+export { EditComponentAction, InstancePanelHeader } from './components/instance-editing-panel/instance-panel-header';
+export { useInstancePanelData } from './components/instance-editing-panel/use-instance-panel-data';
+
+export { COMPONENT_WIDGET_TYPE } from './create-component-type';
+
+export { useComponents } from './hooks/use-components';
+export { useComponentsPermissions } from './hooks/use-components-permissions';
+export { useSanitizeOverridableProps } from './hooks/use-sanitize-overridable-props';
+
+export { componentInstanceOverridePropTypeUtil } from './prop-types/component-instance-override-prop-type';
+export type {
+	ComponentInstanceOverrideProp,
+	ComponentInstanceOverridePropValue,
+} from './prop-types/component-instance-override-prop-type';
+export { componentInstanceOverridesPropTypeUtil } from './prop-types/component-instance-overrides-prop-type';
+export type {
+	ComponentInstanceOverride,
+	ComponentInstanceOverridesPropValue,
+} from './prop-types/component-instance-overrides-prop-type';
+export { componentInstancePropTypeUtil } from './prop-types/component-instance-prop-type';
+export type { ComponentInstanceProp, ComponentInstancePropValue } from './prop-types/component-instance-prop-type';
+export { componentOverridablePropTypeUtil } from './prop-types/component-overridable-prop-type';
+export type {
+	ComponentOverridableProp,
+	ComponentOverridablePropValue,
+} from './prop-types/component-overridable-prop-type';
+
+export {
+	ComponentInstanceProvider,
+	useComponentId,
+	useComponentInstanceOverrides,
+	useComponentOverridableProps,
+} from './provider/component-instance-context';
+export {
+	OverridablePropProvider,
+	useComponentInstanceElement,
+	useOverridablePropValue,
+} from './provider/overridable-prop-context';
+
+export { loadComponentsAssets } from './store/actions/load-components-assets';
+export { updateOverridableProp } from './store/actions/update-overridable-prop';
+export { componentsActions } from './store/dispatchers';
+export { componentsSelectors } from './store/selectors';
+export {
+	SLICE_NAME,
+	selectArchivedThisSession,
+	selectComponent,
+	selectComponentByUid,
+	selectComponents,
+	selectCreatedThisSession,
+	selectCurrentComponent,
+	selectCurrentComponentId,
+	selectData,
+	selectFlatStyles,
+	selectIsOverridablePropsLoaded,
+	selectLoadIsError,
+	selectLoadIsPending,
+	selectOverridableProps,
+	selectPath,
+	selectStyles,
+	selectUnpublishedComponents,
+	selectUpdatedComponentNames,
+	slice,
+	useComponent,
+	useCurrentComponent,
+	useCurrentComponentId,
+	useIsSanitizedComponent,
+	useOverridableProps,
+} from './store/store';
+export type { ComponentsPathItem, ComponentsSlice, SanitizeAttributes } from './store/store';
+
+export { publishDraftComponentsInPageBeforeSave } from './sync/publish-draft-components-in-page-before-save';
+
+export type {
+	Component,
+	ComponentFormValues,
+	ComponentId,
+	ComponentOverridable,
+	ComponentRenderContext,
+	DocumentSaveStatus,
+	DocumentStatus,
+	ElementorStorage,
+	ExtendedWindow,
+	OriginalElementData,
+	OriginPropFields,
+	OverridableProp,
+	OverridableProps,
+	OverridablePropsGroup,
+	PublishedComponent,
+	StylesDefinition,
+	UnpublishedComponent,
+	UpdatedComponentName,
+} from './types';
+
+export { filterValidOverridableProps, isExposedPropValid } from './utils/filter-valid-overridable-props';
+export { getContainerByOriginId } from './utils/get-container-by-origin-id';
+export { getOverridableProp } from './utils/get-overridable-prop';
+export { getPropTypeForComponentOverride } from './utils/get-prop-type-for-component-override';
+export { isComponentInstance } from './utils/is-component-instance';
+export { resolveOverridePropValue } from './utils/resolve-override-prop-value';
+export { switchToComponent } from './utils/switch-to-component';
+export { onElementDrop, trackComponentEvent } from './utils/tracking';
+export type { Source } from './utils/tracking';

package/src/store/actions/update-overridable-prop.ts

@@ -1,16 +1,15 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
 import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
 import { type OriginPropFields, type OverridableProps } from '../../types';
 import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
-import { selectOverridableProps, slice } from '../store';
+import { componentsActions } from '../dispatchers';
+import { componentsSelectors } from '../selectors';
 
 export function updateOverridableProp(
 	componentId: number,
 	propValue: ComponentOverridablePropValue,
 	originPropFields?: OriginPropFields
 ) {
-	const overridableProps = selectOverridableProps( getState(), componentId );
+	const overridableProps = componentsSelectors.getOverridableProps( componentId );
 
 	if ( ! overridableProps ) {
 		return;
@@ -44,10 +43,5 @@ export function updateOverridableProp(
 		},
 	} satisfies OverridableProps;
 
-	dispatch(
-		slice.actions.setOverridableProps( {
-			componentId,
-			overridableProps: newOverridableProps,
-		} )
-	);
+	componentsActions.setOverridableProps( componentId, newOverridableProps );
 }

package/src/store/dispatchers.ts

@@ -0,0 +1,63 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { __dispatch as dispatch, __getStore as getStore } from '@elementor/store';
+
+import { type ComponentId, type OverridableProps, type PublishedComponent, type UnpublishedComponent } from '../types';
+import { type ComponentsPathItem, type SanitizeAttributes, slice } from './store';
+
+function safeDispatch() {
+	return getStore()?.dispatch;
+}
+
+export const componentsActions = {
+	add( components: PublishedComponent | PublishedComponent[] ) {
+		dispatch( slice.actions.add( components ) );
+	},
+	load( components: PublishedComponent[] ) {
+		dispatch( slice.actions.load( components ) );
+	},
+	addUnpublished( component: UnpublishedComponent ) {
+		dispatch( slice.actions.addUnpublished( component ) );
+	},
+	removeUnpublished( uids: string | string[] ) {
+		dispatch( slice.actions.removeUnpublished( uids ) );
+	},
+	resetUnpublished() {
+		dispatch( slice.actions.resetUnpublished() );
+	},
+	removeStyles( id: ComponentId ) {
+		dispatch( slice.actions.removeStyles( { id } ) );
+	},
+	addStyles( styles: Record< string, unknown > ) {
+		dispatch( slice.actions.addStyles( styles ) );
+	},
+	addCreatedThisSession( uid: string ) {
+		dispatch( slice.actions.addCreatedThisSession( uid ) );
+	},
+	removeCreatedThisSession( uid: string ) {
+		dispatch( slice.actions.removeCreatedThisSession( uid ) );
+	},
+	archive( componentId: ComponentId ) {
+		dispatch( slice.actions.archive( componentId ) );
+	},
+	setCurrentComponentId( id: V1Document[ 'id' ] | null ) {
+		safeDispatch()?.( slice.actions.setCurrentComponentId( id ) );
+	},
+	setPath( path: ComponentsPathItem[] ) {
+		safeDispatch()?.( slice.actions.setPath( path ) );
+	},
+	setOverridableProps( componentId: ComponentId, overridableProps: OverridableProps ) {
+		dispatch( slice.actions.setOverridableProps( { componentId, overridableProps } ) );
+	},
+	rename( componentUid: string, name: string ) {
+		dispatch( slice.actions.rename( { componentUid, name } ) );
+	},
+	cleanUpdatedComponentNames() {
+		dispatch( slice.actions.cleanUpdatedComponentNames() );
+	},
+	updateComponentSanitizedAttribute( componentId: ComponentId, attribute: SanitizeAttributes ) {
+		dispatch( slice.actions.updateComponentSanitizedAttribute( { componentId, attribute } ) );
+	},
+	resetSanitizedComponents() {
+		dispatch( slice.actions.resetSanitizedComponents() );
+	},
+};

package/src/store/selectors.ts

@@ -0,0 +1,49 @@
+import { __getState as getState, __getStore as getStore } from '@elementor/store';
+
+import { type ComponentId } from '../types';
+import {
+	type ComponentsSlice,
+	selectArchivedThisSession,
+	selectComponentByUid,
+	selectComponents,
+	selectCurrentComponent,
+	selectCurrentComponentId,
+	selectOverridableProps,
+	selectUnpublishedComponents,
+	selectUpdatedComponentNames,
+} from './store';
+
+function safeGetState(): ComponentsSlice | undefined {
+	return getStore()?.getState() as ComponentsSlice | undefined;
+}
+
+export const componentsSelectors = {
+	getOverridableProps( componentId: ComponentId ) {
+		return selectOverridableProps( getState(), componentId );
+	},
+	getCurrentComponent() {
+		return selectCurrentComponent( getState() );
+	},
+	getCurrentComponentId() {
+		const state = safeGetState();
+		if ( ! state ) {
+			return null;
+		}
+		return selectCurrentComponentId( state );
+	},
+	getUnpublishedComponents() {
+		return selectUnpublishedComponents( getState() );
+	},
+	getUpdatedComponentNames() {
+		return selectUpdatedComponentNames( getState() );
+	},
+	getArchivedThisSession() {
+		return selectArchivedThisSession( getState() );
+	},
+	getComponents() {
+		return selectComponents( getState() );
+	},
+	getComponentByUid( componentUid: string ) {
+		return selectComponentByUid( getState(), componentUid );
+	},
+};