@wix/editor-react-components 1.2507.0 → 1.2508.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/Tabs/Tabs.d.ts +3 -0
- package/dist/site/components/Tabs/component.js +2 -0
- package/dist/site/components/Tabs/constants.d.ts +8 -0
- package/dist/site/components/Tabs/css.css +2 -2
- package/dist/site/components/Tabs/manifest.js +110 -3
- package/dist/site/components/Tabs/manifestConfigs/menuItemConfig.d.ts +2 -0
- package/dist/site/components/chunks/constants19.js +36 -0
- package/package.json +2 -2
|
@@ -3,6 +3,9 @@ import { Direction } from '@wix/editor-react-types';
|
|
|
3
3
|
import { TransitionType, TransitionDirection } from './constants';
|
|
4
4
|
import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
|
|
5
5
|
export type TabsElementProps = {
|
|
6
|
+
menuItem?: {
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
6
9
|
tabContent?: {
|
|
7
10
|
className?: string;
|
|
8
11
|
};
|
|
@@ -450,6 +450,7 @@ const Tabs = (props) => {
|
|
|
450
450
|
role: "tablist",
|
|
451
451
|
ref: menuItemsRef,
|
|
452
452
|
children: tabs2 == null ? void 0 : tabs2.map((tab, index) => {
|
|
453
|
+
var _a2;
|
|
453
454
|
const { tabId, panelId } = a11yIds[index];
|
|
454
455
|
const isActive2 = index === currentTab;
|
|
455
456
|
return /* @__PURE__ */ jsx(
|
|
@@ -465,6 +466,7 @@ const Tabs = (props) => {
|
|
|
465
466
|
styles$1["menu-item"],
|
|
466
467
|
classes.menuItem,
|
|
467
468
|
HAS_CUSTOM_FOCUS_CLASSNAME,
|
|
469
|
+
(_a2 = elementProps == null ? void 0 : elementProps.menuItem) == null ? void 0 : _a2.className,
|
|
468
470
|
{
|
|
469
471
|
[styles$1["is-active"]]: isActive2
|
|
470
472
|
}
|
|
@@ -25,4 +25,12 @@ export declare const DesignStates: {
|
|
|
25
25
|
readonly className: "tabs--disabled";
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
|
+
readonly menuItem: {
|
|
29
|
+
readonly hover: {
|
|
30
|
+
readonly displayName: "Hover";
|
|
31
|
+
readonly className: "tabs__item--hover";
|
|
32
|
+
};
|
|
33
|
+
};
|
|
28
34
|
};
|
|
35
|
+
export declare const ROOT_MENU_ITEM_CUSTOM_PROPERTIES: readonly ["menu-item-background", "menu-item-box-shadow", "menu-item-color", "menu-item-text-decoration-line", "menu-item-letter-spacing", "menu-item-text-shadow", "menu-item-text-align", "menu-item-flex", "menu-item-border-width-top", "menu-item-border-width-bottom", "menu-item-border-width-inline-start", "menu-item-border-width-inline-end", "menu-item-border-style-top", "menu-item-border-style-bottom", "menu-item-border-style-inline-start", "menu-item-border-style-inline-end", "menu-item-border-color-top", "menu-item-border-color-bottom", "menu-item-border-color-inline-start", "menu-item-border-color-inline-end", "menu-item-border-radius-start-start", "menu-item-border-radius-start-end", "menu-item-border-radius-end-start", "menu-item-border-radius-end-end", "menu-item-padding-top", "menu-item-padding-bottom", "menu-item-padding-inline-start", "menu-item-padding-inline-end"];
|
|
36
|
+
export declare const ROOT_MENU_ITEM_CSS_PROPERTIES: readonly ["font"];
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
outline: 2px solid #116dff;
|
|
108
108
|
outline-offset: -2px;
|
|
109
109
|
}
|
|
110
|
-
.menu-item__BJ1CW:hover {
|
|
110
|
+
.menu-item__BJ1CW:hover, .menu-item__BJ1CW.tabs__item--hover {
|
|
111
111
|
text-decoration: underline;
|
|
112
112
|
}
|
|
113
113
|
.menu-item__BJ1CW.is-active__tEw9F {
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
outline: 2px solid ButtonText;
|
|
119
119
|
outline-offset: 0px;
|
|
120
120
|
}
|
|
121
|
-
.menu-item__BJ1CW:hover, .menu-item__BJ1CW.is-active__tEw9F {
|
|
121
|
+
.menu-item__BJ1CW:hover, .menu-item__BJ1CW.tabs__item--hover, .menu-item__BJ1CW.is-active__tEw9F {
|
|
122
122
|
outline: 3px solid Highlight;
|
|
123
123
|
outline-offset: -2px;
|
|
124
124
|
}
|
|
@@ -1,8 +1,108 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { D as DesignStates, c as classes } from "../chunks/constants19.js";
|
|
3
|
-
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
|
|
1
|
+
import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
|
|
2
|
+
import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants19.js";
|
|
4
3
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
5
4
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
5
|
+
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
|
|
6
|
+
const menuItemConfig = {
|
|
7
|
+
elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
|
|
8
|
+
[ELEMENTS.ELEMENT_TYPE.inlineElement]: {
|
|
9
|
+
selector: `.${classes.menuItem}`,
|
|
10
|
+
displayName: "Tab item",
|
|
11
|
+
behaviors: {
|
|
12
|
+
selectable: false,
|
|
13
|
+
removable: false
|
|
14
|
+
},
|
|
15
|
+
cssProperties: {
|
|
16
|
+
font: {},
|
|
17
|
+
background: {
|
|
18
|
+
displayName: "Tab item color",
|
|
19
|
+
defaultValue: "transparent"
|
|
20
|
+
},
|
|
21
|
+
boxShadow: {
|
|
22
|
+
displayName: "Tab item shadow",
|
|
23
|
+
defaultValue: "none"
|
|
24
|
+
},
|
|
25
|
+
color: {
|
|
26
|
+
displayName: "Text color",
|
|
27
|
+
defaultValue: "#000000"
|
|
28
|
+
},
|
|
29
|
+
textDecorationLine: {
|
|
30
|
+
displayName: "Text decoration",
|
|
31
|
+
defaultValue: "none",
|
|
32
|
+
statesDefaultValues: { hover: "underline" }
|
|
33
|
+
},
|
|
34
|
+
letterSpacing: {
|
|
35
|
+
displayName: "Letter spacing",
|
|
36
|
+
defaultValue: "0em"
|
|
37
|
+
},
|
|
38
|
+
textShadow: {
|
|
39
|
+
displayName: "Text shadow",
|
|
40
|
+
defaultValue: "none"
|
|
41
|
+
},
|
|
42
|
+
borderTop: {
|
|
43
|
+
defaultValue: "0px solid #000000"
|
|
44
|
+
},
|
|
45
|
+
borderBottom: {
|
|
46
|
+
defaultValue: "0px solid #000000"
|
|
47
|
+
},
|
|
48
|
+
borderInlineStart: {
|
|
49
|
+
defaultValue: "0px solid #000000"
|
|
50
|
+
},
|
|
51
|
+
borderInlineEnd: {
|
|
52
|
+
defaultValue: "0px solid #000000"
|
|
53
|
+
},
|
|
54
|
+
borderStartStartRadius: {
|
|
55
|
+
defaultValue: "0px"
|
|
56
|
+
},
|
|
57
|
+
borderStartEndRadius: {
|
|
58
|
+
defaultValue: "0px"
|
|
59
|
+
},
|
|
60
|
+
borderEndStartRadius: {
|
|
61
|
+
defaultValue: "0px"
|
|
62
|
+
},
|
|
63
|
+
borderEndEndRadius: {
|
|
64
|
+
defaultValue: "0px"
|
|
65
|
+
},
|
|
66
|
+
paddingTop: {
|
|
67
|
+
defaultValue: "0px"
|
|
68
|
+
},
|
|
69
|
+
paddingBottom: {
|
|
70
|
+
defaultValue: "0px"
|
|
71
|
+
},
|
|
72
|
+
paddingInlineStart: {
|
|
73
|
+
defaultValue: "0px"
|
|
74
|
+
},
|
|
75
|
+
paddingInlineEnd: {
|
|
76
|
+
defaultValue: "0px"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
cssCustomProperties: {
|
|
80
|
+
"menu-item-flex": {
|
|
81
|
+
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
|
|
82
|
+
displayName: "Tab item width",
|
|
83
|
+
defaultValue: "0 0 auto",
|
|
84
|
+
customEnum: {
|
|
85
|
+
options: [
|
|
86
|
+
{ value: "0 0 auto", displayName: "Fit to text" },
|
|
87
|
+
{ value: "1 1 0", displayName: "Fill tab container" }
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"menu-item-text-align": {
|
|
92
|
+
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign,
|
|
93
|
+
defaultValue: "center"
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
states: {
|
|
97
|
+
hover: withSpec({
|
|
98
|
+
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
99
|
+
displayName: DesignStates.menuItem.hover.displayName,
|
|
100
|
+
className: DesignStates.menuItem.hover.className,
|
|
101
|
+
pseudoClass: NativeStateType.hover
|
|
102
|
+
})
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
6
106
|
const manifest = {
|
|
7
107
|
id: "dee6ace1-7a56-46d6-90f2-4338879b00b5",
|
|
8
108
|
type: "wixEditorElements.TabsContainer",
|
|
@@ -24,6 +124,12 @@ const manifest = {
|
|
|
24
124
|
displayFilters: {
|
|
25
125
|
elements: {
|
|
26
126
|
hide: ["scrollButton"]
|
|
127
|
+
},
|
|
128
|
+
cssCustomProperties: {
|
|
129
|
+
hide: [...ROOT_MENU_ITEM_CUSTOM_PROPERTIES]
|
|
130
|
+
},
|
|
131
|
+
cssProperties: {
|
|
132
|
+
hide: [...ROOT_MENU_ITEM_CSS_PROPERTIES]
|
|
27
133
|
}
|
|
28
134
|
},
|
|
29
135
|
archetype: Archetype.Tabs,
|
|
@@ -389,6 +495,7 @@ const manifest = {
|
|
|
389
495
|
})
|
|
390
496
|
},
|
|
391
497
|
elements: {
|
|
498
|
+
menuItem: menuItemConfig,
|
|
392
499
|
tabContent: {
|
|
393
500
|
elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
|
|
394
501
|
inlineElement: {
|
|
@@ -15,10 +15,46 @@ const DesignStates = {
|
|
|
15
15
|
root: {
|
|
16
16
|
hover: { displayName: "Hover", className: "tabs--hover" },
|
|
17
17
|
disabled: { displayName: "Disabled", className: "tabs--disabled" }
|
|
18
|
+
},
|
|
19
|
+
menuItem: {
|
|
20
|
+
hover: { displayName: "Hover", className: "tabs__item--hover" }
|
|
18
21
|
}
|
|
19
22
|
};
|
|
23
|
+
const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
|
|
24
|
+
"menu-item-background",
|
|
25
|
+
"menu-item-box-shadow",
|
|
26
|
+
"menu-item-color",
|
|
27
|
+
"menu-item-text-decoration-line",
|
|
28
|
+
"menu-item-letter-spacing",
|
|
29
|
+
"menu-item-text-shadow",
|
|
30
|
+
"menu-item-text-align",
|
|
31
|
+
"menu-item-flex",
|
|
32
|
+
"menu-item-border-width-top",
|
|
33
|
+
"menu-item-border-width-bottom",
|
|
34
|
+
"menu-item-border-width-inline-start",
|
|
35
|
+
"menu-item-border-width-inline-end",
|
|
36
|
+
"menu-item-border-style-top",
|
|
37
|
+
"menu-item-border-style-bottom",
|
|
38
|
+
"menu-item-border-style-inline-start",
|
|
39
|
+
"menu-item-border-style-inline-end",
|
|
40
|
+
"menu-item-border-color-top",
|
|
41
|
+
"menu-item-border-color-bottom",
|
|
42
|
+
"menu-item-border-color-inline-start",
|
|
43
|
+
"menu-item-border-color-inline-end",
|
|
44
|
+
"menu-item-border-radius-start-start",
|
|
45
|
+
"menu-item-border-radius-start-end",
|
|
46
|
+
"menu-item-border-radius-end-start",
|
|
47
|
+
"menu-item-border-radius-end-end",
|
|
48
|
+
"menu-item-padding-top",
|
|
49
|
+
"menu-item-padding-bottom",
|
|
50
|
+
"menu-item-padding-inline-start",
|
|
51
|
+
"menu-item-padding-inline-end"
|
|
52
|
+
];
|
|
53
|
+
const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
|
|
20
54
|
export {
|
|
21
55
|
DesignStates as D,
|
|
22
56
|
OVERFLOW_BEHAVIOR as O,
|
|
57
|
+
ROOT_MENU_ITEM_CSS_PROPERTIES as R,
|
|
58
|
+
ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
|
|
23
59
|
classes as c
|
|
24
60
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2508.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": "ef7ebae097875ccd578cda8d94d4c164dbeff47cfb9807596a12414d"
|
|
201
201
|
}
|