@elementor/editor-controls 3.32.0-67 → 3.32.0-68

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentType } from 'react';
 import { SxProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 import * as _elementor_locations from '@elementor/locations';
 
 type ImageControlProps = {
@@ -230,6 +231,13 @@ declare const BackgroundControl: ControlComponent<() => React$1.JSX.Element>;
 
 declare const SwitchControl: ControlComponent<() => React$1.JSX.Element>;
 
+type TooltipAddItemActionProps = {
+    disabled?: boolean;
+    enableTooltip?: boolean;
+    tooltipContent?: React$1.ReactNode;
+    newItemIndex?: number;
+};
+
 type ChildControlConfig = {
     component: React.ComponentType;
     props?: Record<string, unknown>;
@@ -247,8 +255,9 @@ type RepeatableControlProps = {
     patternLabel?: string;
     placeholder?: string;
     propKey?: string;
+    addItemTooltipProps?: TooltipAddItemActionProps;
 };
-declare const RepeatableControl: ControlComponent<({ repeaterLabel, childControlConfig, showDuplicate, showToggle, initialValues, patternLabel, placeholder, propKey, }: RepeatableControlProps) => React$1.JSX.Element | null>;
+declare const RepeatableControl: ControlComponent<({ repeaterLabel, childControlConfig, showDuplicate, showToggle, initialValues, patternLabel, placeholder, propKey, addItemTooltipProps, }: RepeatableControlProps) => React$1.JSX.Element | null>;
 
 type KeyValueControlProps = {
     keyName?: string;
@@ -271,8 +280,9 @@ declare const TransformBaseControl: ({ anchorRef }: {
     anchorRef: React$1.RefObject<HTMLDivElement | null>;
 }) => React$1.JSX.Element;
 
-declare const TransitionRepeaterControl: ControlComponent<(props: {
+declare const TransitionRepeaterControl: ControlComponent<({ recentlyUsedList, currentStyleState, }: {
     recentlyUsedList: string[];
+    currentStyleState: StyleDefinitionState;
 }) => React$1.JSX.Element>;
 
 declare const PopoverContent: FC<PropsWithChildren<StackProps>>;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentType } from 'react';
 import { SxProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 import * as _elementor_locations from '@elementor/locations';
 
 type ImageControlProps = {
@@ -230,6 +231,13 @@ declare const BackgroundControl: ControlComponent<() => React$1.JSX.Element>;
 
 declare const SwitchControl: ControlComponent<() => React$1.JSX.Element>;
 
+type TooltipAddItemActionProps = {
+    disabled?: boolean;
+    enableTooltip?: boolean;
+    tooltipContent?: React$1.ReactNode;
+    newItemIndex?: number;
+};
+
 type ChildControlConfig = {
     component: React.ComponentType;
     props?: Record<string, unknown>;
@@ -247,8 +255,9 @@ type RepeatableControlProps = {
     patternLabel?: string;
     placeholder?: string;
     propKey?: string;
+    addItemTooltipProps?: TooltipAddItemActionProps;
 };
-declare const RepeatableControl: ControlComponent<({ repeaterLabel, childControlConfig, showDuplicate, showToggle, initialValues, patternLabel, placeholder, propKey, }: RepeatableControlProps) => React$1.JSX.Element | null>;
+declare const RepeatableControl: ControlComponent<({ repeaterLabel, childControlConfig, showDuplicate, showToggle, initialValues, patternLabel, placeholder, propKey, addItemTooltipProps, }: RepeatableControlProps) => React$1.JSX.Element | null>;
 
 type KeyValueControlProps = {
     keyName?: string;
@@ -271,8 +280,9 @@ declare const TransformBaseControl: ({ anchorRef }: {
     anchorRef: React$1.RefObject<HTMLDivElement | null>;
 }) => React$1.JSX.Element;
 
-declare const TransitionRepeaterControl: ControlComponent<(props: {
+declare const TransitionRepeaterControl: ControlComponent<({ recentlyUsedList, currentStyleState, }: {
     recentlyUsedList: string[];
+    currentStyleState: StyleDefinitionState;
 }) => React$1.JSX.Element>;
 
 declare const PopoverContent: FC<PropsWithChildren<StackProps>>;

package/dist/index.js

@@ -3458,7 +3458,7 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React50.createElement(import_ui42.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React50.createElement(import_ui42.Box, { sx: { ml: "auto", cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React50.createElement(
     import_ui42.IconButton,
     {
       size: SIZE4,
@@ -3473,22 +3473,7 @@ var ConditionalToolTip = ({
   children,
   enable,
   content
-}) => enable && content ? /* @__PURE__ */ React50.createElement(
-  import_ui42.Infotip,
-  {
-    placement: "right",
-    content: /* @__PURE__ */ React50.createElement(
-      import_ui42.Box,
-      {
-        component: "span",
-        "aria-label": void 0,
-        sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
-      },
-      content
-    )
-  },
-  children
-) : children;
+}) => enable && content ? /* @__PURE__ */ React50.createElement(import_ui42.Infotip, { placement: "right", color: "secondary", content }, children) : children;
 
 // src/components/unstable-repeater/header/header.tsx
 var React54 = __toESM(require("react"));
@@ -4354,7 +4339,8 @@ var RepeatableControl = createControl(
     initialValues,
     patternLabel,
     placeholder,
-    propKey
+    propKey,
+    addItemTooltipProps
   }) => {
     const { propTypeUtil: childPropTypeUtil } = childControlConfig;
     if (!childPropTypeUtil) {
@@ -4379,7 +4365,7 @@ var RepeatableControl = createControl(
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil
       },
-      /* @__PURE__ */ React69.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React69.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+      /* @__PURE__ */ React69.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React69.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
       /* @__PURE__ */ React69.createElement(
         ItemsContainer,
         {
@@ -4994,7 +4980,16 @@ var TransformRepeaterControl = createControl(() => {
   const context = useBoundProp(import_editor_props42.transformPropTypeUtil);
   return /* @__PURE__ */ React81.createElement(PropProvider, { ...context }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React81.createElement(Repeater2, null)));
 });
-var ToolTip = /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor")));
+var ToolTip = /* @__PURE__ */ React81.createElement(
+  import_ui72.Box,
+  {
+    component: "span",
+    "aria-label": void 0,
+    sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
+  },
+  /* @__PURE__ */ React81.createElement(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor"))
+);
 var Repeater2 = () => {
   const transformFunctionsContext = useBoundProp(import_editor_props42.transformFunctionsPropTypeUtil);
   const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
@@ -5025,6 +5020,8 @@ var Repeater2 = () => {
 // src/controls/transition-control/transition-repeater-control.tsx
 var React84 = __toESM(require("react"));
 var import_editor_props45 = require("@elementor/editor-props");
+var import_icons32 = require("@elementor/icons");
+var import_ui75 = require("@elementor/ui");
 var import_i18n44 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
@@ -5228,32 +5225,56 @@ function getChildControlConfig(recentlyUsedList) {
     props: getSelectionSizeProps(recentlyUsedList)
   };
 }
-var TransitionRepeaterControl = createControl((props) => {
-  return /* @__PURE__ */ React84.createElement(
-    RepeatableControl,
-    {
-      label: (0, import_i18n44.__)("Transitions", "elementor"),
-      repeaterLabel: (0, import_i18n44.__)("Transitions", "elementor"),
-      patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-      placeholder: (0, import_i18n44.__)("Empty Transition", "elementor"),
-      showDuplicate: false,
-      showToggle: true,
-      initialValues: initialTransitionValue,
-      childControlConfig: getChildControlConfig(props.recentlyUsedList),
-      propKey: "transition"
-    }
-  );
-});
+var disableAddItemTooltipContent = /* @__PURE__ */ React84.createElement(
+  import_ui75.Alert,
+  {
+    sx: {
+      width: 280,
+      gap: 0.5
+    },
+    color: "secondary",
+    icon: /* @__PURE__ */ React84.createElement(import_icons32.InfoCircleFilledIcon, null)
+  },
+  /* @__PURE__ */ React84.createElement(import_ui75.AlertTitle, null, (0, import_i18n44.__)("Transitions", "elementor")),
+  /* @__PURE__ */ React84.createElement(import_ui75.Box, { component: "span" }, /* @__PURE__ */ React84.createElement(import_ui75.Typography, { variant: "body2" }, (0, import_i18n44.__)("Switch to 'Normal' state to add a transition.", "elementor")))
+);
+var TransitionRepeaterControl = createControl(
+  ({
+    recentlyUsedList,
+    currentStyleState
+  }) => {
+    const currentStyleIsNormal = currentStyleState === null;
+    return /* @__PURE__ */ React84.createElement(
+      RepeatableControl,
+      {
+        label: (0, import_i18n44.__)("Transitions", "elementor"),
+        repeaterLabel: (0, import_i18n44.__)("Transitions", "elementor"),
+        patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
+        placeholder: (0, import_i18n44.__)("Empty Transition", "elementor"),
+        showDuplicate: false,
+        showToggle: true,
+        initialValues: initialTransitionValue,
+        childControlConfig: getChildControlConfig(recentlyUsedList),
+        propKey: "transition",
+        addItemTooltipProps: {
+          disabled: !currentStyleIsNormal,
+          enableTooltip: !currentStyleIsNormal,
+          tooltipContent: disableAddItemTooltipContent
+        }
+      }
+    );
+  }
+);
 
 // src/components/css-code-editor/css-editor.tsx
 var React86 = __toESM(require("react"));
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_ui76 = require("@elementor/ui");
+var import_ui77 = require("@elementor/ui");
 var import_react45 = require("@monaco-editor/react");
 
 // src/components/css-code-editor/css-editor.styles.ts
-var import_ui75 = require("@elementor/ui");
-var EditorWrapper = (0, import_ui75.styled)(import_ui75.Box)`
+var import_ui76 = require("@elementor/ui");
+var EditorWrapper = (0, import_ui76.styled)(import_ui76.Box)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5264,7 +5285,7 @@ var EditorWrapper = (0, import_ui75.styled)(import_ui75.Box)`
 		z-index: 99999999 !important;
 	}
 `;
-var ResizeHandle = (0, import_ui75.styled)(import_ui75.Button)`
+var ResizeHandle = (0, import_ui76.styled)(import_ui76.Button)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5471,7 +5492,7 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
   };
 };
 var CssEditor = ({ value, onChange }) => {
-  const theme = (0, import_ui76.useTheme)();
+  const theme = (0, import_ui77.useTheme)();
   const containerRef = React86.useRef(null);
   const editorRef = React86.useRef(null);
   const monacoRef = React86.useRef(null);