@xsolla/xui-context-menu 0.94.0 → 0.95.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/native/index.js +29 -25
- package/native/index.js.map +1 -1
- package/native/index.mjs +26 -22
- package/native/index.mjs.map +1 -1
- package/package.json +8 -8
- package/web/index.js +29 -25
- package/web/index.js.map +1 -1
- package/web/index.mjs +26 -22
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -1447,6 +1447,10 @@ var import_jsx_runtime389 = require("react/jsx-runtime");
|
|
|
1447
1447
|
var import_jsx_runtime390 = require("react/jsx-runtime");
|
|
1448
1448
|
var import_jsx_runtime391 = require("react/jsx-runtime");
|
|
1449
1449
|
var import_jsx_runtime392 = require("react/jsx-runtime");
|
|
1450
|
+
var import_jsx_runtime393 = require("react/jsx-runtime");
|
|
1451
|
+
var import_jsx_runtime394 = require("react/jsx-runtime");
|
|
1452
|
+
var import_jsx_runtime395 = require("react/jsx-runtime");
|
|
1453
|
+
var import_jsx_runtime396 = require("react/jsx-runtime");
|
|
1450
1454
|
var StyledIcon = import_styled_components.default.div`
|
|
1451
1455
|
display: inline-flex;
|
|
1452
1456
|
align-items: center;
|
|
@@ -1464,15 +1468,15 @@ var BaseIcon = ({
|
|
|
1464
1468
|
variant = "line",
|
|
1465
1469
|
size = 24,
|
|
1466
1470
|
color = "currentColor",
|
|
1467
|
-
solidContent:
|
|
1468
|
-
lineContent:
|
|
1471
|
+
solidContent: solidContent386,
|
|
1472
|
+
lineContent: lineContent386,
|
|
1469
1473
|
className,
|
|
1470
1474
|
style,
|
|
1471
1475
|
"data-testid": testId,
|
|
1472
1476
|
"aria-label": ariaLabel,
|
|
1473
1477
|
"aria-hidden": ariaHidden
|
|
1474
1478
|
}) => {
|
|
1475
|
-
const svgContent = variant === "line" ?
|
|
1479
|
+
const svgContent = variant === "line" ? lineContent386 : solidContent386;
|
|
1476
1480
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
1477
1481
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1478
1482
|
StyledIcon,
|
|
@@ -1489,13 +1493,13 @@ var BaseIcon = ({
|
|
|
1489
1493
|
}
|
|
1490
1494
|
);
|
|
1491
1495
|
};
|
|
1492
|
-
var
|
|
1493
|
-
var
|
|
1494
|
-
var Search = (props) => /* @__PURE__ */ (0,
|
|
1496
|
+
var solidContent372 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
|
|
1497
|
+
var lineContent372 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
|
|
1498
|
+
var Search = (props) => /* @__PURE__ */ (0, import_jsx_runtime383.jsx)(BaseIcon, { ...props, solidContent: solidContent372, lineContent: lineContent372 });
|
|
1495
1499
|
|
|
1496
1500
|
// src/ContextMenuSearch.tsx
|
|
1497
1501
|
var import_xui_divider = require("@xsolla/xui-divider");
|
|
1498
|
-
var
|
|
1502
|
+
var import_jsx_runtime397 = require("react/jsx-runtime");
|
|
1499
1503
|
var ContextMenuSearch = (0, import_react9.forwardRef)(
|
|
1500
1504
|
({
|
|
1501
1505
|
value,
|
|
@@ -1534,7 +1538,7 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
|
|
|
1534
1538
|
context?.closeMenu();
|
|
1535
1539
|
}
|
|
1536
1540
|
};
|
|
1537
|
-
return /* @__PURE__ */ (0,
|
|
1541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
|
|
1538
1542
|
Box,
|
|
1539
1543
|
{
|
|
1540
1544
|
flexDirection: "column",
|
|
@@ -1543,16 +1547,16 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
|
|
|
1543
1547
|
paddingVertical: sizeStyles.searchPaddingVertical,
|
|
1544
1548
|
"data-testid": testId,
|
|
1545
1549
|
children: [
|
|
1546
|
-
/* @__PURE__ */ (0,
|
|
1547
|
-
/* @__PURE__ */ (0,
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
|
|
1551
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1548
1552
|
Icon,
|
|
1549
1553
|
{
|
|
1550
1554
|
size: sizeStyles.searchIconSize,
|
|
1551
1555
|
color: inputColors.placeholder,
|
|
1552
|
-
children: /* @__PURE__ */ (0,
|
|
1556
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(Search, {})
|
|
1553
1557
|
}
|
|
1554
1558
|
),
|
|
1555
|
-
/* @__PURE__ */ (0,
|
|
1559
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1556
1560
|
InputPrimitive,
|
|
1557
1561
|
{
|
|
1558
1562
|
ref: inputRef,
|
|
@@ -1571,7 +1575,7 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
|
|
|
1571
1575
|
}
|
|
1572
1576
|
) })
|
|
1573
1577
|
] }),
|
|
1574
|
-
/* @__PURE__ */ (0,
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsx)(import_xui_divider.Divider, {})
|
|
1575
1579
|
]
|
|
1576
1580
|
}
|
|
1577
1581
|
);
|
|
@@ -1580,7 +1584,7 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
|
|
|
1580
1584
|
ContextMenuSearch.displayName = "ContextMenuSearch";
|
|
1581
1585
|
|
|
1582
1586
|
// src/ContextMenu.tsx
|
|
1583
|
-
var
|
|
1587
|
+
var import_jsx_runtime398 = require("react/jsx-runtime");
|
|
1584
1588
|
var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
1585
1589
|
({
|
|
1586
1590
|
children,
|
|
@@ -1759,7 +1763,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1759
1763
|
"data-testid": `context-menu-item-${item.id || index}`
|
|
1760
1764
|
};
|
|
1761
1765
|
if (item.variant === "checkbox") {
|
|
1762
|
-
return /* @__PURE__ */ (0,
|
|
1766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1763
1767
|
ContextMenuCheckboxItem,
|
|
1764
1768
|
{
|
|
1765
1769
|
...commonProps,
|
|
@@ -1772,7 +1776,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1772
1776
|
);
|
|
1773
1777
|
}
|
|
1774
1778
|
if (item.variant === "radio") {
|
|
1775
|
-
return /* @__PURE__ */ (0,
|
|
1779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1776
1780
|
ContextMenuRadioItem,
|
|
1777
1781
|
{
|
|
1778
1782
|
...commonProps,
|
|
@@ -1783,7 +1787,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1783
1787
|
itemKey
|
|
1784
1788
|
);
|
|
1785
1789
|
}
|
|
1786
|
-
return /* @__PURE__ */ (0,
|
|
1790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1787
1791
|
ContextMenuItem,
|
|
1788
1792
|
{
|
|
1789
1793
|
...commonProps,
|
|
@@ -1801,9 +1805,9 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1801
1805
|
});
|
|
1802
1806
|
};
|
|
1803
1807
|
const renderGroups = (groupsData) => {
|
|
1804
|
-
return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0,
|
|
1805
|
-
groupIndex > 0 && /* @__PURE__ */ (0,
|
|
1806
|
-
/* @__PURE__ */ (0,
|
|
1808
|
+
return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(import_react10.default.Fragment, { children: [
|
|
1809
|
+
groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(ContextMenuSeparator, {}),
|
|
1810
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1807
1811
|
ContextMenuGroup,
|
|
1808
1812
|
{
|
|
1809
1813
|
label: group.label,
|
|
@@ -1817,14 +1821,14 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1817
1821
|
const renderContent = () => {
|
|
1818
1822
|
if (isLoading) {
|
|
1819
1823
|
const brandColor = theme.colors.control.brand.primary.bg;
|
|
1820
|
-
return /* @__PURE__ */ (0,
|
|
1824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1821
1825
|
Box,
|
|
1822
1826
|
{
|
|
1823
1827
|
padding: 16,
|
|
1824
1828
|
alignItems: "center",
|
|
1825
1829
|
justifyContent: "center",
|
|
1826
1830
|
minHeight: 60,
|
|
1827
|
-
children: /* @__PURE__ */ (0,
|
|
1831
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(import_xui_spinner.Spinner, { size: "md", color: brandColor })
|
|
1828
1832
|
}
|
|
1829
1833
|
);
|
|
1830
1834
|
}
|
|
@@ -1839,7 +1843,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1839
1843
|
}
|
|
1840
1844
|
return null;
|
|
1841
1845
|
};
|
|
1842
|
-
return /* @__PURE__ */ (0,
|
|
1846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
|
|
1843
1847
|
"div",
|
|
1844
1848
|
{
|
|
1845
1849
|
ref: containerRef,
|
|
@@ -1850,7 +1854,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1850
1854
|
},
|
|
1851
1855
|
"data-testid": testId,
|
|
1852
1856
|
children: [
|
|
1853
|
-
trigger && /* @__PURE__ */ (0,
|
|
1857
|
+
trigger && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1854
1858
|
"div",
|
|
1855
1859
|
{
|
|
1856
1860
|
onClick: toggleMenu,
|
|
@@ -1859,7 +1863,7 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
|
|
|
1859
1863
|
children: trigger
|
|
1860
1864
|
}
|
|
1861
1865
|
),
|
|
1862
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1866
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1863
1867
|
Box,
|
|
1864
1868
|
{
|
|
1865
1869
|
ref: (node) => {
|