@elementor/editor-controls 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# @elementor/editor-controls
+
+## 0.1.0
+
+### Minor Changes
+
+- e4c6e3b: update @elementor/ui version
+  fix color picker position in box shadow repeater control
+  make the color control full width
+- 00bdd7e: Added layout section with display field, updated toggle button group to match new children elements
+- cecdfba: Updated display field with a flex option, together with a "justify content" field
+- 6d5475d: Show spinner in image media control `CardMedia` on initial fetch.
+- 55962f8: Add background color overlay control
+- e2ee013: Created the `editor-controls` packages.
+
+### Patch Changes
+
+- 7781969: Update `@elementor/ui` version
+- 5c3d546: Fix some style issues in the editing panel and controls
+- Updated dependencies [6e240a8]
+  - @elementor/editor-props@0.3.0
+  - @elementor/wp-media@0.2.2

package/README.md

@@ -0,0 +1,4 @@
+# Editor Props
+
+> [!WARNING]
+> This package is under development and not ready for production use.

package/dist/index.d.mts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { ComponentType, ReactNode, PropsWithChildren } from 'react';
+import { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
+import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
+
+type AnyComponentType = ComponentType<any>;
+declare const brandSymbol: unique symbol;
+type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
+    [brandSymbol]: true;
+};
+
+type ImageControlProps = {
+    sizes: {
+        label: string;
+        value: string;
+    }[];
+};
+declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
+
+declare const TextControl: ControlComponent<({ placeholder }: {
+    placeholder?: string;
+}) => React.JSX.Element>;
+
+type Props$2 = {
+    placeholder?: string;
+};
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
+
+type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
+type SizeControlProps = {
+    placeholder?: string;
+    startIcon?: React.ReactNode;
+    units?: Unit[];
+};
+declare const SizeControl: ControlComponent<({ units, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
+
+declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
+
+declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
+
+declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
+
+type Props$1<T> = {
+    options: Array<{
+        label: string;
+        value: T;
+        disabled?: boolean;
+    }>;
+};
+declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$1<T>) => React.JSX.Element)>;
+
+declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
+
+type RenderContentProps = {
+    size: ToggleButtonProps['size'];
+};
+type ToggleButtonGroupItem<TValue> = {
+    value: TValue;
+    label: string;
+    renderContent: ({ size }: RenderContentProps) => React.ReactNode;
+    showTooltip?: boolean;
+};
+
+type ToggleControlProps<T extends PropValue> = {
+    options: ToggleButtonGroupItem<T>[];
+    fullWidth?: boolean;
+    size?: ToggleButtonProps['size'];
+};
+declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
+
+declare const NumberControl: ControlComponent<({ placeholder }: {
+    placeholder?: string;
+}) => React.JSX.Element>;
+
+type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
+type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
+    icon: ReactNode;
+    label: string;
+    bind: keyof TPropValue['value'];
+};
+type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>
+];
+type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
+    label: string;
+    icon: ReactNode;
+    items: EqualUnequalItems<TMultiPropType, TPropValue>;
+    multiSizeType: TMultiPropType;
+};
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>>({ label, icon, items, multiSizeType }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
+
+declare const LinkedDimensionsControl: ControlComponent<({ label }: {
+    label: string;
+}) => React.JSX.Element>;
+
+declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
+
+declare const ControlLabel: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+
+type ReplaceWhenParams = {
+    value: PropValue;
+};
+type CreateControlReplacement = {
+    component: ComponentType;
+    condition: ({ value }: ReplaceWhenParams) => boolean;
+};
+declare const ControlReplacementProvider: ({ component, condition, children, }: React.PropsWithChildren<CreateControlReplacement>) => React.JSX.Element;
+declare const createControlReplacement: () => {
+    replaceControl: ({ component, condition }: CreateControlReplacement) => void;
+    getControlReplacement: () => CreateControlReplacement;
+};
+
+type BoundPropContext<T extends PropValue> = {
+    bind: PropKey;
+    setValue: (value: T | undefined) => void;
+    value: T | undefined;
+};
+type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
+    children: React.ReactNode;
+};
+declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
+declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
+declare function useBoundProp<T extends PropValue>(defaultValue: T): BoundPropContext<T>;
+
+type ControlActionsContext = {
+    items: Array<{
+        id: string;
+        MenuItem: React.ComponentType;
+    }>;
+};
+type ControlActionsProviderProps = PropsWithChildren<ControlActionsContext>;
+declare const ControlActionsProvider: ({ children, items }: ControlActionsProviderProps) => React.JSX.Element;
+declare const useControlActions: () => ControlActionsContext;
+
+type UseInternalStateOptions<TValue> = {
+    external: TValue | undefined;
+    setExternal: (value: TValue | undefined) => void;
+    persistWhen: (value: TValue | undefined) => boolean;
+    fallback: (value: TValue | undefined) => TValue;
+};
+declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
+
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { ComponentType, ReactNode, PropsWithChildren } from 'react';
+import { PropValue, TransformablePropValue, SizePropValue, PropKey } from '@elementor/editor-props';
+import { UnstableColorFieldProps, ToggleButtonProps } from '@elementor/ui';
+
+type AnyComponentType = ComponentType<any>;
+declare const brandSymbol: unique symbol;
+type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
+    [brandSymbol]: true;
+};
+
+type ImageControlProps = {
+    sizes: {
+        label: string;
+        value: string;
+    }[];
+};
+declare const ImageControl: ControlComponent<(props: ImageControlProps) => React.JSX.Element>;
+
+declare const TextControl: ControlComponent<({ placeholder }: {
+    placeholder?: string;
+}) => React.JSX.Element>;
+
+type Props$2 = {
+    placeholder?: string;
+};
+declare const TextAreaControl: ControlComponent<({ placeholder }: Props$2) => React.JSX.Element>;
+
+type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
+type SizeControlProps = {
+    placeholder?: string;
+    startIcon?: React.ReactNode;
+    units?: Unit[];
+};
+declare const SizeControl: ControlComponent<({ units, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
+
+declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
+
+declare const BoxShadowRepeaterControl: ControlComponent<() => React.JSX.Element>;
+
+declare const BackgroundOverlayRepeaterControl: ControlComponent<() => React.JSX.Element>;
+
+type Props$1<T> = {
+    options: Array<{
+        label: string;
+        value: T;
+        disabled?: boolean;
+    }>;
+};
+declare const SelectControl: ControlComponent<(<T extends PropValue>({ options }: Props$1<T>) => React.JSX.Element)>;
+
+declare const ColorControl: ControlComponent<(props: Partial<Omit<UnstableColorFieldProps, "value" | "onChange">>) => React.JSX.Element>;
+
+type RenderContentProps = {
+    size: ToggleButtonProps['size'];
+};
+type ToggleButtonGroupItem<TValue> = {
+    value: TValue;
+    label: string;
+    renderContent: ({ size }: RenderContentProps) => React.ReactNode;
+    showTooltip?: boolean;
+};
+
+type ToggleControlProps<T extends PropValue> = {
+    options: ToggleButtonGroupItem<T>[];
+    fullWidth?: boolean;
+    size?: ToggleButtonProps['size'];
+};
+declare const ToggleControl: ControlComponent<(<T extends PropValue>({ options, fullWidth, size }: ToggleControlProps<T>) => React.JSX.Element)>;
+
+declare const NumberControl: ControlComponent<({ placeholder }: {
+    placeholder?: string;
+}) => React.JSX.Element>;
+
+type MultiSizePropValue<TMultiPropType extends string> = TransformablePropValue<TMultiPropType, Record<string, SizePropValue>>;
+type Item<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
+    icon: ReactNode;
+    label: string;
+    bind: keyof TPropValue['value'];
+};
+type EqualUnequalItems<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = [
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>,
+    Item<TMultiPropType, TPropValue>
+];
+type Props<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>> = {
+    label: string;
+    icon: ReactNode;
+    items: EqualUnequalItems<TMultiPropType, TPropValue>;
+    multiSizeType: TMultiPropType;
+};
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue<TMultiPropType>>({ label, icon, items, multiSizeType }: Props<TMultiPropType, TPropValue>): React.JSX.Element;
+
+declare const LinkedDimensionsControl: ControlComponent<({ label }: {
+    label: string;
+}) => React.JSX.Element>;
+
+declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
+
+declare const ControlLabel: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+
+type ReplaceWhenParams = {
+    value: PropValue;
+};
+type CreateControlReplacement = {
+    component: ComponentType;
+    condition: ({ value }: ReplaceWhenParams) => boolean;
+};
+declare const ControlReplacementProvider: ({ component, condition, children, }: React.PropsWithChildren<CreateControlReplacement>) => React.JSX.Element;
+declare const createControlReplacement: () => {
+    replaceControl: ({ component, condition }: CreateControlReplacement) => void;
+    getControlReplacement: () => CreateControlReplacement;
+};
+
+type BoundPropContext<T extends PropValue> = {
+    bind: PropKey;
+    setValue: (value: T | undefined) => void;
+    value: T | undefined;
+};
+type BoundPropProviderProps<T extends PropValue> = BoundPropContext<T> & {
+    children: React.ReactNode;
+};
+declare const BoundPropProvider: ({ children, value, setValue, bind }: BoundPropProviderProps<PropValue>) => React.JSX.Element;
+declare function useBoundProp<T extends PropValue>(): BoundPropContext<T | undefined>;
+declare function useBoundProp<T extends PropValue>(defaultValue: T): BoundPropContext<T>;
+
+type ControlActionsContext = {
+    items: Array<{
+        id: string;
+        MenuItem: React.ComponentType;
+    }>;
+};
+type ControlActionsProviderProps = PropsWithChildren<ControlActionsContext>;
+declare const ControlActionsProvider: ({ children, items }: ControlActionsProviderProps) => React.JSX.Element;
+declare const useControlActions: () => ControlActionsContext;
+
+type UseInternalStateOptions<TValue> = {
+    external: TValue | undefined;
+    setExternal: (value: TValue | undefined) => void;
+    persistWhen: (value: TValue | undefined) => boolean;
+    fallback: (value: TValue | undefined) => TValue;
+};
+declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
+
+export { BackgroundOverlayRepeaterControl, BoundPropProvider, BoxShadowRepeaterControl, ColorControl, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, ImageControl, LinkedDimensionsControl, NumberControl, SelectControl, SizeControl, StrokeControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };