@elementor/editor-controls 1.0.0 → 1.1.0

package/src/controls/size-control.tsx

@@ -24,6 +24,7 @@ type SizeControlProps = {
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: MutableRefObject< HTMLElement | undefined >;
+	defaultUnit?: Unit;
 };
 
 type State = {
@@ -33,9 +34,10 @@ type State = {
 };
 
 export const SizeControl = createControl( ( props: SizeControlProps ) => {
+	const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
 	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
 	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
-	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue ) );
+	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, defaultUnit ) );
 	const activeBreakpoint = useActiveBreakpoint();
 
 	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
@@ -56,7 +58,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			return !! newState?.numeric || newState?.numeric === 0;
 		},
 		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? DEFAULT_UNIT,
+			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
 			numeric: newState?.numeric ?? DEFAULT_SIZE,
 			custom: newState?.custom ?? '',
 		} ),
@@ -101,7 +103,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	};
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue );
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
 		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
 		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
 
@@ -120,7 +122,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	}, [ sizeValue ] );
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue );
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
 
 		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
 			setState( newState );
@@ -165,8 +167,8 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
 }
 
-function createStateFromSizeProp( sizeValue: SizeValue | null ): State {
-	const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+	const unit = sizeValue?.unit ?? defaultUnit;
 	const size = sizeValue?.size ?? '';
 
 	return {

package/src/hooks/use-repeatable-control-context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import { type PropTypeUtil } from '@elementor/editor-props';
+
+export type ChildControlConfig = {
+	component: React.ComponentType;
+	props?: Record< string, unknown >;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	propTypeUtil: PropTypeUtil< string, any >;
+	label?: string;
+};
+
+const RepeatableControlContext = createContext< ChildControlConfig | undefined >( undefined );
+
+const useRepeatableControlContext = () => {
+	const context = useContext( RepeatableControlContext );
+
+	if ( ! context ) {
+		throw new Error( 'useRepeatableControlContext must be used within RepeatableControl' );
+	}
+
+	return context;
+};
+
+export { RepeatableControlContext, useRepeatableControlContext };

package/src/index.ts

@@ -19,6 +19,9 @@ export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 export { SwitchControl } from './controls/switch-control';
+export { RepeatableControl } from './controls/repeatable-control';
+export { KeyValueControl } from './controls/key-value-control';
+export { PositionControl } from './controls/position-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';