@elementor/editor-editing-panel 1.14.0 → 1.16.0
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/CHANGELOG.md +33 -0
- package/dist/index.js +30 -16
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +31 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -11
- package/src/components/css-classes/css-class-menu.tsx +1 -1
- package/src/components/css-classes/css-class-selector.tsx +1 -1
- package/src/components/style-sections/layout-section/flex-size-field.tsx +1 -1
- package/src/components/style-sections/position-section/dimensions-field.tsx +1 -1
- package/src/components/style-sections/position-section/z-index-field.tsx +1 -1
- package/src/components/style-sections/size-section/size-section.tsx +18 -9
- package/src/components/style-sections/spacing-section/spacing-section.tsx +1 -1
- package/src/components/style-sections/typography-section/font-weight-field.tsx +3 -3
- package/src/dynamics/components/dynamic-selection-control.tsx +12 -3
- package/src/dynamics/components/dynamic-selection.tsx +1 -1
- package/src/dynamics/hooks/use-prop-dynamic-action.tsx +1 -1
- package/src/styles-inheritance/create-snapshots-manager.ts +179 -0
- package/src/styles-inheritance/create-styles-inheritance.ts +50 -0
- package/src/styles-inheritance/types.ts +42 -0
- package/src/styles-inheritance/utils.ts +10 -0
package/dist/index.mjs
CHANGED
|
@@ -281,7 +281,7 @@ function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl })
|
|
|
281
281
|
onKeyDown: handleKeyDown
|
|
282
282
|
},
|
|
283
283
|
getMenuItemsByProvider({ provider, styleId, handleRename, closeMenu: popupState.close }),
|
|
284
|
-
/* @__PURE__ */ React5.createElement(ListSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("Pseudo
|
|
284
|
+
/* @__PURE__ */ React5.createElement(ListSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("Pseudo classes", "elementor")),
|
|
285
285
|
STATES.map((state) => {
|
|
286
286
|
return /* @__PURE__ */ React5.createElement(StateMenuItem, { key: state, state, styleId });
|
|
287
287
|
})
|
|
@@ -459,7 +459,7 @@ function CssClassSelector() {
|
|
|
459
459
|
const handleApply = useHandleApply(appliedIds, setAppliedIds);
|
|
460
460
|
const applied = useAppliedOptions(options11, appliedIds);
|
|
461
461
|
const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
|
|
462
|
-
return /* @__PURE__ */ React7.createElement(Stack2, { gap: 1, p: 2 }, /* @__PURE__ */ React7.createElement(Stack2, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(Typography2, { component: "label", variant: "caption", htmlFor: ID }, __3("CSS
|
|
462
|
+
return /* @__PURE__ */ React7.createElement(Stack2, { gap: 1, p: 2 }, /* @__PURE__ */ React7.createElement(Stack2, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(Typography2, { component: "label", variant: "caption", htmlFor: ID }, __3("CSS classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack2, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
|
|
463
463
|
MultiCombobox,
|
|
464
464
|
{
|
|
465
465
|
id: ID,
|
|
@@ -1608,7 +1608,7 @@ var FlexSizeField = () => {
|
|
|
1608
1608
|
}
|
|
1609
1609
|
))), "custom" === activeGroup && /* @__PURE__ */ React34.createElement(FlexCustomField, null))));
|
|
1610
1610
|
};
|
|
1611
|
-
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Grow", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Shrink", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Basis", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(SizeControl2,
|
|
1611
|
+
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Grow", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Shrink", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Basis", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(SizeControl2, { extendedValues: ["auto"] })))));
|
|
1612
1612
|
var getActiveGroup = ({
|
|
1613
1613
|
grow,
|
|
1614
1614
|
shrink,
|
|
@@ -1762,7 +1762,7 @@ var DimensionsField = () => {
|
|
|
1762
1762
|
return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "top", label: __20("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "right", label: __20("Right", "elementor") })), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "bottom", label: __20("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "left", label: __20("Left", "elementor") })));
|
|
1763
1763
|
};
|
|
1764
1764
|
var DimensionField = ({ side, label }) => {
|
|
1765
|
-
return /* @__PURE__ */ React39.createElement(Grid9, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel14, null, label)), /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(SizeControl3, { startIcon: sideIcons[side] }))));
|
|
1765
|
+
return /* @__PURE__ */ React39.createElement(Grid9, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel14, null, label)), /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(SizeControl3, { startIcon: sideIcons[side], extendedValues: ["auto"] }))));
|
|
1766
1766
|
};
|
|
1767
1767
|
|
|
1768
1768
|
// src/components/style-sections/position-section/position-field.tsx
|
|
@@ -1787,7 +1787,7 @@ import { ControlLabel as ControlLabel16, NumberControl as NumberControl3 } from
|
|
|
1787
1787
|
import { Grid as Grid11 } from "@elementor/ui";
|
|
1788
1788
|
import { __ as __22 } from "@wordpress/i18n";
|
|
1789
1789
|
var ZIndexField = () => {
|
|
1790
|
-
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel16, null, __22("Z-
|
|
1790
|
+
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel16, null, __22("Z-index", "elementor"))), /* @__PURE__ */ React41.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(NumberControl3, null))));
|
|
1791
1791
|
};
|
|
1792
1792
|
|
|
1793
1793
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1866,10 +1866,24 @@ var OverflowField = () => {
|
|
|
1866
1866
|
|
|
1867
1867
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1868
1868
|
var SizeSection = () => {
|
|
1869
|
-
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "width", label: __24("Width", "elementor")
|
|
1869
|
+
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "width", label: __24("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "height", label: __24("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
|
|
1870
|
+
SizeField,
|
|
1871
|
+
{
|
|
1872
|
+
bind: "min-width",
|
|
1873
|
+
label: __24("Min width", "elementor"),
|
|
1874
|
+
extendedValues: ["auto"]
|
|
1875
|
+
}
|
|
1876
|
+
)), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
|
|
1877
|
+
SizeField,
|
|
1878
|
+
{
|
|
1879
|
+
bind: "min-height",
|
|
1880
|
+
label: __24("Min height", "elementor"),
|
|
1881
|
+
extendedValues: ["auto"]
|
|
1882
|
+
}
|
|
1883
|
+
))), /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-width", label: __24("Max width", "elementor") })), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-height", label: __24("Max height", "elementor") }))), /* @__PURE__ */ React44.createElement(PanelDivider, null), /* @__PURE__ */ React44.createElement(Stack11, null, /* @__PURE__ */ React44.createElement(OverflowField, null)));
|
|
1870
1884
|
};
|
|
1871
|
-
var SizeField = ({ label, bind }) => {
|
|
1872
|
-
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(ControlLabel18, null, label)), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(SizeControl4,
|
|
1885
|
+
var SizeField = ({ label, bind, extendedValues }) => {
|
|
1886
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(ControlLabel18, null, label)), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(SizeControl4, { extendedValues }))));
|
|
1873
1887
|
};
|
|
1874
1888
|
|
|
1875
1889
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
@@ -1877,7 +1891,7 @@ import * as React45 from "react";
|
|
|
1877
1891
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
1878
1892
|
import { __ as __25 } from "@wordpress/i18n";
|
|
1879
1893
|
var SpacingSection = () => {
|
|
1880
|
-
return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Padding", "elementor") })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Margin", "elementor") })));
|
|
1894
|
+
return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Padding", "elementor") })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Margin", "elementor"), extendedValues: ["auto"] })));
|
|
1881
1895
|
};
|
|
1882
1896
|
|
|
1883
1897
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -1975,13 +1989,13 @@ import { Grid as Grid17 } from "@elementor/ui";
|
|
|
1975
1989
|
import { __ as __30 } from "@wordpress/i18n";
|
|
1976
1990
|
var fontWeightOptions = [
|
|
1977
1991
|
{ value: "100", label: __30("100 - Thin", "elementor") },
|
|
1978
|
-
{ value: "200", label: __30("200 - Extra
|
|
1992
|
+
{ value: "200", label: __30("200 - Extra light", "elementor") },
|
|
1979
1993
|
{ value: "300", label: __30("300 - Light", "elementor") },
|
|
1980
1994
|
{ value: "400", label: __30("400 - Normal", "elementor") },
|
|
1981
1995
|
{ value: "500", label: __30("500 - Medium", "elementor") },
|
|
1982
|
-
{ value: "600", label: __30("600 - Semi
|
|
1996
|
+
{ value: "600", label: __30("600 - Semi bold", "elementor") },
|
|
1983
1997
|
{ value: "700", label: __30("700 - Bold", "elementor") },
|
|
1984
|
-
{ value: "800", label: __30("800 - Extra
|
|
1998
|
+
{ value: "800", label: __30("800 - Extra bold", "elementor") },
|
|
1985
1999
|
{ value: "900", label: __30("900 - Black", "elementor") }
|
|
1986
2000
|
];
|
|
1987
2001
|
var FontWeightField = () => {
|
|
@@ -2368,6 +2382,7 @@ import {
|
|
|
2368
2382
|
bindTrigger as bindTrigger2,
|
|
2369
2383
|
Box as Box5,
|
|
2370
2384
|
Divider as Divider7,
|
|
2385
|
+
Grid as Grid26,
|
|
2371
2386
|
IconButton as IconButton3,
|
|
2372
2387
|
Paper,
|
|
2373
2388
|
Popover as Popover2,
|
|
@@ -2545,7 +2560,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2545
2560
|
size: SIZE3,
|
|
2546
2561
|
value: searchValue,
|
|
2547
2562
|
onChange: handleSearch,
|
|
2548
|
-
placeholder: __43("Search dynamic
|
|
2563
|
+
placeholder: __43("Search dynamic tags\u2026", "elementor"),
|
|
2549
2564
|
InputProps: {
|
|
2550
2565
|
startAdornment: /* @__PURE__ */ React66.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React66.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
2551
2566
|
}
|
|
@@ -2632,7 +2647,7 @@ var DynamicSelectionControl = () => {
|
|
|
2632
2647
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2633
2648
|
...bindPopover2(selectionPopoverState)
|
|
2634
2649
|
},
|
|
2635
|
-
/* @__PURE__ */ React67.createElement(Stack16, null, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, __44("Dynamic
|
|
2650
|
+
/* @__PURE__ */ React67.createElement(Stack16, null, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, __44("Dynamic tags", "elementor")), /* @__PURE__ */ React67.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2636
2651
|
));
|
|
2637
2652
|
};
|
|
2638
2653
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -2679,7 +2694,7 @@ var Control3 = ({ control }) => {
|
|
|
2679
2694
|
if (!getControlByType(control.type)) {
|
|
2680
2695
|
return null;
|
|
2681
2696
|
}
|
|
2682
|
-
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React67.createElement(ControlLabel31, null, control.label) : null, /* @__PURE__ */ React67.createElement(Control, { type: control.type, props: control.props }));
|
|
2697
|
+
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React67.createElement(Grid26, { container: true, gap: 1 }, control.label ? /* @__PURE__ */ React67.createElement(Grid26, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(ControlLabel31, null, control.label)) : null, /* @__PURE__ */ React67.createElement(Grid26, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(Control, { type: control.type, props: control.props }))));
|
|
2683
2698
|
};
|
|
2684
2699
|
|
|
2685
2700
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
@@ -2693,7 +2708,7 @@ var usePropDynamicAction = () => {
|
|
|
2693
2708
|
return {
|
|
2694
2709
|
visible,
|
|
2695
2710
|
icon: DatabaseIcon2,
|
|
2696
|
-
title: __45("Dynamic
|
|
2711
|
+
title: __45("Dynamic tags", "elementor"),
|
|
2697
2712
|
popoverContent: ({ closePopover }) => /* @__PURE__ */ React68.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2698
2713
|
};
|
|
2699
2714
|
};
|