@xsolla/xui-context-menu 0.135.0 → 0.137.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/package.json +8 -8
- package/web/index.js +151 -73
- package/web/index.js.map +1 -1
- package/web/index.mjs +99 -21
- package/web/index.mjs.map +1 -1
package/web/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/ContextMenu.tsx
|
|
2
|
-
import
|
|
2
|
+
import React8, {
|
|
3
3
|
forwardRef as forwardRef8,
|
|
4
4
|
useState,
|
|
5
5
|
useRef as useRef5,
|
|
@@ -9,10 +9,82 @@ import React7, {
|
|
|
9
9
|
} from "react";
|
|
10
10
|
|
|
11
11
|
// ../primitives-web/src/Box.tsx
|
|
12
|
-
import
|
|
12
|
+
import React2 from "react";
|
|
13
13
|
import styled from "styled-components";
|
|
14
|
+
|
|
15
|
+
// ../primitives-web/src/filterDOMProps.ts
|
|
16
|
+
import React from "react";
|
|
17
|
+
|
|
18
|
+
// ../../node_modules/@emotion/memoize/dist/memoize.esm.js
|
|
19
|
+
function memoize(fn) {
|
|
20
|
+
var cache = {};
|
|
21
|
+
return function(arg) {
|
|
22
|
+
if (cache[arg] === void 0) cache[arg] = fn(arg);
|
|
23
|
+
return cache[arg];
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
var memoize_esm_default = memoize;
|
|
27
|
+
|
|
28
|
+
// ../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
|
|
29
|
+
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
|
|
30
|
+
var index = memoize_esm_default(
|
|
31
|
+
function(prop) {
|
|
32
|
+
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
|
|
33
|
+
}
|
|
34
|
+
/* Z+1 */
|
|
35
|
+
);
|
|
36
|
+
var is_prop_valid_esm_default = index;
|
|
37
|
+
|
|
38
|
+
// ../primitives-web/src/filterDOMProps.ts
|
|
39
|
+
var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
|
|
40
|
+
// RN-only event handlers (pass isPropValid's on* pattern)
|
|
41
|
+
"onPress",
|
|
42
|
+
"onChangeText",
|
|
43
|
+
"onLayout",
|
|
44
|
+
"onMoveShouldSetResponder",
|
|
45
|
+
"onResponderGrant",
|
|
46
|
+
"onResponderMove",
|
|
47
|
+
"onResponderRelease",
|
|
48
|
+
"onResponderTerminate",
|
|
49
|
+
// SVG attributes that pass isPropValid
|
|
50
|
+
"strokeWidth",
|
|
51
|
+
// CSS properties that pass isPropValid but are used as component props
|
|
52
|
+
"overflow",
|
|
53
|
+
"cursor",
|
|
54
|
+
"fontSize",
|
|
55
|
+
"fontWeight",
|
|
56
|
+
"fontFamily",
|
|
57
|
+
"textDecoration"
|
|
58
|
+
]);
|
|
59
|
+
function shouldForwardProp(key) {
|
|
60
|
+
if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
|
|
61
|
+
return is_prop_valid_esm_default(key);
|
|
62
|
+
}
|
|
63
|
+
function createFilteredElement(defaultTag) {
|
|
64
|
+
const Component = React.forwardRef(
|
|
65
|
+
({ children, elementType, ...props }, ref) => {
|
|
66
|
+
const Tag = elementType || defaultTag;
|
|
67
|
+
const htmlProps = {};
|
|
68
|
+
for (const key of Object.keys(props)) {
|
|
69
|
+
if (shouldForwardProp(key)) {
|
|
70
|
+
htmlProps[key] = props[key];
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return React.createElement(
|
|
74
|
+
Tag,
|
|
75
|
+
{ ref, ...htmlProps },
|
|
76
|
+
children
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
Component.displayName = `Filtered(${defaultTag})`;
|
|
81
|
+
return Component;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// ../primitives-web/src/Box.tsx
|
|
14
85
|
import { jsx } from "react/jsx-runtime";
|
|
15
|
-
var
|
|
86
|
+
var FilteredDiv = createFilteredElement("div");
|
|
87
|
+
var StyledBox = styled(FilteredDiv)`
|
|
16
88
|
display: flex;
|
|
17
89
|
box-sizing: border-box;
|
|
18
90
|
background-color: ${(props) => props.backgroundColor || "transparent"};
|
|
@@ -99,7 +171,7 @@ var StyledBox = styled.div`
|
|
|
99
171
|
${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
|
|
100
172
|
}
|
|
101
173
|
`;
|
|
102
|
-
var Box =
|
|
174
|
+
var Box = React2.forwardRef(
|
|
103
175
|
({
|
|
104
176
|
children,
|
|
105
177
|
onPress,
|
|
@@ -124,6 +196,8 @@ var Box = React.forwardRef(
|
|
|
124
196
|
type,
|
|
125
197
|
disabled,
|
|
126
198
|
id,
|
|
199
|
+
testID,
|
|
200
|
+
"data-testid": dataTestId,
|
|
127
201
|
...props
|
|
128
202
|
}, ref) => {
|
|
129
203
|
if (as === "img" && src) {
|
|
@@ -151,7 +225,7 @@ var Box = React.forwardRef(
|
|
|
151
225
|
StyledBox,
|
|
152
226
|
{
|
|
153
227
|
ref,
|
|
154
|
-
as,
|
|
228
|
+
elementType: as,
|
|
155
229
|
id,
|
|
156
230
|
type: as === "button" ? type || "button" : void 0,
|
|
157
231
|
disabled: as === "button" ? disabled : void 0,
|
|
@@ -171,6 +245,7 @@ var Box = React.forwardRef(
|
|
|
171
245
|
"aria-controls": ariaControls,
|
|
172
246
|
"aria-live": ariaLive,
|
|
173
247
|
tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
|
|
248
|
+
"data-testid": dataTestId || testID,
|
|
174
249
|
...props,
|
|
175
250
|
children
|
|
176
251
|
}
|
|
@@ -182,7 +257,8 @@ Box.displayName = "Box";
|
|
|
182
257
|
// ../primitives-web/src/Text.tsx
|
|
183
258
|
import styled2 from "styled-components";
|
|
184
259
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
185
|
-
var
|
|
260
|
+
var FilteredSpan = createFilteredElement("span");
|
|
261
|
+
var StyledText = styled2(FilteredSpan)`
|
|
186
262
|
color: ${(props) => props.color || "inherit"};
|
|
187
263
|
font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
|
|
188
264
|
font-weight: ${(props) => props.fontWeight || "normal"};
|
|
@@ -215,7 +291,8 @@ var Text = ({
|
|
|
215
291
|
// ../primitives-web/src/Icon.tsx
|
|
216
292
|
import styled3 from "styled-components";
|
|
217
293
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
218
|
-
var
|
|
294
|
+
var FilteredDiv2 = createFilteredElement("div");
|
|
295
|
+
var StyledIcon = styled3(FilteredDiv2)`
|
|
219
296
|
display: flex;
|
|
220
297
|
align-items: center;
|
|
221
298
|
justify-content: center;
|
|
@@ -238,7 +315,8 @@ var Icon = ({ children, ...props }) => {
|
|
|
238
315
|
import { forwardRef } from "react";
|
|
239
316
|
import styled4 from "styled-components";
|
|
240
317
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
241
|
-
var
|
|
318
|
+
var FilteredInput = createFilteredElement("input");
|
|
319
|
+
var StyledInput = styled4(FilteredInput)`
|
|
242
320
|
background: transparent;
|
|
243
321
|
border: none;
|
|
244
322
|
outline: none;
|
|
@@ -1029,7 +1107,7 @@ var ContextMenuSeparator = ({
|
|
|
1029
1107
|
ContextMenuSeparator.displayName = "ContextMenuSeparator";
|
|
1030
1108
|
|
|
1031
1109
|
// src/ContextMenuSearch.tsx
|
|
1032
|
-
import
|
|
1110
|
+
import React7, { forwardRef as forwardRef7, useRef as useRef4, useEffect as useEffect4 } from "react";
|
|
1033
1111
|
import { useResolvedTheme as useResolvedTheme6 } from "@xsolla/xui-core";
|
|
1034
1112
|
|
|
1035
1113
|
// ../icons-base/dist/web/index.mjs
|
|
@@ -1488,7 +1566,7 @@ var ContextMenuSearch = forwardRef7(
|
|
|
1488
1566
|
const sizeStyles = theme.sizing.contextMenu(size);
|
|
1489
1567
|
const inputRef = useRef4(null);
|
|
1490
1568
|
const inputColors = theme.colors.control.input;
|
|
1491
|
-
|
|
1569
|
+
React7.useImperativeHandle(
|
|
1492
1570
|
ref,
|
|
1493
1571
|
() => inputRef.current,
|
|
1494
1572
|
[]
|
|
@@ -1640,17 +1718,17 @@ var ContextMenuRoot = forwardRef8(
|
|
|
1640
1718
|
}
|
|
1641
1719
|
}, [isOpen]);
|
|
1642
1720
|
const registerItem = useCallback((id) => {
|
|
1643
|
-
const
|
|
1644
|
-
if (
|
|
1721
|
+
const index2 = itemsRef.current.indexOf(id);
|
|
1722
|
+
if (index2 === -1) {
|
|
1645
1723
|
itemsRef.current.push(id);
|
|
1646
1724
|
return itemsRef.current.length - 1;
|
|
1647
1725
|
}
|
|
1648
|
-
return
|
|
1726
|
+
return index2;
|
|
1649
1727
|
}, []);
|
|
1650
1728
|
const unregisterItem = useCallback((id) => {
|
|
1651
|
-
const
|
|
1652
|
-
if (
|
|
1653
|
-
itemsRef.current.splice(
|
|
1729
|
+
const index2 = itemsRef.current.indexOf(id);
|
|
1730
|
+
if (index2 !== -1) {
|
|
1731
|
+
itemsRef.current.splice(index2, 1);
|
|
1654
1732
|
}
|
|
1655
1733
|
}, []);
|
|
1656
1734
|
const onItemSelect = useCallback(
|
|
@@ -1729,12 +1807,12 @@ var ContextMenuRoot = forwardRef8(
|
|
|
1729
1807
|
};
|
|
1730
1808
|
};
|
|
1731
1809
|
const renderItems = (itemsData) => {
|
|
1732
|
-
return itemsData.map((item,
|
|
1733
|
-
const itemKey = item.id ||
|
|
1810
|
+
return itemsData.map((item, index2) => {
|
|
1811
|
+
const itemKey = item.id || index2;
|
|
1734
1812
|
const commonProps = {
|
|
1735
1813
|
disabled: item.disabled,
|
|
1736
1814
|
description: item.description,
|
|
1737
|
-
"data-testid": `context-menu-item-${item.id ||
|
|
1815
|
+
"data-testid": `context-menu-item-${item.id || index2}`
|
|
1738
1816
|
};
|
|
1739
1817
|
if (item.variant === "checkbox") {
|
|
1740
1818
|
return /* @__PURE__ */ jsx389(
|
|
@@ -1771,7 +1849,7 @@ var ContextMenuRoot = forwardRef8(
|
|
|
1771
1849
|
trailing: item.trailing?.type !== "shortcut" && item.trailing?.type !== "none" ? item.trailing?.content : void 0,
|
|
1772
1850
|
hasSubmenu: item.children && item.children.length > 0,
|
|
1773
1851
|
onPress: item.onPress,
|
|
1774
|
-
active: activeIndex ===
|
|
1852
|
+
active: activeIndex === index2,
|
|
1775
1853
|
children: item.label
|
|
1776
1854
|
},
|
|
1777
1855
|
itemKey
|
|
@@ -1779,7 +1857,7 @@ var ContextMenuRoot = forwardRef8(
|
|
|
1779
1857
|
});
|
|
1780
1858
|
};
|
|
1781
1859
|
const renderGroups = (groupsData) => {
|
|
1782
|
-
return groupsData.map((group, groupIndex) => /* @__PURE__ */ jsxs6(
|
|
1860
|
+
return groupsData.map((group, groupIndex) => /* @__PURE__ */ jsxs6(React8.Fragment, { children: [
|
|
1783
1861
|
groupIndex > 0 && /* @__PURE__ */ jsx389(ContextMenuSeparator, {}),
|
|
1784
1862
|
/* @__PURE__ */ jsx389(
|
|
1785
1863
|
ContextMenuGroup,
|