@elementor/editor-controls 0.17.0 → 0.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.3",
+    "@elementor/editor-elements": "0.6.4",
     "@elementor/editor-props": "0.11.0",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",

package/src/control-adornments/control-adornments-context.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type ComponentType, createContext, type PropsWithChildren, useContext } from 'react';
+
+type ControlAdornmentsItems = Array< {
+	id: string;
+	Adornment: ComponentType;
+} >;
+
+type ControlAdornmentsContext = {
+	items?: ControlAdornmentsItems;
+};
+
+const Context = createContext< ControlAdornmentsContext | null >( null );
+
+type ControlAdornmentsProviderProps = PropsWithChildren< ControlAdornmentsContext >;
+
+export const ControlAdornmentsProvider = ( { children, items }: ControlAdornmentsProviderProps ) => (
+	<Context.Provider value={ { items } }>{ children }</Context.Provider>
+);
+
+export const useControlAdornments = () => {
+	const context = useContext( Context );
+
+	return context?.items ?? [];
+};

package/src/control-adornments/control-adornments.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { useControlAdornments } from './control-adornments-context';
+
+export function ControlAdornments() {
+	const items = useControlAdornments();
+
+	if ( items?.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ items.map( ( { Adornment, id } ) => (
+				<Adornment key={ id } />
+			) ) }
+		</>
+	);
+}

package/src/control-adornments/control-label-with-adornments.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { Stack } from '@elementor/ui';
+
+import { ControlLabel } from '../components/control-label';
+import { ControlAdornments } from './control-adornments';
+
+export const ControlLabelWithAdornments = ( { children }: PropsWithChildren< object > ) => {
+	return (
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+			<ControlLabel>{ children }</ControlLabel>
+			<ControlAdornments />
+		</Stack>
+	);
+};

package/src/index.ts

@@ -37,6 +37,7 @@ export type { FontCategory } from './controls/font-family-control/font-family-co
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
 export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
-
+export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
+export { ControlAdornments } from './control-adornments/control-adornments';
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';