@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.d.mts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +261 -207
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +185 -131
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/link-control.tsx +18 -8
- package/src/controls/number-control.tsx +81 -25
- package/src/utils/number-value.ts +17 -0
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
|
|
3038
|
-
min
|
|
3039
|
-
step
|
|
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
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
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
|
-
|
|
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:
|
|
3070
|
-
onInput:
|
|
3071
|
-
onBlur:
|
|
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
|
|
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,
|
|
3143
|
+
const popupId = (0, import_react31.useId)();
|
|
3096
3144
|
const popupState = (0, import_ui43.usePopupState)({ variant: "popover", popupId });
|
|
3097
|
-
const rowRefs = [(0,
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
3376
|
+
var import_react32 = require("react");
|
|
3329
3377
|
var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
|
|
3330
|
-
const [state, setState] = (0,
|
|
3331
|
-
(0,
|
|
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,
|
|
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
|
|
3405
|
-
var SizeInput2 = (0,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
3601
|
-
(0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
4212
|
-
(0,
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
4544
|
-
const [options, setOptions] = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
4764
|
+
const syncLinkRestriction = (clearActiveLinkWhen = "restricted") => {
|
|
4717
4765
|
const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
|
|
4718
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
4783
|
+
debouncedSyncLinkRestriction("newly-restricted");
|
|
4730
4784
|
},
|
|
4731
|
-
[
|
|
4785
|
+
[debouncedSyncLinkRestriction]
|
|
4732
4786
|
);
|
|
4733
|
-
(0,
|
|
4734
|
-
|
|
4787
|
+
(0, import_react44.useEffect)(() => {
|
|
4788
|
+
debouncedSyncLinkRestriction();
|
|
4735
4789
|
const handleInlineLinkChanged = () => {
|
|
4736
|
-
|
|
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,
|
|
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
|
|
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,
|
|
4922
|
-
const excludeIds = (0,
|
|
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
|
|
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,
|
|
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,
|
|
5002
|
-
const nextAvailableKey = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
5300
|
-
const [customWidth, setCustomWidth] = (0,
|
|
5301
|
-
const [customHeight, setCustomHeight] = (0,
|
|
5302
|
-
const [selectedValue, setSelectedValue] = (0,
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
5904
|
-
const cellRefs = (0,
|
|
5905
|
-
const shouldRestoreFocusRef = (0,
|
|
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,
|
|
5908
|
-
const [{ columnCount, cellSize }, setGridMetrics] = (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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
6335
|
+
const items2 = (0, import_react53.useMemo)(
|
|
6282
6336
|
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
6283
6337
|
[activeLibraries, icons, searchValue]
|
|
6284
6338
|
);
|
|
6285
|
-
const selectedValue = (0,
|
|
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,
|
|
6685
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react54.useState)(false);
|
|
6632
6686
|
const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
|
|
6633
|
-
const controlContainerRef = (0,
|
|
6634
|
-
const buttonGroupRef = (0,
|
|
6635
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] = (0,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
7607
|
-
const [valueError, setValueError] = (0,
|
|
7608
|
-
const [sessionState, setSessionState] = (0,
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
8416
|
+
const rowRef = (0, import_react68.useRef)(null);
|
|
8363
8417
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
8364
|
-
const currentSizeConfig = (0,
|
|
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
|
|
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,
|
|
8717
|
+
const defaultRef = (0, import_react69.useRef)(null);
|
|
8664
8718
|
const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
|
|
8665
|
-
const disabledCategories = (0,
|
|
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,
|
|
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,
|
|
8948
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react70.useMemo)(
|
|
8895
8949
|
() => getDisabledItemLabels(value),
|
|
8896
8950
|
[value]
|
|
8897
8951
|
);
|
|
8898
|
-
const allowedTransitionSet = (0,
|
|
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,
|
|
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,
|
|
8975
|
+
(0, import_react70.useEffect)(() => {
|
|
8922
8976
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
8923
8977
|
}, [recentlyUsedListGetter]);
|
|
8924
|
-
const allPropertiesUsed = (0,
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
9277
|
-
const onBlurRef = (0,
|
|
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,
|
|
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(
|
|
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,
|
|
9376
|
-
(0,
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
9410
|
-
(0,
|
|
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,
|
|
9466
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
9467
|
-
const toolbarRef = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
9693
|
-
const handleChange = (0,
|
|
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
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
10264
|
+
var PromotionTrigger = (0, import_react79.forwardRef)(
|
|
10211
10265
|
({ promotionKey, children, trackingData }, ref) => {
|
|
10212
|
-
const [isOpen, setIsOpen] = (0,
|
|
10266
|
+
const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
|
|
10213
10267
|
const promotion = getV4Promotion(promotionKey);
|
|
10214
|
-
const toggle = (0,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
10644
|
-
var UnstableSizeInput = (0,
|
|
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
|
|
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,
|
|
10774
|
+
return (0, import_react85.useMemo)(() => {
|
|
10721
10775
|
if (!groups || !options) {
|
|
10722
10776
|
return [];
|
|
10723
10777
|
}
|