@wix/editor-react-components 1.2481.0 → 1.2482.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/dist/site/components/AccordionComponent/component.js +5 -3
- package/dist/site/components/AccordionComponent/manifest.js +1 -1
- package/dist/site/components/Breadcrumbs/component.js +3 -2
- package/dist/site/components/Menu/component.js +27 -78
- package/dist/site/components/Menu/components/Submenu/types.d.ts +0 -1
- package/dist/site/components/Menu/contexts/MenuContext.d.ts +0 -1
- package/dist/site/components/Menu/css.css +8 -60
- package/dist/site/components/Menu/manifest.js +1 -1
- package/dist/site/components/chunks/constants27.js +2 -2
- package/dist/site/components/chunks/constants40.js +2 -2
- package/package.json +2 -2
- package/dist/site/components/Menu/semanticClassNames.d.ts +0 -20
|
@@ -4,11 +4,11 @@ import React__default, { useRef, useEffect, useMemo, useState, useCallback } fro
|
|
|
4
4
|
import "react-dom";
|
|
5
5
|
import { c as clsx } from "../chunks/clsx.js";
|
|
6
6
|
import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
|
|
7
|
+
import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants40.js";
|
|
7
8
|
import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
|
|
8
9
|
import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
|
|
9
10
|
import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";
|
|
10
11
|
import { r as requireIsArray } from "../chunks/isArray.js";
|
|
11
|
-
import { D as DEFAULT_PROPS } from "../chunks/constants40.js";
|
|
12
12
|
import { d as directionStyles } from "../chunks/direction.module.js";
|
|
13
13
|
var _overArg;
|
|
14
14
|
var hasRequired_overArg;
|
|
@@ -2463,7 +2463,8 @@ const AccordionItem = (props) => {
|
|
|
2463
2463
|
{
|
|
2464
2464
|
className: clsx(
|
|
2465
2465
|
"accordion-item",
|
|
2466
|
-
(_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className
|
|
2466
|
+
(_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className,
|
|
2467
|
+
isOpen && DesignStates.accordionItem.selected.className
|
|
2467
2468
|
),
|
|
2468
2469
|
value: item.id,
|
|
2469
2470
|
children: [
|
|
@@ -2473,7 +2474,8 @@ const AccordionItem = (props) => {
|
|
|
2473
2474
|
className: clsx(
|
|
2474
2475
|
"item-title",
|
|
2475
2476
|
styles["accordion-header"],
|
|
2476
|
-
(_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className
|
|
2477
|
+
(_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className,
|
|
2478
|
+
isOpen && DesignStates.itemTitle.selected.className
|
|
2477
2479
|
),
|
|
2478
2480
|
children: [
|
|
2479
2481
|
/* @__PURE__ */ jsx("span", { className: styles["accordion-item-label"], children: item.name }),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
|
|
2
|
-
import {
|
|
2
|
+
import { D as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants40.js";
|
|
3
3
|
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
|
|
4
4
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
5
5
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
|
|
|
6
6
|
import { createPortal } from "react-dom";
|
|
7
7
|
import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
|
|
8
8
|
import { d as directionStyles } from "../chunks/direction.module.js";
|
|
9
|
-
import { s as semanticClassNames } from "../chunks/constants38.js";
|
|
9
|
+
import { s as semanticClassNames, D as DesignStates } from "../chunks/constants38.js";
|
|
10
10
|
import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
|
|
11
11
|
import { useService } from "@wix/services-manager-react";
|
|
12
12
|
import { d as defineService } from "../chunks/index8.js";
|
|
@@ -1380,7 +1380,8 @@ function BreadcrumbItemComponent({
|
|
|
1380
1380
|
className: clsx(
|
|
1381
1381
|
semanticClassNames.itemLabel,
|
|
1382
1382
|
styles.label,
|
|
1383
|
-
(_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className
|
|
1383
|
+
(_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className,
|
|
1384
|
+
isCurrent && DesignStates.item.selected.className
|
|
1384
1385
|
),
|
|
1385
1386
|
children: [
|
|
1386
1387
|
homeIcon2,
|
|
@@ -4,12 +4,11 @@ import { useService } from "@wix/services-manager-react";
|
|
|
4
4
|
import { U as UrlDefinition } from "../chunks/index12.js";
|
|
5
5
|
import { d as defineService } from "../chunks/index8.js";
|
|
6
6
|
import { T as TranslationsDefinition } from "../chunks/index6.js";
|
|
7
|
-
import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, u as useAnimationState,
|
|
7
|
+
import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, c as DesignStates, u as useAnimationState, e as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";
|
|
8
8
|
import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from "react";
|
|
9
9
|
import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
|
|
10
10
|
import { g as getItemDepthSelector, r as rootItemDepthLevel, s as subItemDepthLevel, a as subSubItemDepthLevel } from "../chunks/utils2.js";
|
|
11
11
|
import { d as debounce } from "../chunks/performanceUtils.js";
|
|
12
|
-
import { f as formatClassNames } from "../chunks/classNames.js";
|
|
13
12
|
import { L as Link } from "../chunks/Link.js";
|
|
14
13
|
import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.js";
|
|
15
14
|
import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
|
|
@@ -24,7 +23,6 @@ const MenuContext = createContext({
|
|
|
24
23
|
currentUrl: EMPTY_ANCHOR_URL,
|
|
25
24
|
translations: defaultTranslations,
|
|
26
25
|
menuStyleId: "",
|
|
27
|
-
customClassNames: [],
|
|
28
26
|
getAnimationPackage: () => MenuAnimationName.None,
|
|
29
27
|
navAriaLabel: "",
|
|
30
28
|
isHamburgerMenuOpened: void 0,
|
|
@@ -40,7 +38,6 @@ const MenuContextProvider = ({
|
|
|
40
38
|
activeAnchor,
|
|
41
39
|
translations,
|
|
42
40
|
menuStyleId,
|
|
43
|
-
customClassNames,
|
|
44
41
|
getAnimationPackage,
|
|
45
42
|
navAriaLabel,
|
|
46
43
|
isHamburgerMenuOpened,
|
|
@@ -65,7 +62,6 @@ const MenuContextProvider = ({
|
|
|
65
62
|
activeAnchor,
|
|
66
63
|
translations,
|
|
67
64
|
menuStyleId,
|
|
68
|
-
customClassNames,
|
|
69
65
|
getAnimationPackage,
|
|
70
66
|
navAriaLabel,
|
|
71
67
|
isHamburgerMenuOpened,
|
|
@@ -82,7 +78,6 @@ const MenuContextProvider = ({
|
|
|
82
78
|
activeAnchor,
|
|
83
79
|
translations,
|
|
84
80
|
menuStyleId,
|
|
85
|
-
customClassNames,
|
|
86
81
|
getAnimationPackage,
|
|
87
82
|
navAriaLabel,
|
|
88
83
|
isHamburgerMenuOpened,
|
|
@@ -275,10 +270,10 @@ const useScroll = (ref) => {
|
|
|
275
270
|
isScrollForwardButtonVisible
|
|
276
271
|
};
|
|
277
272
|
};
|
|
278
|
-
const createSDKAction = (item2,
|
|
273
|
+
const createSDKAction = (item2, selected, sdkAction) => sdkAction && ((e) => {
|
|
279
274
|
sdkAction == null ? void 0 : sdkAction(e, {
|
|
280
275
|
...item2,
|
|
281
|
-
selected
|
|
276
|
+
selected
|
|
282
277
|
});
|
|
283
278
|
});
|
|
284
279
|
const getMenuOrientation = (itemRef) => {
|
|
@@ -676,26 +671,6 @@ const isCurrentItem = (item2, currentItem) => {
|
|
|
676
671
|
}
|
|
677
672
|
return firstLink.href === secondLink.href;
|
|
678
673
|
};
|
|
679
|
-
const menuSemanticClassNames = {
|
|
680
|
-
root: "menu",
|
|
681
|
-
item: "menu__item",
|
|
682
|
-
itemLabel: "menu__item-label",
|
|
683
|
-
scrollButton: "menu__scroll-button",
|
|
684
|
-
scrollButtonIcon: "menu__scroll-button-icon",
|
|
685
|
-
itemIcon: "menu__item-icon"
|
|
686
|
-
};
|
|
687
|
-
const shmSemanticClassNames = {
|
|
688
|
-
root: "horizontal-menu",
|
|
689
|
-
menuItemWrapper: "horizontal-menu__item",
|
|
690
|
-
menuItemLabel: "horizontal-menu__item-label"
|
|
691
|
-
};
|
|
692
|
-
const dropdownSemanticClassNames = {
|
|
693
|
-
root: "dropdown-menu",
|
|
694
|
-
dropdownItem: "dropdown-menu__item",
|
|
695
|
-
dropdownItemLabel: "dropdown-menu__item-label",
|
|
696
|
-
dropdownSubItem: "dropdown-menu__subitem",
|
|
697
|
-
dropdownSubItemLabel: "dropdown-menu__subitem-label"
|
|
698
|
-
};
|
|
699
674
|
const DropdownIcon = (props) => /* @__PURE__ */ jsx(
|
|
700
675
|
"svg",
|
|
701
676
|
{
|
|
@@ -745,10 +720,7 @@ const MenuItemDropdownIcon = ({
|
|
|
745
720
|
{
|
|
746
721
|
"data-part": MenuParts.DropdownIcon,
|
|
747
722
|
"data-open": isDropdownIconOpen ? "true" : void 0,
|
|
748
|
-
className:
|
|
749
|
-
classes$6.dropdownIcon,
|
|
750
|
-
formatClassNames(menuSemanticClassNames.itemIcon)
|
|
751
|
-
)
|
|
723
|
+
className: classes$6.dropdownIcon
|
|
752
724
|
}
|
|
753
725
|
)
|
|
754
726
|
}
|
|
@@ -786,11 +758,6 @@ const MenuItemLabel = (props) => {
|
|
|
786
758
|
submenuToggleId,
|
|
787
759
|
itemClassName
|
|
788
760
|
} = props;
|
|
789
|
-
const itemLabelClassNames = clsx(
|
|
790
|
-
classes$6.label,
|
|
791
|
-
formatClassNames(shmSemanticClassNames.menuItemLabel),
|
|
792
|
-
formatClassNames(menuSemanticClassNames.itemLabel)
|
|
793
|
-
);
|
|
794
761
|
const isCurrentPage = isCurrentItem(item2, currentItem);
|
|
795
762
|
const { label: label2, link } = item2;
|
|
796
763
|
const hasLink = !isEmptyObject(link);
|
|
@@ -798,9 +765,8 @@ const MenuItemLabel = (props) => {
|
|
|
798
765
|
const labelContainerClassNames = clsx(
|
|
799
766
|
selectors.item,
|
|
800
767
|
classes$6.labelContainer,
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
itemClassName
|
|
768
|
+
itemClassName,
|
|
769
|
+
isCurrentPage && DesignStates.item.selected.className
|
|
804
770
|
);
|
|
805
771
|
const isInteractive = (hasSubItems || hasLink) && !isCurrentPage;
|
|
806
772
|
const isDropdownIconOpen = isOpen && dropdownAnimationState.phase !== AnimationPhase.ExitActive;
|
|
@@ -827,7 +793,7 @@ const MenuItemLabel = (props) => {
|
|
|
827
793
|
...isCurrentPage && {
|
|
828
794
|
"aria-current": "page"
|
|
829
795
|
},
|
|
830
|
-
children: /* @__PURE__ */ jsx("div", { className:
|
|
796
|
+
children: /* @__PURE__ */ jsx("div", { className: classes$6.label, "data-part": MenuParts.Label, children: label2 })
|
|
831
797
|
}
|
|
832
798
|
),
|
|
833
799
|
hasDropdownMenu && ["default", "srOnly"].map((variant) => {
|
|
@@ -1237,9 +1203,8 @@ const list = "list__HKOkk";
|
|
|
1237
1203
|
const subList = "subList__uWPaR";
|
|
1238
1204
|
const listItem = "listItem__nFgdQ";
|
|
1239
1205
|
const item = "item__nS3PO";
|
|
1240
|
-
const selected = "selected__YFkZs";
|
|
1241
|
-
const itemLabel = "itemLabel__d2L8o";
|
|
1242
1206
|
const subItem = "subItem__3ieV0";
|
|
1207
|
+
const itemLabel = "itemLabel__d2L8o";
|
|
1243
1208
|
const subItemLabel = "subItemLabel__v6zMr";
|
|
1244
1209
|
const styles = {
|
|
1245
1210
|
root: root$3,
|
|
@@ -1247,9 +1212,8 @@ const styles = {
|
|
|
1247
1212
|
subList,
|
|
1248
1213
|
listItem,
|
|
1249
1214
|
item,
|
|
1250
|
-
selected,
|
|
1251
|
-
itemLabel,
|
|
1252
1215
|
subItem,
|
|
1216
|
+
itemLabel,
|
|
1253
1217
|
subItemLabel
|
|
1254
1218
|
};
|
|
1255
1219
|
const TestIds = {
|
|
@@ -1266,7 +1230,6 @@ const ItemList = ({
|
|
|
1266
1230
|
isRootLevel = true,
|
|
1267
1231
|
partToPreviewStateMap,
|
|
1268
1232
|
onEscKeyDown,
|
|
1269
|
-
customClassNames = [],
|
|
1270
1233
|
onItemClick,
|
|
1271
1234
|
onItemMouseIn,
|
|
1272
1235
|
onItemMouseOut,
|
|
@@ -1276,28 +1239,24 @@ const ItemList = ({
|
|
|
1276
1239
|
}) => {
|
|
1277
1240
|
const subMenuContainerClasses = clsx(
|
|
1278
1241
|
isRootLevel ? styles.list : styles.subList,
|
|
1279
|
-
classes$6.dropdownMenu
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1242
|
+
classes$6.dropdownMenu
|
|
1243
|
+
);
|
|
1244
|
+
const submenuItemLinkClasses = (isCurrent) => clsx(
|
|
1245
|
+
isRootLevel ? [
|
|
1246
|
+
styles.item,
|
|
1247
|
+
selectors.dropdownItem,
|
|
1248
|
+
dropdownItemClassName,
|
|
1249
|
+
isCurrent && DesignStates.dropdownItem.selected.className
|
|
1250
|
+
] : [
|
|
1251
|
+
styles.subItem,
|
|
1252
|
+
selectors.dropdownSubItem,
|
|
1253
|
+
dropdownSubItemClassName,
|
|
1254
|
+
isCurrent && DesignStates.dropdownSubItem.selected.className
|
|
1255
|
+
],
|
|
1256
|
+
INNER_FOCUS_RING_CLASSNAME
|
|
1283
1257
|
);
|
|
1284
|
-
const submenuItemLinkClasses = (isCurrent) => {
|
|
1285
|
-
return clsx(
|
|
1286
|
-
isRootLevel ? [styles.item, selectors.dropdownItem, dropdownItemClassName] : [styles.subItem, selectors.dropdownSubItem, dropdownSubItemClassName],
|
|
1287
|
-
{
|
|
1288
|
-
[styles.selected]: isCurrent
|
|
1289
|
-
},
|
|
1290
|
-
isRootLevel ? {
|
|
1291
|
-
[formatClassNames(dropdownSemanticClassNames.dropdownItem)]: true
|
|
1292
|
-
} : {
|
|
1293
|
-
[formatClassNames(dropdownSemanticClassNames.dropdownSubItem)]: true
|
|
1294
|
-
},
|
|
1295
|
-
INNER_FOCUS_RING_CLASSNAME
|
|
1296
|
-
);
|
|
1297
|
-
};
|
|
1298
1258
|
const submenuItemLabelClasses = clsx(
|
|
1299
|
-
isRootLevel ? styles.itemLabel : styles.subItemLabel
|
|
1300
|
-
isRootLevel ? formatClassNames(dropdownSemanticClassNames.dropdownItemLabel) : formatClassNames(dropdownSemanticClassNames.dropdownSubItemLabel)
|
|
1259
|
+
isRootLevel ? styles.itemLabel : styles.subItemLabel
|
|
1301
1260
|
);
|
|
1302
1261
|
return /* @__PURE__ */ jsx(
|
|
1303
1262
|
"ul",
|
|
@@ -1385,7 +1344,6 @@ const Submenu = (props) => {
|
|
|
1385
1344
|
const {
|
|
1386
1345
|
id,
|
|
1387
1346
|
partToPreviewStateMap,
|
|
1388
|
-
customClassNames = [],
|
|
1389
1347
|
className,
|
|
1390
1348
|
onItemClick,
|
|
1391
1349
|
onItemMouseIn,
|
|
@@ -1409,7 +1367,6 @@ const Submenu = (props) => {
|
|
|
1409
1367
|
items: item2.items || [],
|
|
1410
1368
|
currentItem,
|
|
1411
1369
|
onEscKeyDown,
|
|
1412
|
-
customClassNames,
|
|
1413
1370
|
onItemClick,
|
|
1414
1371
|
onItemMouseIn,
|
|
1415
1372
|
onItemMouseOut,
|
|
@@ -1734,10 +1691,6 @@ const classes$3 = {
|
|
|
1734
1691
|
visible,
|
|
1735
1692
|
hidden
|
|
1736
1693
|
};
|
|
1737
|
-
const iconClasses = clsx(
|
|
1738
|
-
classes$3.icon,
|
|
1739
|
-
formatClassNames(menuSemanticClassNames.scrollButtonIcon)
|
|
1740
|
-
);
|
|
1741
1694
|
const ScrollButton = (props) => {
|
|
1742
1695
|
const {
|
|
1743
1696
|
className: propClassName,
|
|
@@ -1751,7 +1704,6 @@ const ScrollButton = (props) => {
|
|
|
1751
1704
|
classes$3.root,
|
|
1752
1705
|
propClassName,
|
|
1753
1706
|
isHidden ? classes$3.hidden : classes$3.visible,
|
|
1754
|
-
formatClassNames(menuSemanticClassNames.scrollButton),
|
|
1755
1707
|
"scroll-button"
|
|
1756
1708
|
);
|
|
1757
1709
|
return /* @__PURE__ */ jsx(
|
|
@@ -1765,7 +1717,7 @@ const ScrollButton = (props) => {
|
|
|
1765
1717
|
"data-hidden": isHidden,
|
|
1766
1718
|
"data-preview": previewState,
|
|
1767
1719
|
"data-part": dataPart,
|
|
1768
|
-
children: /* @__PURE__ */ jsx("span", { className:
|
|
1720
|
+
children: /* @__PURE__ */ jsx("span", { className: classes$3.icon, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx(
|
|
1769
1721
|
"path",
|
|
1770
1722
|
{
|
|
1771
1723
|
d: direction === "forward" ? "M6 6L.8 0 0 .7 4.7 6 0 11.3l.8.7z" : "M0 6L5.2 0 6 .7 1.3 6 6 11.3 5.2 12z"
|
|
@@ -1839,7 +1791,6 @@ const MenuContent = (props) => {
|
|
|
1839
1791
|
currentUrl,
|
|
1840
1792
|
activeAnchor,
|
|
1841
1793
|
translations,
|
|
1842
|
-
customClassNames = [],
|
|
1843
1794
|
getAnimationPackage,
|
|
1844
1795
|
navAriaLabel,
|
|
1845
1796
|
a11yProps
|
|
@@ -1847,9 +1798,7 @@ const MenuContent = (props) => {
|
|
|
1847
1798
|
const rootClassName = clsx(
|
|
1848
1799
|
classes$4.root,
|
|
1849
1800
|
navbarClassName,
|
|
1850
|
-
!direction && (directionClassName ?? classes$4.rootDirection)
|
|
1851
|
-
formatClassNames(shmSemanticClassNames.root),
|
|
1852
|
-
formatClassNames(menuSemanticClassNames.root, ...customClassNames)
|
|
1801
|
+
!direction && (directionClassName ?? classes$4.rootDirection)
|
|
1853
1802
|
);
|
|
1854
1803
|
const menuContainerRef = React__default.useRef(null);
|
|
1855
1804
|
const lastValidAnchorMenuItemRef = useRef(
|
|
@@ -12,7 +12,6 @@ export type MenuContextValue = {
|
|
|
12
12
|
hamburgerOpenButtonAriaLabel?: string;
|
|
13
13
|
hamburgerCloseButtonAriaLabel?: string;
|
|
14
14
|
};
|
|
15
|
-
customClassNames?: Array<string>;
|
|
16
15
|
navAriaLabel: string;
|
|
17
16
|
menuStyleId?: string;
|
|
18
17
|
getAnimationPackage: () => MenuAnimationNameType;
|
|
@@ -395,44 +395,18 @@
|
|
|
395
395
|
padding-inline-start: var(--dropdown-menu-item-padding-inline-start);
|
|
396
396
|
padding-inline-end: var(--dropdown-menu-item-padding-inline-end);
|
|
397
397
|
}
|
|
398
|
-
.item__nS3PO.
|
|
399
|
-
font: var(--dropdown-menu-item-selected-font, var(--dropdown-menu-item-font));
|
|
400
|
-
color: var(--dropdown-menu-item-selected-color, var(--dropdown-menu-item-color));
|
|
401
|
-
letter-spacing: var(--dropdown-menu-item-selected-letter-spacing, var(--dropdown-menu-item-letter-spacing));
|
|
402
|
-
line-height: var(--dropdown-menu-item-selected-line-height, var(--dropdown-menu-item-line-height));
|
|
398
|
+
.item__nS3PO.menu__dropdown-item--selected {
|
|
403
399
|
text-decoration-line: var(--dropdown-menu-item-selected-text-decoration, var(--dropdown-menu-item-text-decoration));
|
|
404
|
-
text-transform: var(--dropdown-menu-item-selected-text-transform, var(--dropdown-menu-item-text-transform));
|
|
405
|
-
text-shadow: var(--dropdown-menu-item-selected-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-selected-text-shadow, var(--dropdown-menu-item-text-shadow));
|
|
406
|
-
background: var(--dropdown-menu-item-selected-background, var(--dropdown-menu-item-background));
|
|
407
|
-
border-top: var(--dropdown-menu-item-selected-border-top, var(--dropdown-menu-item-border-top));
|
|
408
|
-
border-bottom: var(--dropdown-menu-item-selected-border-bottom, var(--dropdown-menu-item-border-bottom));
|
|
409
|
-
box-shadow: var(--dropdown-menu-item-selected-box-shadow, var(--dropdown-menu-item-box-shadow));
|
|
410
|
-
}
|
|
411
|
-
.item__nS3PO.selected__YFkZs .itemLabel__d2L8o, .item__nS3PO[data-preview=selected] .itemLabel__d2L8o, .item__nS3PO.menu__dropdown-item--selected .itemLabel__d2L8o {
|
|
412
|
-
background-color: var(--dropdown-menu-item-selected-text-highlight, var(--dropdown-menu-item-text-highlight));
|
|
413
|
-
}
|
|
414
|
-
.item__nS3PO:hover, .item__nS3PO.hover__Uh49s, .item__nS3PO[data-preview=hover], .item__nS3PO.menu__dropdown-item--hover {
|
|
415
|
-
font: var(--dropdown-menu-item-hover-font, var(--dropdown-menu-item-font));
|
|
416
|
-
color: var(--dropdown-menu-item-hover-color, var(--dropdown-menu-item-color));
|
|
417
|
-
letter-spacing: var(--dropdown-menu-item-hover-letter-spacing, var(--dropdown-menu-item-letter-spacing));
|
|
418
|
-
line-height: var(--dropdown-menu-item-hover-line-height, var(--dropdown-menu-item-line-height));
|
|
419
|
-
text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
|
|
420
|
-
text-transform: var(--dropdown-menu-item-hover-text-transform, var(--dropdown-menu-item-text-transform));
|
|
421
|
-
text-shadow: var(--dropdown-menu-item-hover-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-hover-text-shadow, var(--dropdown-menu-item-text-shadow));
|
|
422
|
-
background: var(--dropdown-menu-item-hover-background, var(--dropdown-menu-item-background));
|
|
423
|
-
border-top: var(--dropdown-menu-item-hover-border-top, var(--dropdown-menu-item-border-top));
|
|
424
|
-
border-bottom: var(--dropdown-menu-item-hover-border-bottom, var(--dropdown-menu-item-border-bottom));
|
|
425
|
-
box-shadow: var(--dropdown-menu-item-hover-box-shadow, var(--dropdown-menu-item-box-shadow));
|
|
426
400
|
}
|
|
427
|
-
.item__nS3PO:hover
|
|
428
|
-
|
|
401
|
+
.item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
|
|
402
|
+
text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
|
|
429
403
|
}
|
|
430
404
|
@media (forced-colors: active) {
|
|
431
405
|
.item__nS3PO {
|
|
432
406
|
outline: 2px solid ButtonText;
|
|
433
407
|
outline-offset: 0px;
|
|
434
408
|
}
|
|
435
|
-
.item__nS3PO.
|
|
409
|
+
.item__nS3PO.menu__dropdown-item--selected, .item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
|
|
436
410
|
outline: 3px solid Highlight;
|
|
437
411
|
outline-offset: -2px;
|
|
438
412
|
}
|
|
@@ -448,44 +422,18 @@
|
|
|
448
422
|
display: block;
|
|
449
423
|
text-align: var(--dropdown-menu-item-align);
|
|
450
424
|
}
|
|
451
|
-
.subItem__3ieV0.
|
|
452
|
-
font: var(--sub-item-selected-font, var(--sub-item-font));
|
|
453
|
-
color: var(--sub-item-selected-color, var(--sub-item-color));
|
|
454
|
-
letter-spacing: var(--sub-item-selected-letter-spacing, var(--sub-item-letter-spacing));
|
|
455
|
-
line-height: var(--sub-item-selected-line-height, var(--sub-item-line-height));
|
|
425
|
+
.subItem__3ieV0.menu__dropdown-sub-item--selected {
|
|
456
426
|
text-decoration-line: var(--sub-item-selected-text-decoration, var(--sub-item-text-decoration));
|
|
457
|
-
text-transform: var(--sub-item-selected-text-transform, var(--sub-item-text-transform));
|
|
458
|
-
text-shadow: var(--sub-item-selected-text-outline, var(--sub-item-text-outline)), var(--sub-item-selected-text-shadow, var(--sub-item-text-shadow));
|
|
459
|
-
background: var(--sub-item-selected-background, var(--sub-item-background));
|
|
460
|
-
border-top: var(--sub-item-selected-border-top, var(--sub-item-border-top));
|
|
461
|
-
border-bottom: var(--sub-item-selected-border-bottom, var(--sub-item-border-bottom));
|
|
462
|
-
box-shadow: var(--sub-item-selected-box-shadow, var(--sub-item-box-shadow));
|
|
463
|
-
}
|
|
464
|
-
.subItem__3ieV0.selected__YFkZs .subItemLabel__v6zMr, .subItem__3ieV0[data-preview=selected] .subItemLabel__v6zMr, .subItem__3ieV0.menu__dropdown-sub-item--selected .subItemLabel__v6zMr {
|
|
465
|
-
background-color: var(--sub-item-selected-text-highlight, var(--sub-item-text-highlight));
|
|
466
|
-
}
|
|
467
|
-
.subItem__3ieV0:hover, .subItem__3ieV0.hover__Uh49s, .subItem__3ieV0[data-preview=hover], .subItem__3ieV0.menu__dropdown-sub-item--hover {
|
|
468
|
-
font: var(--sub-item-hover-font, var(--sub-item-font));
|
|
469
|
-
color: var(--sub-item-hover-color, var(--sub-item-color));
|
|
470
|
-
letter-spacing: var(--sub-item-hover-letter-spacing, var(--sub-item-letter-spacing));
|
|
471
|
-
line-height: var(--sub-item-hover-line-height, var(--sub-item-line-height));
|
|
472
|
-
text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
|
|
473
|
-
text-transform: var(--sub-item-hover-text-transform, var(--sub-item-text-transform));
|
|
474
|
-
text-shadow: var(--sub-item-hover-text-outline, var(--sub-item-text-outline)), var(--sub-item-hover-text-shadow, var(--sub-item-text-shadow));
|
|
475
|
-
background: var(--sub-item-hover-background, var(--sub-item-background));
|
|
476
|
-
border-top: var(--sub-item-hover-border-top, var(--sub-item-border-top));
|
|
477
|
-
border-bottom: var(--sub-item-hover-border-bottom, var(--sub-item-border-bottom));
|
|
478
|
-
box-shadow: var(--sub-item-hover-box-shadow, var(--sub-item-box-shadow));
|
|
479
427
|
}
|
|
480
|
-
.subItem__3ieV0:hover
|
|
481
|
-
|
|
428
|
+
.subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
|
|
429
|
+
text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
|
|
482
430
|
}
|
|
483
431
|
@media (forced-colors: active) {
|
|
484
432
|
.subItem__3ieV0 {
|
|
485
433
|
outline: 2px solid ButtonText;
|
|
486
434
|
outline-offset: 0px;
|
|
487
435
|
}
|
|
488
|
-
.subItem__3ieV0.
|
|
436
|
+
.subItem__3ieV0.menu__dropdown-sub-item--selected, .subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
|
|
489
437
|
outline: 3px solid Highlight;
|
|
490
438
|
outline-offset: -2px;
|
|
491
439
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
|
|
2
|
-
import {
|
|
2
|
+
import { c as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants27.js";
|
|
3
3
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
4
4
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
5
5
|
import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
|
|
@@ -411,9 +411,9 @@ export {
|
|
|
411
411
|
VerticalDropdownDisplay as V,
|
|
412
412
|
MenuOrientation as a,
|
|
413
413
|
MenuParts as b,
|
|
414
|
-
|
|
414
|
+
DesignStates as c,
|
|
415
415
|
defaultTranslations as d,
|
|
416
|
-
|
|
416
|
+
ARIA_LABEL_NAMESPACE as e,
|
|
417
417
|
DisplayNames as f,
|
|
418
418
|
DropdownAnchorPositions as g,
|
|
419
419
|
DropdownAppliedStyleProperties as h,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2482.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -197,5 +197,5 @@
|
|
|
197
197
|
"registry": "https://registry.npmjs.org/",
|
|
198
198
|
"access": "public"
|
|
199
199
|
},
|
|
200
|
-
"falconPackageHash": "
|
|
200
|
+
"falconPackageHash": "b747799e602beb519b1cf73c00ce222b5a928999eb3f20f857f9e21b"
|
|
201
201
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare const menuSemanticClassNames: {
|
|
2
|
-
readonly root: "menu";
|
|
3
|
-
readonly item: "menu__item";
|
|
4
|
-
readonly itemLabel: "menu__item-label";
|
|
5
|
-
readonly scrollButton: "menu__scroll-button";
|
|
6
|
-
readonly scrollButtonIcon: "menu__scroll-button-icon";
|
|
7
|
-
readonly itemIcon: "menu__item-icon";
|
|
8
|
-
};
|
|
9
|
-
export declare const shmSemanticClassNames: {
|
|
10
|
-
readonly root: "horizontal-menu";
|
|
11
|
-
readonly menuItemWrapper: "horizontal-menu__item";
|
|
12
|
-
readonly menuItemLabel: "horizontal-menu__item-label";
|
|
13
|
-
};
|
|
14
|
-
export declare const dropdownSemanticClassNames: {
|
|
15
|
-
readonly root: "dropdown-menu";
|
|
16
|
-
readonly dropdownItem: "dropdown-menu__item";
|
|
17
|
-
readonly dropdownItemLabel: "dropdown-menu__item-label";
|
|
18
|
-
readonly dropdownSubItem: "dropdown-menu__subitem";
|
|
19
|
-
readonly dropdownSubItemLabel: "dropdown-menu__subitem-label";
|
|
20
|
-
};
|