@elementor/editor-controls 4.3.0-beta3 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3022,8 +3022,24 @@ var ToggleControl = createControl(
3022
3022
 
3023
3023
  // src/controls/number-control.tsx
3024
3024
  var React57 = __toESM(require("react"));
3025
+ var import_react30 = require("react");
3025
3026
  var import_editor_props19 = require("@elementor/editor-props");
3026
3027
  var import_ui42 = require("@elementor/ui");
3028
+
3029
+ // src/utils/number-value.ts
3030
+ var isEmptyDraft = (raw) => raw.trim() === "";
3031
+ var parseNumberDraft = (raw, shouldForceInt = false) => {
3032
+ const trimmed = raw.trim();
3033
+ if (trimmed === "") {
3034
+ return null;
3035
+ }
3036
+ const parsed = shouldForceInt ? parseInt(trimmed, 10) : Number(trimmed);
3037
+ return Number.isFinite(parsed) ? parsed : null;
3038
+ };
3039
+ var isInRange = (value, min, max) => value >= min && value <= max;
3040
+ var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
3041
+
3042
+ // src/controls/number-control.tsx
3027
3043
  var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
3028
3044
  var renderSuffix = (propType) => {
3029
3045
  if (propType.meta?.suffix) {
@@ -3034,31 +3050,63 @@ var renderSuffix = (propType) => {
3034
3050
  var NumberControl = createControl(
3035
3051
  ({
3036
3052
  placeholder: labelPlaceholder,
3037
- max = Number.MAX_SAFE_INTEGER,
3038
- min = -Number.MAX_SAFE_INTEGER,
3039
- step = 1,
3053
+ max: maxProp,
3054
+ min: minProp,
3055
+ step: stepProp,
3040
3056
  shouldForceInt = false,
3041
3057
  startIcon,
3042
3058
  disabled: inputDisabled
3043
3059
  }) => {
3060
+ const max = maxProp ?? Number.MAX_SAFE_INTEGER;
3061
+ const min = minProp ?? -Number.MAX_SAFE_INTEGER;
3062
+ const step = stepProp ?? 1;
3044
3063
  const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(import_editor_props19.numberPropTypeUtil);
3045
- const handleChange = (event) => {
3046
- const {
3047
- value: eventValue,
3048
- validity: { valid: isInputValid }
3049
- } = event.target;
3050
- let updatedValue;
3051
- if (isEmptyOrNaN(eventValue)) {
3052
- updatedValue = null;
3053
- } else {
3054
- const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
3055
- updatedValue = Math.min(
3056
- Math.max(formattedValue, min ?? Number.MIN_SAFE_INTEGER),
3057
- max ?? Number.MAX_SAFE_INTEGER
3058
- );
3064
+ const [draft, setDraft] = (0, import_react30.useState)(null);
3065
+ const committedNullOnInputRef = (0, import_react30.useRef)(false);
3066
+ const handleInput = (event) => {
3067
+ const raw = event.target.value;
3068
+ setDraft(raw);
3069
+ if (isEmptyDraft(raw)) {
3070
+ if (!propType.settings.required) {
3071
+ setValue(null);
3072
+ committedNullOnInputRef.current = true;
3073
+ }
3074
+ return;
3075
+ }
3076
+ committedNullOnInputRef.current = false;
3077
+ const parsed = parseNumberDraft(raw, shouldForceInt);
3078
+ if (parsed === null) {
3079
+ return;
3080
+ }
3081
+ if (isInRange(parsed, min, max)) {
3082
+ setValue(parsed);
3083
+ }
3084
+ };
3085
+ const handleBlur = () => {
3086
+ const raw = draft;
3087
+ const committedNullOnInput = committedNullOnInputRef.current;
3088
+ committedNullOnInputRef.current = false;
3089
+ setDraft(null);
3090
+ restoreValue();
3091
+ if (raw === null) {
3092
+ return;
3059
3093
  }
3060
- setValue(updatedValue, void 0, { validation: () => isInputValid });
3094
+ if (isEmptyDraft(raw)) {
3095
+ if (!propType.settings.required && !committedNullOnInput) {
3096
+ setValue(null);
3097
+ }
3098
+ return;
3099
+ }
3100
+ const parsed = parseNumberDraft(raw, shouldForceInt);
3101
+ if (parsed === null) {
3102
+ return;
3103
+ }
3104
+ if (isInRange(parsed, min, max)) {
3105
+ return;
3106
+ }
3107
+ setValue(clamp(parsed, min, max));
3061
3108
  };
3109
+ const displayValue = draft ?? (isEmptyOrNaN(value) ? "" : String(value));
3062
3110
  return /* @__PURE__ */ React57.createElement(ControlActions, null, /* @__PURE__ */ React57.createElement(
3063
3111
  NumberInput,
3064
3112
  {
@@ -3066,11 +3114,11 @@ var NumberControl = createControl(
3066
3114
  type: "number",
3067
3115
  fullWidth: true,
3068
3116
  disabled: inputDisabled ?? disabled,
3069
- value: isEmptyOrNaN(value) ? "" : value,
3070
- onInput: handleChange,
3071
- onBlur: restoreValue,
3117
+ value: displayValue,
3118
+ onInput: handleInput,
3119
+ onBlur: handleBlur,
3072
3120
  placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
3073
- inputProps: { step, min },
3121
+ inputProps: { step, min, ...maxProp !== null && maxProp !== void 0 && { max } },
3074
3122
  InputProps: {
3075
3123
  startAdornment: startIcon ? /* @__PURE__ */ React57.createElement(import_ui42.InputAdornment, { position: "start", disabled: inputDisabled ?? disabled }, startIcon) : void 0,
3076
3124
  endAdornment: renderSuffix(propType)
@@ -3082,7 +3130,7 @@ var NumberControl = createControl(
3082
3130
 
3083
3131
  // src/controls/equal-unequal-sizes-control.tsx
3084
3132
  var React58 = __toESM(require("react"));
3085
- var import_react30 = require("react");
3133
+ var import_react31 = require("react");
3086
3134
  var import_ui43 = require("@elementor/ui");
3087
3135
  var import_i18n18 = require("@wordpress/i18n");
3088
3136
  function EqualUnequalSizesControl({
@@ -3092,9 +3140,9 @@ function EqualUnequalSizesControl({
3092
3140
  items: items2,
3093
3141
  multiSizePropTypeUtil
3094
3142
  }) {
3095
- const popupId = (0, import_react30.useId)();
3143
+ const popupId = (0, import_react31.useId)();
3096
3144
  const popupState = (0, import_ui43.usePopupState)({ variant: "popover", popupId });
3097
- const rowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
3145
+ const rowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
3098
3146
  const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
3099
3147
  const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
3100
3148
  const getMultiSizeValues = (sourceValue) => {
@@ -3189,7 +3237,7 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
3189
3237
 
3190
3238
  // src/controls/linked-dimensions-control.tsx
3191
3239
  var React65 = __toESM(require("react"));
3192
- var import_react38 = require("react");
3240
+ var import_react39 = require("react");
3193
3241
  var import_editor_props22 = require("@elementor/editor-props");
3194
3242
  var import_editor_responsive4 = require("@elementor/editor-responsive");
3195
3243
  var import_icons12 = require("@elementor/icons");
@@ -3198,12 +3246,12 @@ var import_i18n20 = require("@wordpress/i18n");
3198
3246
 
3199
3247
  // src/controls/size-control/unstable-size-control.tsx
3200
3248
  var React64 = __toESM(require("react"));
3201
- var import_react37 = require("react");
3249
+ var import_react38 = require("react");
3202
3250
  var import_editor_props21 = require("@elementor/editor-props");
3203
3251
 
3204
3252
  // src/controls/size-control/size-component.tsx
3205
3253
  var React63 = __toESM(require("react"));
3206
- var import_react36 = require("react");
3254
+ var import_react37 = require("react");
3207
3255
  var import_editor_responsive3 = require("@elementor/editor-responsive");
3208
3256
  var import_ui47 = require("@elementor/ui");
3209
3257
 
@@ -3273,7 +3321,7 @@ var isNumericValue = (value) => {
3273
3321
  };
3274
3322
 
3275
3323
  // src/controls/size-control/hooks/use-size-value.ts
3276
- var import_react32 = require("react");
3324
+ var import_react33 = require("react");
3277
3325
 
3278
3326
  // src/controls/size-control/utils/resolve-size-value.ts
3279
3327
  var DEFAULT_SIZE2 = "";
@@ -3325,10 +3373,10 @@ var sanitizeSize = (size) => {
3325
3373
  };
3326
3374
 
3327
3375
  // src/controls/size-control/hooks/use-unit-sync.ts
3328
- var import_react31 = require("react");
3376
+ var import_react32 = require("react");
3329
3377
  var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
3330
- const [state, setState] = (0, import_react31.useState)(sizeValue.unit);
3331
- (0, import_react31.useEffect)(() => {
3378
+ const [state, setState] = (0, import_react32.useState)(sizeValue.unit);
3379
+ (0, import_react32.useEffect)(() => {
3332
3380
  if (sizeValue.unit !== state) {
3333
3381
  setState(sizeValue.unit);
3334
3382
  }
@@ -3349,7 +3397,7 @@ var useSizeValue = ({
3349
3397
  units: units2,
3350
3398
  defaultUnit
3351
3399
  }) => {
3352
- const resolvedValue = (0, import_react32.useMemo)(
3400
+ const resolvedValue = (0, import_react33.useMemo)(
3353
3401
  () => resolveSizeValue(value, { units: units2, defaultUnit }),
3354
3402
  // eslint-disable-next-line react-hooks/exhaustive-deps
3355
3403
  [value?.size, value?.unit, defaultUnit]
@@ -3401,8 +3449,8 @@ var hasChanged = (next, current) => {
3401
3449
 
3402
3450
  // src/controls/size-control/ui/size-input.tsx
3403
3451
  var React59 = __toESM(require("react"));
3404
- var import_react33 = require("react");
3405
- var SizeInput2 = (0, import_react33.forwardRef)(
3452
+ var import_react34 = require("react");
3453
+ var SizeInput2 = (0, import_react34.forwardRef)(
3406
3454
  ({
3407
3455
  id,
3408
3456
  type,
@@ -3446,7 +3494,7 @@ var getCursorStyle = (readOnly) => ({
3446
3494
 
3447
3495
  // src/controls/size-control/ui/unit-selector.tsx
3448
3496
  var React60 = __toESM(require("react"));
3449
- var import_react34 = require("react");
3497
+ var import_react35 = require("react");
3450
3498
  var import_editor_ui5 = require("@elementor/editor-ui");
3451
3499
  var import_ui44 = require("@elementor/ui");
3452
3500
  var menuItemContentStyles = {
@@ -3465,7 +3513,7 @@ var UnitSelector = ({
3465
3513
  }) => {
3466
3514
  const popupState = (0, import_ui44.usePopupState)({
3467
3515
  variant: "popover",
3468
- popupId: (0, import_react34.useId)()
3516
+ popupId: (0, import_react35.useId)()
3469
3517
  });
3470
3518
  const handleMenuItemClick = (option) => {
3471
3519
  onSelect(option);
@@ -3590,15 +3638,15 @@ var shouldHighlightUnit = (value) => {
3590
3638
 
3591
3639
  // src/controls/size-control/ui/text-field-popover.tsx
3592
3640
  var React62 = __toESM(require("react"));
3593
- var import_react35 = require("react");
3641
+ var import_react36 = require("react");
3594
3642
  var import_editor_ui6 = require("@elementor/editor-ui");
3595
3643
  var import_icons11 = require("@elementor/icons");
3596
3644
  var import_ui46 = require("@elementor/ui");
3597
3645
  var import_i18n19 = require("@wordpress/i18n");
3598
3646
  var SIZE7 = "tiny";
3599
3647
  var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
3600
- const inputRef = (0, import_react35.useRef)(null);
3601
- (0, import_react35.useEffect)(() => {
3648
+ const inputRef = (0, import_react36.useRef)(null);
3649
+ (0, import_react36.useEffect)(() => {
3602
3650
  if (popupState.isOpen) {
3603
3651
  requestAnimationFrame(() => {
3604
3652
  if (inputRef.current) {
@@ -3665,7 +3713,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React63.Fragment, ...sizeFi
3665
3713
  const activeBreakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
3666
3714
  const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
3667
3715
  const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
3668
- (0, import_react36.useEffect)(() => {
3716
+ (0, import_react37.useEffect)(() => {
3669
3717
  if (popupState && popupState.isOpen) {
3670
3718
  popupState.close();
3671
3719
  }
@@ -3797,7 +3845,7 @@ var UnstableSizeControl = createControl(
3797
3845
  placeholder: boundPropPlaceholder,
3798
3846
  restoreValue
3799
3847
  } = useBoundProp(import_editor_props21.sizePropTypeUtil);
3800
- const lastNonAutoValue = (0, import_react37.useRef)(null);
3848
+ const lastNonAutoValue = (0, import_react38.useRef)(null);
3801
3849
  const { sizeValue, placeholder } = resolveBoundPropValue(
3802
3850
  value ?? lastNonAutoValue.current,
3803
3851
  boundPropPlaceholder,
@@ -3854,7 +3902,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
3854
3902
 
3855
3903
  // src/controls/linked-dimensions-control.tsx
3856
3904
  var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
3857
- const gridRowRefs = [(0, import_react38.useRef)(null), (0, import_react38.useRef)(null)];
3905
+ const gridRowRefs = [(0, import_react39.useRef)(null), (0, import_react39.useRef)(null)];
3858
3906
  const { disabled: sizeDisabled } = useBoundProp(import_editor_props22.sizePropTypeUtil);
3859
3907
  const {
3860
3908
  value: dimensionsValue,
@@ -3873,10 +3921,10 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
3873
3921
  }
3874
3922
  return true;
3875
3923
  };
3876
- const [isLinked, setIsLinked] = (0, import_react38.useState)(() => inferIsLinked());
3924
+ const [isLinked, setIsLinked] = (0, import_react39.useState)(() => inferIsLinked());
3877
3925
  const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
3878
3926
  const isCurrentlyDimensions = import_editor_props22.dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
3879
- (0, import_react38.useLayoutEffect)(() => {
3927
+ (0, import_react39.useLayoutEffect)(() => {
3880
3928
  setIsLinked(inferIsLinked);
3881
3929
  }, [activeBreakpoint, isCurrentlyDimensions]);
3882
3930
  const onLinkToggle = () => {
@@ -4047,7 +4095,7 @@ function getCssDimensionProps(label, isSiteRtl) {
4047
4095
 
4048
4096
  // src/controls/font-family-control/font-family-control.tsx
4049
4097
  var React67 = __toESM(require("react"));
4050
- var import_react40 = require("react");
4098
+ var import_react41 = require("react");
4051
4099
  var import_editor_props23 = require("@elementor/editor-props");
4052
4100
  var import_icons13 = require("@elementor/icons");
4053
4101
  var import_ui50 = require("@elementor/ui");
@@ -4055,7 +4103,7 @@ var import_i18n22 = require("@wordpress/i18n");
4055
4103
 
4056
4104
  // src/components/item-selector.tsx
4057
4105
  var React66 = __toESM(require("react"));
4058
- var import_react39 = require("react");
4106
+ var import_react40 = require("react");
4059
4107
  var import_editor_ui7 = require("@elementor/editor-ui");
4060
4108
  var import_ui49 = require("@elementor/ui");
4061
4109
  var import_utils3 = require("@elementor/utils");
@@ -4094,7 +4142,7 @@ var ItemSelector = ({
4094
4142
  footer,
4095
4143
  categoryItemContentTemplate
4096
4144
  }) => {
4097
- const [searchValue, setSearchValue] = (0, import_react39.useState)("");
4145
+ const [searchValue, setSearchValue] = (0, import_react40.useState)("");
4098
4146
  const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
4099
4147
  const IconComponent = icon;
4100
4148
  const handleSearch = (value) => {
@@ -4192,7 +4240,7 @@ var ItemList = ({
4192
4240
  }
4193
4241
  });
4194
4242
  }, 100);
4195
- const memoizedItemStyle = (0, import_react39.useCallback)((item) => itemStyle(item), [itemStyle]);
4243
+ const memoizedItemStyle = (0, import_react40.useCallback)((item) => itemStyle(item), [itemStyle]);
4196
4244
  return /* @__PURE__ */ React66.createElement(
4197
4245
  import_editor_ui7.PopoverMenuList,
4198
4246
  {
@@ -4208,8 +4256,8 @@ var ItemList = ({
4208
4256
  );
4209
4257
  };
4210
4258
  var useDebounce = (fn, delay) => {
4211
- const [debouncedFn] = (0, import_react39.useState)(() => (0, import_utils3.debounce)(fn, delay));
4212
- (0, import_react39.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
4259
+ const [debouncedFn] = (0, import_react40.useState)(() => (0, import_utils3.debounce)(fn, delay));
4260
+ (0, import_react40.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
4213
4261
  return debouncedFn;
4214
4262
  };
4215
4263
 
@@ -4230,7 +4278,7 @@ var FontFamilyControl = createControl(
4230
4278
  } = useBoundProp(import_editor_props23.fontFamilyPropTypeUtil);
4231
4279
  const popoverState = (0, import_ui50.usePopupState)({ variant: "popover" });
4232
4280
  const isShowingPlaceholder = !fontFamily && placeholder;
4233
- const mapFontSubs = (0, import_react40.useMemo)(() => {
4281
+ const mapFontSubs = (0, import_react41.useMemo)(() => {
4234
4282
  return fontFamilies.map(({ label, fonts }) => ({
4235
4283
  label,
4236
4284
  items: fonts
@@ -4311,7 +4359,7 @@ var UrlControl = createControl(
4311
4359
 
4312
4360
  // src/controls/link-control.tsx
4313
4361
  var React73 = __toESM(require("react"));
4314
- var import_react43 = require("react");
4362
+ var import_react44 = require("react");
4315
4363
  var import_editor_elements2 = require("@elementor/editor-elements");
4316
4364
  var import_editor_props28 = require("@elementor/editor-props");
4317
4365
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
@@ -4405,10 +4453,10 @@ var import_i18n24 = require("@wordpress/i18n");
4405
4453
 
4406
4454
  // src/components/autocomplete.tsx
4407
4455
  var React70 = __toESM(require("react"));
4408
- var import_react41 = require("react");
4456
+ var import_react42 = require("react");
4409
4457
  var import_icons15 = require("@elementor/icons");
4410
4458
  var import_ui53 = require("@elementor/ui");
4411
- var Autocomplete2 = (0, import_react41.forwardRef)((props, ref) => {
4459
+ var Autocomplete2 = (0, import_react42.forwardRef)((props, ref) => {
4412
4460
  const {
4413
4461
  options,
4414
4462
  onOptionChange,
@@ -4529,7 +4577,7 @@ function factoryFilter(newValue, options, minInputLength) {
4529
4577
  }
4530
4578
 
4531
4579
  // src/hooks/use-query-autocomplete.ts
4532
- var import_react42 = require("react");
4580
+ var import_react43 = require("react");
4533
4581
  var import_editor_props25 = require("@elementor/editor-props");
4534
4582
  var import_http_client2 = require("@elementor/http-client");
4535
4583
  var import_utils4 = require("@elementor/utils");
@@ -4540,11 +4588,11 @@ function useQueryAutocomplete({
4540
4588
  initialQueryValue = null,
4541
4589
  excludeIds
4542
4590
  }) {
4543
- const excludeIdSet = (0, import_react42.useMemo)(() => new Set((excludeIds ?? []).map(String)), [excludeIds]);
4544
- const [options, setOptions] = (0, import_react42.useState)(
4591
+ const excludeIdSet = (0, import_react43.useMemo)(() => new Set((excludeIds ?? []).map(String)), [excludeIds]);
4592
+ const [options, setOptions] = (0, import_react43.useState)(
4545
4593
  generateFirstLoadedOption(initialQueryValue)
4546
4594
  );
4547
- const debounceFetch = (0, import_react42.useMemo)(
4595
+ const debounceFetch = (0, import_react43.useMemo)(
4548
4596
  () => (0, import_utils4.debounce)(
4549
4597
  (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
4550
4598
  setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
@@ -4553,7 +4601,7 @@ function useQueryAutocomplete({
4553
4601
  ),
4554
4602
  [url, excludeIdSet]
4555
4603
  );
4556
- (0, import_react42.useEffect)(() => {
4604
+ (0, import_react43.useEffect)(() => {
4557
4605
  if (minInputLength === 0 && url) {
4558
4606
  fetchOptions(url, { ...params, term: "" }).then((newOptions) => {
4559
4607
  setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
@@ -4699,7 +4747,7 @@ var LinkControl = createControl((props) => {
4699
4747
  const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props28.linkPropTypeUtil);
4700
4748
  const linkPlaceholder = propContext.placeholder;
4701
4749
  const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
4702
- const [isActive, setIsActive] = (0, import_react43.useState)(!!value || !!linkPlaceholder);
4750
+ const [isActive, setIsActive] = (0, import_react44.useState)(!!value || !!linkPlaceholder);
4703
4751
  const {
4704
4752
  allowCustomValues = true,
4705
4753
  queryOptions,
@@ -4709,37 +4757,43 @@ var LinkControl = createControl((props) => {
4709
4757
  label = (0, import_i18n25.__)("Link", "elementor"),
4710
4758
  ariaLabel
4711
4759
  } = props || {};
4712
- const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react43.useState)(
4760
+ const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react44.useState)(
4713
4761
  (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder)
4714
4762
  );
4715
4763
  const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
4716
- const debouncedCheckRestriction = (0, import_utils5.useDebouncedCallback)(() => {
4764
+ const syncLinkRestriction = (clearActiveLinkWhen = "restricted") => {
4717
4765
  const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
4718
- if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
4766
+ const becameRestricted = newRestriction.shouldRestrict && !linkInLinkRestriction.shouldRestrict;
4767
+ const shouldClearActiveLink = clearActiveLinkWhen === "newly-restricted" ? becameRestricted : newRestriction.shouldRestrict;
4768
+ if (shouldClearActiveLink && isActive && !linkPlaceholder) {
4719
4769
  setIsActive(false);
4720
4770
  if (value !== null) {
4721
4771
  setValue(null);
4722
4772
  }
4723
4773
  }
4724
4774
  setLinkInLinkRestriction((prev) => isSameRestriction(prev, newRestriction) ? prev : newRestriction);
4725
- }, 300);
4775
+ };
4776
+ const debouncedSyncLinkRestriction = (0, import_utils5.useDebouncedCallback)(
4777
+ (clearActiveLinkWhen = "restricted") => syncLinkRestriction(clearActiveLinkWhen),
4778
+ 300
4779
+ );
4726
4780
  (0, import_editor_v1_adapters.__privateUseListenTo)(
4727
4781
  (0, import_editor_v1_adapters.commandEndEvent)("document/elements/set-settings"),
4728
4782
  () => {
4729
- debouncedCheckRestriction();
4783
+ debouncedSyncLinkRestriction("newly-restricted");
4730
4784
  },
4731
- [debouncedCheckRestriction]
4785
+ [debouncedSyncLinkRestriction]
4732
4786
  );
4733
- (0, import_react43.useEffect)(() => {
4734
- debouncedCheckRestriction();
4787
+ (0, import_react44.useEffect)(() => {
4788
+ debouncedSyncLinkRestriction();
4735
4789
  const handleInlineLinkChanged = () => {
4736
- debouncedCheckRestriction();
4790
+ debouncedSyncLinkRestriction();
4737
4791
  };
4738
4792
  window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
4739
4793
  return () => {
4740
4794
  window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
4741
4795
  };
4742
- }, [elementId, debouncedCheckRestriction]);
4796
+ }, [elementId, debouncedSyncLinkRestriction]);
4743
4797
  const onEnabledChange = () => {
4744
4798
  setLinkInLinkRestriction((0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder));
4745
4799
  if (linkInLinkRestriction.shouldRestrict && !isActive) {
@@ -4909,7 +4963,7 @@ var HtmlTagControl = createControl((props) => {
4909
4963
 
4910
4964
  // src/controls/query-chips-control.tsx
4911
4965
  var React76 = __toESM(require("react"));
4912
- var import_react44 = require("react");
4966
+ var import_react45 = require("react");
4913
4967
  var import_editor_props30 = require("@elementor/editor-props");
4914
4968
  var import_ui59 = require("@elementor/ui");
4915
4969
  var import_i18n27 = require("@wordpress/i18n");
@@ -4918,8 +4972,8 @@ var SIZE9 = "tiny";
4918
4972
  var QueryChipsControl = createControl((props) => {
4919
4973
  const { queryOptions, placeholder, minInputLength = 2 } = props;
4920
4974
  const { value, setValue, disabled } = useBoundProp(queryArrayPropTypeUtil);
4921
- const selectedChips = (0, import_react44.useMemo)(() => extractChips(value), [value]);
4922
- const excludeIds = (0, import_react44.useMemo)(
4975
+ const selectedChips = (0, import_react45.useMemo)(() => extractChips(value), [value]);
4976
+ const excludeIds = (0, import_react45.useMemo)(
4923
4977
  () => selectedChips.map((chip) => Number(chip.id)).filter((id) => Number.isFinite(id)),
4924
4978
  [selectedChips]
4925
4979
  );
@@ -4979,7 +5033,7 @@ function extractChips(value) {
4979
5033
 
4980
5034
  // src/controls/query-filter-repeater-control.tsx
4981
5035
  var React77 = __toESM(require("react"));
4982
- var import_react45 = require("react");
5036
+ var import_react46 = require("react");
4983
5037
  var import_editor_elements4 = require("@elementor/editor-elements");
4984
5038
  var import_editor_props31 = require("@elementor/editor-props");
4985
5039
  var import_icons18 = require("@elementor/icons");
@@ -4994,16 +5048,16 @@ var QueryFilterRepeaterControl = createControl(
4994
5048
  }) => {
4995
5049
  const { propType, value, setValue } = useBoundProp(import_editor_props31.queryFilterArrayPropTypeUtil);
4996
5050
  const { settings } = (0, import_editor_elements4.useSelectedElementSettings)();
4997
- const visibleKeys = (0, import_react45.useMemo)(
5051
+ const visibleKeys = (0, import_react46.useMemo)(
4998
5052
  () => allowedKeys.filter((key) => isKeyVisible(keyConfig[key]?.visibleWhen, settings)),
4999
5053
  [allowedKeys, keyConfig, settings]
5000
5054
  );
5001
- const usedKeys = (0, import_react45.useMemo)(() => getUsedKeys(value ?? []), [value]);
5002
- const nextAvailableKey = (0, import_react45.useMemo)(
5055
+ const usedKeys = (0, import_react46.useMemo)(() => getUsedKeys(value ?? []), [value]);
5056
+ const nextAvailableKey = (0, import_react46.useMemo)(
5003
5057
  () => visibleKeys.find((key) => !usedKeys.has(key)) ?? null,
5004
5058
  [visibleKeys, usedKeys]
5005
5059
  );
5006
- const getKeySelectOptions = (0, import_react45.useMemo)(
5060
+ const getKeySelectOptions = (0, import_react46.useMemo)(
5007
5061
  () => (currentKey) => visibleKeys.map((itemKey) => ({
5008
5062
  value: itemKey,
5009
5063
  label: keyConfig[itemKey]?.label ?? itemKey,
@@ -5011,7 +5065,7 @@ var QueryFilterRepeaterControl = createControl(
5011
5065
  })),
5012
5066
  [visibleKeys, keyConfig, usedKeys]
5013
5067
  );
5014
- const initialFallback = (0, import_react45.useMemo)(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
5068
+ const initialFallback = (0, import_react46.useMemo)(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
5015
5069
  return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React77.createElement(ControlRepeater, { initial: initialFallback, propTypeUtil: import_editor_props31.queryFilterArrayPropTypeUtil }, /* @__PURE__ */ React77.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React77.createElement(AddFilterItemAction, { nextAvailableKey, ariaLabel: label })), /* @__PURE__ */ React77.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React77.createElement(
5016
5070
  Item,
5017
5071
  {
@@ -5075,7 +5129,7 @@ var ItemContent = ({
5075
5129
  chipsPlaceholder
5076
5130
  }) => {
5077
5131
  const propContext = useBoundProp(import_editor_props31.queryFilterPropTypeUtil);
5078
- const snapshotsByKeyRef = (0, import_react45.useRef)({});
5132
+ const snapshotsByKeyRef = (0, import_react46.useRef)({});
5079
5133
  const handleValueChange = (nextValue, options, meta) => {
5080
5134
  if (meta?.bind !== "key") {
5081
5135
  propContext.setValue(nextValue, options, meta);
@@ -5103,7 +5157,7 @@ var ItemContent = ({
5103
5157
  const currentKey = import_editor_props31.stringPropTypeUtil.extract(propContext.value?.key);
5104
5158
  const currentKeyConfig = currentKey ? keyConfig[currentKey] : void 0;
5105
5159
  const valueType = currentKeyConfig?.valueType ?? "chips";
5106
- const keySelectOptions = (0, import_react45.useMemo)(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
5160
+ const keySelectOptions = (0, import_react46.useMemo)(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
5107
5161
  return /* @__PURE__ */ React77.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Type", "elementor"))), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(SelectControl, { options: keySelectOptions })))), valueType === "taxonomies" && currentKeyConfig?.staticOptions && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "taxonomies" }, /* @__PURE__ */ React77.createElement(ChipsControl, { options: currentKeyConfig.staticOptions })))), valueType !== "taxonomies" && currentKeyConfig?.queryEndpoint && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "values" }, /* @__PURE__ */ React77.createElement(
5108
5162
  QueryChipsControl,
5109
5163
  {
@@ -5147,14 +5201,14 @@ function getUsedKeys(items2) {
5147
5201
 
5148
5202
  // src/controls/gap-control.tsx
5149
5203
  var React78 = __toESM(require("react"));
5150
- var import_react46 = require("react");
5204
+ var import_react47 = require("react");
5151
5205
  var import_editor_props32 = require("@elementor/editor-props");
5152
5206
  var import_editor_responsive5 = require("@elementor/editor-responsive");
5153
5207
  var import_icons19 = require("@elementor/icons");
5154
5208
  var import_ui61 = require("@elementor/ui");
5155
5209
  var import_i18n29 = require("@wordpress/i18n");
5156
5210
  var GapControl = ({ label }) => {
5157
- const stackRef = (0, import_react46.useRef)(null);
5211
+ const stackRef = (0, import_react47.useRef)(null);
5158
5212
  const { disabled: sizeDisabled } = useBoundProp(import_editor_props32.sizePropTypeUtil);
5159
5213
  const {
5160
5214
  value: directionValue,
@@ -5173,10 +5227,10 @@ var GapControl = ({ label }) => {
5173
5227
  }
5174
5228
  return true;
5175
5229
  };
5176
- const [isLinked, setIsLinked] = (0, import_react46.useState)(() => inferIsLinked());
5230
+ const [isLinked, setIsLinked] = (0, import_react47.useState)(() => inferIsLinked());
5177
5231
  const isCurrentlyDirection = import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
5178
5232
  const activeBreakpoint = (0, import_editor_responsive5.useActiveBreakpoint)();
5179
- (0, import_react46.useLayoutEffect)(() => {
5233
+ (0, import_react47.useLayoutEffect)(() => {
5180
5234
  setIsLinked(inferIsLinked());
5181
5235
  }, [activeBreakpoint, isCurrentlyDirection]);
5182
5236
  const onLinkToggle = () => {
@@ -5269,7 +5323,7 @@ var Control4 = ({
5269
5323
 
5270
5324
  // src/controls/aspect-ratio-control.tsx
5271
5325
  var React79 = __toESM(require("react"));
5272
- var import_react47 = require("react");
5326
+ var import_react48 = require("react");
5273
5327
  var import_editor_props33 = require("@elementor/editor-props");
5274
5328
  var import_editor_ui10 = require("@elementor/editor-ui");
5275
5329
  var import_icons20 = require("@elementor/icons");
@@ -5296,13 +5350,13 @@ var AspectRatioControl = createControl(({ label }) => {
5296
5350
  const aspectRatioValue = currentPropValue ?? externalPlaceholder;
5297
5351
  const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
5298
5352
  const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
5299
- const [isCustom, setIsCustom] = (0, import_react47.useState)(isCustomSelected);
5300
- const [customWidth, setCustomWidth] = (0, import_react47.useState)(initialWidth);
5301
- const [customHeight, setCustomHeight] = (0, import_react47.useState)(initialHeight);
5302
- const [selectedValue, setSelectedValue] = (0, import_react47.useState)(
5353
+ const [isCustom, setIsCustom] = (0, import_react48.useState)(isCustomSelected);
5354
+ const [customWidth, setCustomWidth] = (0, import_react48.useState)(initialWidth);
5355
+ const [customHeight, setCustomHeight] = (0, import_react48.useState)(initialHeight);
5356
+ const [selectedValue, setSelectedValue] = (0, import_react48.useState)(
5303
5357
  isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
5304
5358
  );
5305
- (0, import_react47.useEffect)(() => {
5359
+ (0, import_react48.useEffect)(() => {
5306
5360
  const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
5307
5361
  if (isCustomValue) {
5308
5362
  const [width, height] = aspectRatioValue.split("/");
@@ -5389,7 +5443,7 @@ var AspectRatioControl = createControl(({ label }) => {
5389
5443
 
5390
5444
  // src/controls/svg-media-control.tsx
5391
5445
  var React88 = __toESM(require("react"));
5392
- var import_react53 = require("react");
5446
+ var import_react54 = require("react");
5393
5447
  var import_editor_current_user = require("@elementor/editor-current-user");
5394
5448
  var import_editor_props35 = require("@elementor/editor-props");
5395
5449
  var import_ui70 = require("@elementor/ui");
@@ -5398,7 +5452,7 @@ var import_i18n38 = require("@wordpress/i18n");
5398
5452
 
5399
5453
  // src/components/enable-unfiltered-modal.tsx
5400
5454
  var React80 = __toESM(require("react"));
5401
- var import_react48 = require("react");
5455
+ var import_react49 = require("react");
5402
5456
  var import_ui63 = require("@elementor/ui");
5403
5457
  var import_i18n31 = require("@wordpress/i18n");
5404
5458
  var ADMIN_TITLE_TEXT = (0, import_i18n31.__)("Enable Unfiltered Uploads", "elementor");
@@ -5414,7 +5468,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n31.__)(
5414
5468
  var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
5415
5469
  var EnableUnfilteredModal = (props) => {
5416
5470
  const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
5417
- const [isError, setIsError] = (0, import_react48.useState)(false);
5471
+ const [isError, setIsError] = (0, import_react49.useState)(false);
5418
5472
  const onClose = (enabled) => {
5419
5473
  props.onClose(enabled);
5420
5474
  setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -5463,7 +5517,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
5463
5517
 
5464
5518
  // src/controls/icon-library/icon-library-popover.tsx
5465
5519
  var React85 = __toESM(require("react"));
5466
- var import_react52 = require("react");
5520
+ var import_react53 = require("react");
5467
5521
  var import_editor_ui11 = require("@elementor/editor-ui");
5468
5522
  var import_icons23 = require("@elementor/icons");
5469
5523
  var import_session2 = require("@elementor/session");
@@ -5731,7 +5785,7 @@ var FontAwesomeGlyph = ({ icon, size, color, label }) => {
5731
5785
 
5732
5786
  // src/controls/icon-library/icon-library-filter.tsx
5733
5787
  var React82 = __toESM(require("react"));
5734
- var import_react49 = require("react");
5788
+ var import_react50 = require("react");
5735
5789
  var import_icons21 = require("@elementor/icons");
5736
5790
  var import_ui64 = require("@elementor/ui");
5737
5791
  var import_i18n32 = require("@wordpress/i18n");
@@ -5766,7 +5820,7 @@ var LIBRARY_FILTER_CONFIG = {
5766
5820
  }
5767
5821
  };
5768
5822
  var IconLibraryFilter = ({ value, onChange }) => {
5769
- const popupId = (0, import_react49.useId)();
5823
+ const popupId = (0, import_react50.useId)();
5770
5824
  const popupState = (0, import_ui64.usePopupState)({
5771
5825
  variant: "popover",
5772
5826
  popupId
@@ -5862,7 +5916,7 @@ var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ Rea
5862
5916
 
5863
5917
  // src/controls/icon-library/icon-library-grid.tsx
5864
5918
  var React83 = __toESM(require("react"));
5865
- var import_react50 = require("react");
5919
+ var import_react51 = require("react");
5866
5920
  var import_ui65 = require("@elementor/ui");
5867
5921
  var import_react_virtual = require("@tanstack/react-virtual");
5868
5922
  var import_i18n33 = require("@wordpress/i18n");
@@ -5900,12 +5954,12 @@ var IconLibraryGrid = ({
5900
5954
  noResultsComponent
5901
5955
  }) => {
5902
5956
  const theme = (0, import_ui65.useTheme)();
5903
- const containerRef = (0, import_react50.useRef)(null);
5904
- const cellRefs = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
5905
- const shouldRestoreFocusRef = (0, import_react50.useRef)(false);
5957
+ const containerRef = (0, import_react51.useRef)(null);
5958
+ const cellRefs = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
5959
+ const shouldRestoreFocusRef = (0, import_react51.useRef)(false);
5906
5960
  const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
5907
- const [focusedIndex, setFocusedIndex] = (0, import_react50.useState)(selectedIndex >= 0 ? selectedIndex : 0);
5908
- const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react50.useState)(() => getGridMetrics(0, 0, 0));
5961
+ const [focusedIndex, setFocusedIndex] = (0, import_react51.useState)(selectedIndex >= 0 ? selectedIndex : 0);
5962
+ const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react51.useState)(() => getGridMetrics(0, 0, 0));
5909
5963
  const rowCount = Math.ceil(items2.length / columnCount);
5910
5964
  const virtualizer = (0, import_react_virtual.useVirtualizer)({
5911
5965
  count: rowCount,
@@ -5915,7 +5969,7 @@ var IconLibraryGrid = ({
5915
5969
  });
5916
5970
  const focusedItem = items2[focusedIndex];
5917
5971
  const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
5918
- (0, import_react50.useLayoutEffect)(() => {
5972
+ (0, import_react51.useLayoutEffect)(() => {
5919
5973
  setFocusedIndex((current) => {
5920
5974
  if (items2.length === 0) {
5921
5975
  return 0;
@@ -5929,7 +5983,7 @@ var IconLibraryGrid = ({
5929
5983
  virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
5930
5984
  }
5931
5985
  }, [columnCount, items2, selectedIndex, selectedValue]);
5932
- (0, import_react50.useLayoutEffect)(() => {
5986
+ (0, import_react51.useLayoutEffect)(() => {
5933
5987
  if (!shouldRestoreFocusRef.current || !focusedItem) {
5934
5988
  return;
5935
5989
  }
@@ -5940,7 +5994,7 @@ var IconLibraryGrid = ({
5940
5994
  cell.focus();
5941
5995
  shouldRestoreFocusRef.current = false;
5942
5996
  }, [focusedItem, visibleRowIndexes]);
5943
- (0, import_react50.useLayoutEffect)(() => {
5997
+ (0, import_react51.useLayoutEffect)(() => {
5944
5998
  const container = containerRef.current;
5945
5999
  if (!container) {
5946
6000
  return;
@@ -5957,7 +6011,7 @@ var IconLibraryGrid = ({
5957
6011
  resizeObserver.disconnect();
5958
6012
  };
5959
6013
  }, [theme, items2.length]);
5960
- (0, import_react50.useLayoutEffect)(() => {
6014
+ (0, import_react51.useLayoutEffect)(() => {
5961
6015
  virtualizer.measure();
5962
6016
  }, [cellSize, columnCount]);
5963
6017
  const isRtl = theme.direction === "rtl" || document.documentElement.dir === "rtl";
@@ -6154,13 +6208,13 @@ var IconLibraryGrid = ({
6154
6208
 
6155
6209
  // src/controls/icon-library/icon-library-view-toggle.tsx
6156
6210
  var React84 = __toESM(require("react"));
6157
- var import_react51 = require("react");
6211
+ var import_react52 = require("react");
6158
6212
  var import_icons22 = require("@elementor/icons");
6159
6213
  var import_ui66 = require("@elementor/ui");
6160
6214
  var import_i18n34 = require("@wordpress/i18n");
6161
6215
  var VIEW_MENU_WIDTH = 122;
6162
6216
  var IconLibraryViewToggle = ({ value, onChange }) => {
6163
- const popupId = (0, import_react51.useId)();
6217
+ const popupId = (0, import_react52.useId)();
6164
6218
  const popupState = (0, import_ui66.usePopupState)({
6165
6219
  variant: "popover",
6166
6220
  popupId
@@ -6271,18 +6325,18 @@ var IconLibraryPopover = ({
6271
6325
  handleChange: handleSearchChange,
6272
6326
  setImmediateValue: setSearchValue
6273
6327
  } = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
6274
- const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
6328
+ const [activeLibraries, setActiveLibraries] = (0, import_react53.useState)([]);
6275
6329
  const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
6276
6330
  ICON_LIBRARY_VIEW_STORAGE_KEY,
6277
6331
  ICON_LIBRARY_VIEW_STORAGE_PREFIX
6278
6332
  );
6279
6333
  const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
6280
6334
  const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
6281
- const items2 = (0, import_react52.useMemo)(
6335
+ const items2 = (0, import_react53.useMemo)(
6282
6336
  () => createIconLibraryItems(icons, searchValue, activeLibraries),
6283
6337
  [activeLibraries, icons, searchValue]
6284
6338
  );
6285
- const selectedValue = (0, import_react52.useMemo)(
6339
+ const selectedValue = (0, import_react53.useMemo)(
6286
6340
  () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
6287
6341
  [icons, selectedIconClass, selectedIconLibrary]
6288
6342
  );
@@ -6628,11 +6682,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
6628
6682
  const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
6629
6683
  const src = attachment?.url ?? url?.value ?? null;
6630
6684
  const { data: allowSvgUpload } = useUnfilteredFilesUpload();
6631
- const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react53.useState)(false);
6685
+ const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react54.useState)(false);
6632
6686
  const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
6633
- const controlContainerRef = (0, import_react53.useRef)(null);
6634
- const buttonGroupRef = (0, import_react53.useRef)(null);
6635
- const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
6687
+ const controlContainerRef = (0, import_react54.useRef)(null);
6688
+ const buttonGroupRef = (0, import_react54.useRef)(null);
6689
+ const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react54.useState)(null);
6636
6690
  const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
6637
6691
  const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
6638
6692
  const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -6684,7 +6738,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
6684
6738
  setIconLibraryAnchor(anchor);
6685
6739
  iconLibraryPopoverState.open(event);
6686
6740
  };
6687
- (0, import_react53.useEffect)(() => {
6741
+ (0, import_react54.useEffect)(() => {
6688
6742
  if (!iconLibraryPopoverState.isOpen) {
6689
6743
  return;
6690
6744
  }
@@ -6986,7 +7040,7 @@ var BackgroundImageOverlayAttachment = () => {
6986
7040
 
6987
7041
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
6988
7042
  var React92 = __toESM(require("react"));
6989
- var import_react54 = require("react");
7043
+ var import_react55 = require("react");
6990
7044
  var import_editor_props38 = require("@elementor/editor-props");
6991
7045
  var import_editor_ui12 = require("@elementor/editor-ui");
6992
7046
  var import_icons27 = require("@elementor/icons");
@@ -7008,7 +7062,7 @@ var BackgroundImageOverlayPosition = () => {
7008
7062
  const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
7009
7063
  const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
7010
7064
  const isCustom = !!backgroundImageOffsetContext.value;
7011
- const rowRef = (0, import_react54.useRef)(null);
7065
+ const rowRef = (0, import_react55.useRef)(null);
7012
7066
  const handlePositionChange = (event) => {
7013
7067
  const value = event.target.value || null;
7014
7068
  if (value === "custom") {
@@ -7081,7 +7135,7 @@ var BackgroundImageOverlayRepeat = () => {
7081
7135
 
7082
7136
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
7083
7137
  var React94 = __toESM(require("react"));
7084
- var import_react55 = require("react");
7138
+ var import_react56 = require("react");
7085
7139
  var import_editor_props39 = require("@elementor/editor-props");
7086
7140
  var import_icons29 = require("@elementor/icons");
7087
7141
  var import_ui76 = require("@elementor/ui");
@@ -7116,7 +7170,7 @@ var BackgroundImageOverlaySize = () => {
7116
7170
  const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
7117
7171
  const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
7118
7172
  const isCustom = !!backgroundImageScaleContext.value;
7119
- const rowRef = (0, import_react55.useRef)(null);
7173
+ const rowRef = (0, import_react56.useRef)(null);
7120
7174
  const handleSizeChange = (size) => {
7121
7175
  if (size === "custom") {
7122
7176
  backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7151,7 +7205,7 @@ var BackgroundImageOverlaySize = () => {
7151
7205
  };
7152
7206
 
7153
7207
  // src/controls/background-control/background-overlay/use-background-tabs-history.ts
7154
- var import_react56 = require("react");
7208
+ var import_react57 = require("react");
7155
7209
  var import_editor_props40 = require("@elementor/editor-props");
7156
7210
  var import_ui77 = require("@elementor/ui");
7157
7211
  var useBackgroundTabsHistory = ({
@@ -7172,7 +7226,7 @@ var useBackgroundTabsHistory = ({
7172
7226
  return "image";
7173
7227
  };
7174
7228
  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui77.useTabs)(getCurrentOverlayType());
7175
- const valuesHistory = (0, import_react56.useRef)({
7229
+ const valuesHistory = (0, import_react57.useRef)({
7176
7230
  image: initialBackgroundImageOverlay,
7177
7231
  color: initialBackgroundColorOverlay2,
7178
7232
  gradient: initialBackgroundGradientOverlay2
@@ -7419,7 +7473,7 @@ var BackgroundClipField = () => {
7419
7473
 
7420
7474
  // src/controls/repeatable-control.tsx
7421
7475
  var React97 = __toESM(require("react"));
7422
- var import_react57 = require("react");
7476
+ var import_react58 = require("react");
7423
7477
  var import_editor_props43 = require("@elementor/editor-props");
7424
7478
  var import_ui80 = require("@elementor/ui");
7425
7479
  var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -7440,11 +7494,11 @@ var RepeatableControl = createControl(
7440
7494
  if (!childPropTypeUtil) {
7441
7495
  return null;
7442
7496
  }
7443
- const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
7497
+ const childArrayPropTypeUtil2 = (0, import_react58.useMemo)(
7444
7498
  () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
7445
7499
  [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
7446
7500
  );
7447
- const contextValue = (0, import_react57.useMemo)(
7501
+ const contextValue = (0, import_react58.useMemo)(
7448
7502
  () => ({
7449
7503
  ...childControlConfig,
7450
7504
  placeholder: placeholder || "",
@@ -7576,7 +7630,7 @@ var getAllProperties = (pattern) => {
7576
7630
 
7577
7631
  // src/controls/key-value-control.tsx
7578
7632
  var React98 = __toESM(require("react"));
7579
- var import_react58 = require("react");
7633
+ var import_react59 = require("react");
7580
7634
  var import_editor_props44 = require("@elementor/editor-props");
7581
7635
  var import_ui81 = require("@elementor/ui");
7582
7636
  var import_i18n46 = require("@wordpress/i18n");
@@ -7603,9 +7657,9 @@ var getInitialFieldValue = (fieldValue) => {
7603
7657
  };
7604
7658
  var KeyValueControl = createControl((props = {}) => {
7605
7659
  const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
7606
- const [keyError, setKeyError] = (0, import_react58.useState)("");
7607
- const [valueError, setValueError] = (0, import_react58.useState)("");
7608
- const [sessionState, setSessionState] = (0, import_react58.useState)({
7660
+ const [keyError, setKeyError] = (0, import_react59.useState)("");
7661
+ const [valueError, setValueError] = (0, import_react59.useState)("");
7662
+ const [sessionState, setSessionState] = (0, import_react59.useState)({
7609
7663
  key: getInitialFieldValue(value?.key),
7610
7664
  value: getInitialFieldValue(value?.value)
7611
7665
  });
@@ -7615,7 +7669,7 @@ var KeyValueControl = createControl((props = {}) => {
7615
7669
  keyHelper: void 0,
7616
7670
  valueHelper: void 0
7617
7671
  };
7618
- const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
7672
+ const [keyRegex, valueRegex, errMsg] = (0, import_react59.useMemo)(
7619
7673
  () => [
7620
7674
  props.regexKey ? new RegExp(props.regexKey) : void 0,
7621
7675
  props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -7747,7 +7801,7 @@ var PositionControl = () => {
7747
7801
 
7748
7802
  // src/controls/transform-control/transform-repeater-control.tsx
7749
7803
  var React112 = __toESM(require("react"));
7750
- var import_react66 = require("react");
7804
+ var import_react67 = require("react");
7751
7805
  var import_editor_props54 = require("@elementor/editor-props");
7752
7806
  var import_icons37 = require("@elementor/icons");
7753
7807
  var import_ui95 = require("@elementor/ui");
@@ -7806,7 +7860,7 @@ var import_i18n52 = require("@wordpress/i18n");
7806
7860
 
7807
7861
  // src/controls/transform-control/functions/move.tsx
7808
7862
  var React101 = __toESM(require("react"));
7809
- var import_react59 = require("react");
7863
+ var import_react60 = require("react");
7810
7864
  var import_editor_props47 = require("@elementor/editor-props");
7811
7865
  var import_icons31 = require("@elementor/icons");
7812
7866
  var import_ui84 = require("@elementor/ui");
@@ -7853,7 +7907,7 @@ var moveAxisControls = [
7853
7907
  ];
7854
7908
  var Move = () => {
7855
7909
  const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
7856
- const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
7910
+ const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
7857
7911
  return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
7858
7912
  AxisRow,
7859
7913
  {
@@ -7868,7 +7922,7 @@ var Move = () => {
7868
7922
 
7869
7923
  // src/controls/transform-control/functions/rotate.tsx
7870
7924
  var React102 = __toESM(require("react"));
7871
- var import_react60 = require("react");
7925
+ var import_react61 = require("react");
7872
7926
  var import_editor_props48 = require("@elementor/editor-props");
7873
7927
  var import_icons32 = require("@elementor/icons");
7874
7928
  var import_ui85 = require("@elementor/ui");
@@ -7893,7 +7947,7 @@ var rotateAxisControls = [
7893
7947
  var rotateUnits = ["deg", "rad", "grad", "turn"];
7894
7948
  var Rotate = () => {
7895
7949
  const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
7896
- const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
7950
+ const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
7897
7951
  return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
7898
7952
  AxisRow,
7899
7953
  {
@@ -7907,7 +7961,7 @@ var Rotate = () => {
7907
7961
 
7908
7962
  // src/controls/transform-control/functions/scale.tsx
7909
7963
  var React104 = __toESM(require("react"));
7910
- var import_react61 = require("react");
7964
+ var import_react62 = require("react");
7911
7965
  var import_editor_props49 = require("@elementor/editor-props");
7912
7966
  var import_icons33 = require("@elementor/icons");
7913
7967
  var import_ui87 = require("@elementor/ui");
@@ -7940,13 +7994,13 @@ var scaleAxisControls = [
7940
7994
  ];
7941
7995
  var Scale = () => {
7942
7996
  const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
7943
- const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
7997
+ const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
7944
7998
  return /* @__PURE__ */ React104.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
7945
7999
  };
7946
8000
 
7947
8001
  // src/controls/transform-control/functions/skew.tsx
7948
8002
  var React105 = __toESM(require("react"));
7949
- var import_react62 = require("react");
8003
+ var import_react63 = require("react");
7950
8004
  var import_editor_props50 = require("@elementor/editor-props");
7951
8005
  var import_icons34 = require("@elementor/icons");
7952
8006
  var import_ui88 = require("@elementor/ui");
@@ -7966,7 +8020,7 @@ var skewAxisControls = [
7966
8020
  var skewUnits = ["deg", "rad", "grad", "turn"];
7967
8021
  var Skew = () => {
7968
8022
  const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
7969
- const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
8023
+ const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
7970
8024
  return /* @__PURE__ */ React105.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
7971
8025
  AxisRow,
7972
8026
  {
@@ -7979,7 +8033,7 @@ var Skew = () => {
7979
8033
  };
7980
8034
 
7981
8035
  // src/controls/transform-control/use-transform-tabs-history.tsx
7982
- var import_react63 = require("react");
8036
+ var import_react64 = require("react");
7983
8037
  var import_editor_props51 = require("@elementor/editor-props");
7984
8038
  var import_ui89 = require("@elementor/ui");
7985
8039
  var useTransformTabsHistory = ({
@@ -8006,7 +8060,7 @@ var useTransformTabsHistory = ({
8006
8060
  }
8007
8061
  };
8008
8062
  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui89.useTabs)(getCurrentTransformType());
8009
- const valuesHistory = (0, import_react63.useRef)({
8063
+ const valuesHistory = (0, import_react64.useRef)({
8010
8064
  move: initialMove,
8011
8065
  scale: initialScale,
8012
8066
  rotate: initialRotate,
@@ -8150,7 +8204,7 @@ var import_i18n56 = require("@wordpress/i18n");
8150
8204
 
8151
8205
  // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
8152
8206
  var React109 = __toESM(require("react"));
8153
- var import_react64 = require("react");
8207
+ var import_react65 = require("react");
8154
8208
  var import_editor_props52 = require("@elementor/editor-props");
8155
8209
  var import_ui92 = require("@elementor/ui");
8156
8210
  var import_i18n54 = require("@wordpress/i18n");
@@ -8182,13 +8236,13 @@ var PerspectiveOriginControlProvider = () => {
8182
8236
  return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
8183
8237
  };
8184
8238
  var ControlFields = ({ control }) => {
8185
- const rowRef = (0, import_react64.useRef)(null);
8239
+ const rowRef = (0, import_react65.useRef)(null);
8186
8240
  return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
8187
8241
  };
8188
8242
 
8189
8243
  // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
8190
8244
  var React110 = __toESM(require("react"));
8191
- var import_react65 = require("react");
8245
+ var import_react66 = require("react");
8192
8246
  var import_editor_props53 = require("@elementor/editor-props");
8193
8247
  var import_ui93 = require("@elementor/ui");
8194
8248
  var import_i18n55 = require("@wordpress/i18n");
@@ -8216,7 +8270,7 @@ var TransformOriginControl = () => {
8216
8270
  };
8217
8271
  var ControlFields2 = ({ control }) => {
8218
8272
  const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
8219
- const rowRef = (0, import_react65.useRef)(null);
8273
+ const rowRef = (0, import_react66.useRef)(null);
8220
8274
  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
8221
8275
  };
8222
8276
 
@@ -8264,7 +8318,7 @@ var SIZE11 = "tiny";
8264
8318
  var TransformRepeaterControl = createControl(
8265
8319
  ({ showChildrenPerspective }) => {
8266
8320
  const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
8267
- const headerRef = (0, import_react66.useRef)(null);
8321
+ const headerRef = (0, import_react67.useRef)(null);
8268
8322
  const popupState = (0, import_ui95.usePopupState)({ variant: "popover" });
8269
8323
  return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
8270
8324
  TransformSettingsControl,
@@ -8344,7 +8398,7 @@ var TransformBasePopoverTrigger = ({
8344
8398
 
8345
8399
  // src/controls/transition-control/transition-repeater-control.tsx
8346
8400
  var React115 = __toESM(require("react"));
8347
- var import_react69 = require("react");
8401
+ var import_react70 = require("react");
8348
8402
  var import_editor_props57 = require("@elementor/editor-props");
8349
8403
  var import_icons39 = require("@elementor/icons");
8350
8404
  var import_ui98 = require("@elementor/ui");
@@ -8353,15 +8407,15 @@ var import_i18n60 = require("@wordpress/i18n");
8353
8407
 
8354
8408
  // src/controls/selection-size-control.tsx
8355
8409
  var React113 = __toESM(require("react"));
8356
- var import_react67 = require("react");
8410
+ var import_react68 = require("react");
8357
8411
  var import_editor_props55 = require("@elementor/editor-props");
8358
8412
  var import_ui96 = require("@elementor/ui");
8359
8413
  var SelectionSizeControl = createControl(
8360
8414
  ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
8361
8415
  const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
8362
- const rowRef = (0, import_react67.useRef)(null);
8416
+ const rowRef = (0, import_react68.useRef)(null);
8363
8417
  const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
8364
- const currentSizeConfig = (0, import_react67.useMemo)(() => {
8418
+ const currentSizeConfig = (0, import_react68.useMemo)(() => {
8365
8419
  switch (value.selection.$$type) {
8366
8420
  case "key-value":
8367
8421
  return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -8574,7 +8628,7 @@ function subscribeToTransitionEvent() {
8574
8628
 
8575
8629
  // src/controls/transition-control/transition-selector.tsx
8576
8630
  var React114 = __toESM(require("react"));
8577
- var import_react68 = require("react");
8631
+ var import_react69 = require("react");
8578
8632
  var import_editor_props56 = require("@elementor/editor-props");
8579
8633
  var import_editor_ui15 = require("@elementor/editor-ui");
8580
8634
  var import_icons38 = require("@elementor/icons");
@@ -8660,9 +8714,9 @@ var TransitionSelector = ({
8660
8714
  const {
8661
8715
  key: { value: transitionLabel }
8662
8716
  } = value;
8663
- const defaultRef = (0, import_react68.useRef)(null);
8717
+ const defaultRef = (0, import_react69.useRef)(null);
8664
8718
  const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
8665
- const disabledCategories = (0, import_react68.useMemo)(() => {
8719
+ const disabledCategories = (0, import_react69.useMemo)(() => {
8666
8720
  return new Set(
8667
8721
  transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
8668
8722
  );
@@ -8888,14 +8942,14 @@ var TransitionRepeaterControl = createControl(
8888
8942
  currentStyleState
8889
8943
  }) => {
8890
8944
  const currentStyleIsNormal = currentStyleState === null;
8891
- const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
8945
+ const [recentlyUsedList, setRecentlyUsedList] = (0, import_react70.useState)([]);
8892
8946
  const proInstalled = (0, import_utils8.hasProInstalled)();
8893
8947
  const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
8894
- const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
8948
+ const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react70.useMemo)(
8895
8949
  () => getDisabledItemLabels(value),
8896
8950
  [value]
8897
8951
  );
8898
- const allowedTransitionSet = (0, import_react69.useMemo)(() => {
8952
+ const allowedTransitionSet = (0, import_react70.useMemo)(() => {
8899
8953
  const set = /* @__PURE__ */ new Set();
8900
8954
  transitionProperties.forEach((category) => {
8901
8955
  category.properties.forEach((prop) => {
@@ -8906,7 +8960,7 @@ var TransitionRepeaterControl = createControl(
8906
8960
  });
8907
8961
  return set;
8908
8962
  }, [proInstalled]);
8909
- (0, import_react69.useEffect)(() => {
8963
+ (0, import_react70.useEffect)(() => {
8910
8964
  if (!value || value.length === 0) {
8911
8965
  return;
8912
8966
  }
@@ -8918,10 +8972,10 @@ var TransitionRepeaterControl = createControl(
8918
8972
  setValue(sanitized);
8919
8973
  }
8920
8974
  }, [allowedTransitionSet]);
8921
- (0, import_react69.useEffect)(() => {
8975
+ (0, import_react70.useEffect)(() => {
8922
8976
  recentlyUsedListGetter().then(setRecentlyUsedList);
8923
8977
  }, [recentlyUsedListGetter]);
8924
- const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
8978
+ const allPropertiesUsed = (0, import_react70.useMemo)(() => areAllPropertiesUsed(value), [value]);
8925
8979
  const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
8926
8980
  return /* @__PURE__ */ React115.createElement(
8927
8981
  RepeatableControl,
@@ -9204,13 +9258,13 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
9204
9258
 
9205
9259
  // src/controls/inline-editing-control.tsx
9206
9260
  var React124 = __toESM(require("react"));
9207
- var import_react75 = require("react");
9261
+ var import_react76 = require("react");
9208
9262
  var import_editor_props65 = require("@elementor/editor-props");
9209
9263
  var import_ui107 = require("@elementor/ui");
9210
9264
 
9211
9265
  // src/components/inline-editor.tsx
9212
9266
  var React121 = __toESM(require("react"));
9213
- var import_react70 = require("react");
9267
+ var import_react71 = require("react");
9214
9268
  var import_ui104 = require("@elementor/ui");
9215
9269
  var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
9216
9270
  var import_extension_document = __toESM(require("@tiptap/extension-document"));
@@ -9224,7 +9278,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
9224
9278
  var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
9225
9279
  var import_extension_text = __toESM(require("@tiptap/extension-text"));
9226
9280
  var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
9227
- var import_react71 = require("@tiptap/react");
9281
+ var import_react72 = require("@tiptap/react");
9228
9282
 
9229
9283
  // src/utils/inline-editing.ts
9230
9284
  var import_editor_props64 = require("@elementor/editor-props");
@@ -9273,8 +9327,8 @@ var InlineEditor = React121.forwardRef((props, ref) => {
9273
9327
  onSelectionEnd,
9274
9328
  mountElement = null
9275
9329
  } = props;
9276
- const containerRef = (0, import_react70.useRef)(null);
9277
- const onBlurRef = (0, import_react70.useRef)(onBlur);
9330
+ const containerRef = (0, import_react71.useRef)(null);
9331
+ const onBlurRef = (0, import_react71.useRef)(onBlur);
9278
9332
  onBlurRef.current = onBlur;
9279
9333
  const documentContentSettings = !!expectedTag ? "block+" : "inline*";
9280
9334
  const onUpdate = ({ editor: updatedEditor }) => {
@@ -9296,7 +9350,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
9296
9350
  ...HTMLAttributes,
9297
9351
  class: elementClasses
9298
9352
  });
9299
- const editor = (0, import_react71.useEditor)({
9353
+ const editor = (0, import_react72.useEditor)({
9300
9354
  ...mountElement ? { element: mountElement } : {},
9301
9355
  extensions: [
9302
9356
  import_extension_document.default.extend({
@@ -9369,11 +9423,11 @@ var InlineEditor = React121.forwardRef((props, ref) => {
9369
9423
  if (mountElement) {
9370
9424
  return null;
9371
9425
  }
9372
- return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react71.EditorContent, { ref, editor }));
9426
+ return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react72.EditorContent, { ref, editor }));
9373
9427
  });
9374
9428
  var useOnUpdate = (callback, dependencies) => {
9375
- const hasMounted = (0, import_react70.useRef)(false);
9376
- (0, import_react70.useEffect)(() => {
9429
+ const hasMounted = (0, import_react71.useRef)(false);
9430
+ (0, import_react71.useEffect)(() => {
9377
9431
  if (hasMounted.current) {
9378
9432
  callback();
9379
9433
  } else {
@@ -9384,16 +9438,16 @@ var useOnUpdate = (callback, dependencies) => {
9384
9438
 
9385
9439
  // src/components/inline-editor-toolbar.tsx
9386
9440
  var React123 = __toESM(require("react"));
9387
- var import_react73 = require("react");
9441
+ var import_react74 = require("react");
9388
9442
  var import_editor_elements7 = require("@elementor/editor-elements");
9389
9443
  var import_icons41 = require("@elementor/icons");
9390
9444
  var import_ui106 = require("@elementor/ui");
9391
- var import_react74 = require("@tiptap/react");
9445
+ var import_react75 = require("@tiptap/react");
9392
9446
  var import_i18n64 = require("@wordpress/i18n");
9393
9447
 
9394
9448
  // src/components/url-popover.tsx
9395
9449
  var React122 = __toESM(require("react"));
9396
- var import_react72 = require("react");
9450
+ var import_react73 = require("react");
9397
9451
  var import_icons40 = require("@elementor/icons");
9398
9452
  var import_ui105 = require("@elementor/ui");
9399
9453
  var import_i18n63 = require("@wordpress/i18n");
@@ -9406,8 +9460,8 @@ var UrlPopover = ({
9406
9460
  openInNewTab,
9407
9461
  onToggleNewTab
9408
9462
  }) => {
9409
- const inputRef = (0, import_react72.useRef)(null);
9410
- (0, import_react72.useEffect)(() => {
9463
+ const inputRef = (0, import_react73.useRef)(null);
9464
+ (0, import_react73.useEffect)(() => {
9411
9465
  if (popupState.isOpen) {
9412
9466
  requestAnimationFrame(() => inputRef.current?.focus());
9413
9467
  }
@@ -9462,16 +9516,16 @@ var InlineEditorToolbar = ({
9462
9516
  sx = {},
9463
9517
  inControlPanel = false
9464
9518
  }) => {
9465
- const [urlValue, setUrlValue] = (0, import_react73.useState)("");
9466
- const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
9467
- const toolbarRef = (0, import_react73.useRef)(null);
9519
+ const [urlValue, setUrlValue] = (0, import_react74.useState)("");
9520
+ const [openInNewTab, setOpenInNewTab] = (0, import_react74.useState)(false);
9521
+ const toolbarRef = (0, import_react74.useRef)(null);
9468
9522
  const linkPopupState = (0, import_ui106.usePopupState)({ variant: "popover" });
9469
9523
  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
9470
- const editorState = (0, import_react74.useEditorState)({
9524
+ const editorState = (0, import_react75.useEditorState)({
9471
9525
  editor,
9472
9526
  selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
9473
9527
  });
9474
- const formatButtonsList = (0, import_react73.useMemo)(() => {
9528
+ const formatButtonsList = (0, import_react74.useMemo)(() => {
9475
9529
  const buttons = Object.values(formatButtons);
9476
9530
  if (isElementClickable) {
9477
9531
  return buttons.filter((button) => button.action !== "link");
@@ -9508,7 +9562,7 @@ var InlineEditorToolbar = ({
9508
9562
  }
9509
9563
  linkPopupState.close();
9510
9564
  };
9511
- (0, import_react73.useEffect)(() => {
9565
+ (0, import_react74.useEffect)(() => {
9512
9566
  if (!inControlPanel) {
9513
9567
  editor?.commands?.focus();
9514
9568
  }
@@ -9689,8 +9743,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
9689
9743
  const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
9690
9744
  const { value: rawValue } = usePropKeyContext();
9691
9745
  const content = value ?? extractInlineHtmlContent(rawValue);
9692
- const [editor, setEditor] = (0, import_react75.useState)(null);
9693
- const handleChange = (0, import_react75.useCallback)(
9746
+ const [editor, setEditor] = (0, import_react76.useState)(null);
9747
+ const handleChange = (0, import_react76.useCallback)(
9694
9748
  (newValue) => {
9695
9749
  const html = newValue ?? "";
9696
9750
  setValue(html);
@@ -9872,7 +9926,7 @@ function useFormFieldSuggestions(options) {
9872
9926
 
9873
9927
  // src/controls/email-form-action-control/email-chips-field.tsx
9874
9928
  var React125 = __toESM(require("react"));
9875
- var import_react76 = require("react");
9929
+ var import_react77 = require("react");
9876
9930
  var import_editor_props67 = require("@elementor/editor-props");
9877
9931
  var import_ui108 = require("@elementor/ui");
9878
9932
 
@@ -9910,10 +9964,10 @@ function resolveMention(raw, suggestions) {
9910
9964
  }
9911
9965
  var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
9912
9966
  const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
9913
- const [inputValue, setInputValue] = (0, import_react76.useState)("");
9967
+ const [inputValue, setInputValue] = (0, import_react77.useState)("");
9914
9968
  const items2 = value || [];
9915
9969
  const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
9916
- const suggestionOptions = (0, import_react76.useMemo)(
9970
+ const suggestionOptions = (0, import_react77.useMemo)(
9917
9971
  () => suggestions.map((suggestion) => `[${suggestion.value}]`),
9918
9972
  [suggestions]
9919
9973
  );
@@ -10093,7 +10147,7 @@ var AttachmentTypeControl = createControl(({ label, options }) => {
10093
10147
 
10094
10148
  // src/controls/notice-control.tsx
10095
10149
  var React130 = __toESM(require("react"));
10096
- var import_react77 = require("react");
10150
+ var import_react78 = require("react");
10097
10151
  var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
10098
10152
  var import_icons42 = require("@elementor/icons");
10099
10153
  var import_ui113 = require("@elementor/ui");
@@ -10111,7 +10165,7 @@ var markNoticeAsDismissedInSession = (dismissId) => {
10111
10165
  };
10112
10166
  var NoticeControl = createControl(
10113
10167
  ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
10114
- const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
10168
+ const [isDismissed, setIsDismissed] = (0, import_react78.useState)(false);
10115
10169
  if (isDismissed || !content) {
10116
10170
  return null;
10117
10171
  }
@@ -10194,24 +10248,24 @@ var GridSpanControl = createControl(
10194
10248
 
10195
10249
  // src/components/promotions/display-conditions-control.tsx
10196
10250
  var React133 = __toESM(require("react"));
10197
- var import_react79 = require("react");
10251
+ var import_react80 = require("react");
10198
10252
  var import_icons43 = require("@elementor/icons");
10199
10253
  var import_ui116 = require("@elementor/ui");
10200
10254
  var import_i18n68 = require("@wordpress/i18n");
10201
10255
 
10202
10256
  // src/components/promotions/promotion-trigger.tsx
10203
10257
  var React132 = __toESM(require("react"));
10204
- var import_react78 = require("react");
10258
+ var import_react79 = require("react");
10205
10259
  var import_editor_ui19 = require("@elementor/editor-ui");
10206
10260
  var import_ui115 = require("@elementor/ui");
10207
10261
  function getV4Promotion(key) {
10208
10262
  return window.elementor?.config?.v4Promotions?.[key];
10209
10263
  }
10210
- var PromotionTrigger = (0, import_react78.forwardRef)(
10264
+ var PromotionTrigger = (0, import_react79.forwardRef)(
10211
10265
  ({ promotionKey, children, trackingData }, ref) => {
10212
- const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
10266
+ const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
10213
10267
  const promotion = getV4Promotion(promotionKey);
10214
- const toggle = (0, import_react78.useCallback)(() => {
10268
+ const toggle = (0, import_react79.useCallback)(() => {
10215
10269
  setIsOpen((prev) => {
10216
10270
  if (!prev) {
10217
10271
  trackViewPromotion(trackingData);
@@ -10219,7 +10273,7 @@ var PromotionTrigger = (0, import_react78.forwardRef)(
10219
10273
  return !prev;
10220
10274
  });
10221
10275
  }, [trackingData]);
10222
- (0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
10276
+ (0, import_react79.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
10223
10277
  return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
10224
10278
  import_editor_ui19.PromotionInfotip,
10225
10279
  {
@@ -10253,7 +10307,7 @@ var PromotionTrigger = (0, import_react78.forwardRef)(
10253
10307
  var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
10254
10308
  var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
10255
10309
  var DisplayConditionsControl = createControl(() => {
10256
- const triggerRef = (0, import_react79.useRef)(null);
10310
+ const triggerRef = (0, import_react80.useRef)(null);
10257
10311
  return /* @__PURE__ */ React133.createElement(
10258
10312
  import_ui116.Stack,
10259
10313
  {
@@ -10285,14 +10339,14 @@ var DisplayConditionsControl = createControl(() => {
10285
10339
 
10286
10340
  // src/components/promotions/attributes-control.tsx
10287
10341
  var React134 = __toESM(require("react"));
10288
- var import_react80 = require("react");
10342
+ var import_react81 = require("react");
10289
10343
  var import_icons44 = require("@elementor/icons");
10290
10344
  var import_ui117 = require("@elementor/ui");
10291
10345
  var import_i18n69 = require("@wordpress/i18n");
10292
10346
  var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
10293
10347
  var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
10294
10348
  var AttributesControl = createControl(() => {
10295
- const triggerRef = (0, import_react80.useRef)(null);
10349
+ const triggerRef = (0, import_react81.useRef)(null);
10296
10350
  return /* @__PURE__ */ React134.createElement(
10297
10351
  import_ui117.Stack,
10298
10352
  {
@@ -10329,7 +10383,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
10329
10383
 
10330
10384
  // src/components/repeater/repeater.tsx
10331
10385
  var React136 = __toESM(require("react"));
10332
- var import_react81 = require("react");
10386
+ var import_react82 = require("react");
10333
10387
  var import_icons46 = require("@elementor/icons");
10334
10388
  var import_ui119 = require("@elementor/ui");
10335
10389
  var import_i18n70 = require("@wordpress/i18n");
@@ -10351,7 +10405,7 @@ var Repeater3 = ({
10351
10405
  isSortable = true,
10352
10406
  adornment = ControlAdornments
10353
10407
  }) => {
10354
- const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
10408
+ const [openItem, setOpenItem] = (0, import_react82.useState)(initialOpenItem);
10355
10409
  const uniqueKeys = items2.map(
10356
10410
  (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
10357
10411
  );
@@ -10527,10 +10581,10 @@ var RepeaterItem = ({
10527
10581
  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui119.Box, null, children({ anchorEl: ref }))));
10528
10582
  };
10529
10583
  var usePopover = (openOnMount, onOpen, onPopoverClose) => {
10530
- const [ref, setRef] = (0, import_react81.useState)(null);
10584
+ const [ref, setRef] = (0, import_react82.useState)(null);
10531
10585
  const popoverState = (0, import_ui119.usePopupState)({ variant: "popover" });
10532
10586
  const popoverProps = (0, import_ui119.bindPopover)(popoverState);
10533
- (0, import_react81.useEffect)(() => {
10587
+ (0, import_react82.useEffect)(() => {
10534
10588
  if (openOnMount && ref) {
10535
10589
  popoverState.open(ref);
10536
10590
  onOpen?.();
@@ -10593,7 +10647,7 @@ var differsFromExternal = (newState, externalState) => {
10593
10647
 
10594
10648
  // src/components/size/unit-select.tsx
10595
10649
  var React137 = __toESM(require("react"));
10596
- var import_react82 = require("react");
10650
+ var import_react83 = require("react");
10597
10651
  var import_editor_ui20 = require("@elementor/editor-ui");
10598
10652
  var import_ui120 = require("@elementor/ui");
10599
10653
  var menuItemContentStyles2 = {
@@ -10604,7 +10658,7 @@ var menuItemContentStyles2 = {
10604
10658
  var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
10605
10659
  const popupState = (0, import_ui120.usePopupState)({
10606
10660
  variant: "popover",
10607
- popupId: (0, import_react82.useId)()
10661
+ popupId: (0, import_react83.useId)()
10608
10662
  });
10609
10663
  const handleMenuItemClick = (index) => {
10610
10664
  onClick(options[index]);
@@ -10640,8 +10694,8 @@ var StyledButton3 = (0, import_ui120.styled)(import_ui120.Button, {
10640
10694
 
10641
10695
  // src/components/size/unstable-size-input.tsx
10642
10696
  var React138 = __toESM(require("react"));
10643
- var import_react83 = require("react");
10644
- var UnstableSizeInput = (0, import_react83.forwardRef)(
10697
+ var import_react84 = require("react");
10698
+ var UnstableSizeInput = (0, import_react84.forwardRef)(
10645
10699
  ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
10646
10700
  return /* @__PURE__ */ React138.createElement(
10647
10701
  NumberInput,
@@ -10709,7 +10763,7 @@ var hasValue = (value) => {
10709
10763
  };
10710
10764
 
10711
10765
  // src/hooks/use-font-families.ts
10712
- var import_react84 = require("react");
10766
+ var import_react85 = require("react");
10713
10767
  var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
10714
10768
  var getFontControlConfig = () => {
10715
10769
  const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
@@ -10717,7 +10771,7 @@ var getFontControlConfig = () => {
10717
10771
  };
10718
10772
  var useFontFamilies = () => {
10719
10773
  const { groups, options } = getFontControlConfig();
10720
- return (0, import_react84.useMemo)(() => {
10774
+ return (0, import_react85.useMemo)(() => {
10721
10775
  if (!groups || !options) {
10722
10776
  return [];
10723
10777
  }