@xsolla/xui-b2b-itemer-group 0.178.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.d.mts +32 -0
- package/native/index.d.ts +32 -0
- package/native/index.js +364 -0
- package/native/index.js.map +1 -0
- package/native/index.mjs +329 -0
- package/native/index.mjs.map +1 -0
- package/package.json +61 -0
- package/web/index.d.mts +32 -0
- package/web/index.d.ts +32 -0
- package/web/index.js +441 -0
- package/web/index.js.map +1 -0
- package/web/index.mjs +402 -0
- package/web/index.mjs.map +1 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ReactNode } from 'react';
|
|
3
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
4
|
+
|
|
5
|
+
interface ItemerGroupProps extends ThemeOverrideProps {
|
|
6
|
+
label?: string | string[];
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
draggable?: boolean;
|
|
9
|
+
onAdd?: () => void;
|
|
10
|
+
addButtonLabel?: string;
|
|
11
|
+
showAddButton?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
testID?: string;
|
|
14
|
+
}
|
|
15
|
+
interface ItemerGroupRowProps {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
onRemove?: () => void;
|
|
18
|
+
onAdd?: () => void;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare const ItemerGroup: React__default.FC<ItemerGroupProps>;
|
|
23
|
+
|
|
24
|
+
declare const ItemerGroupRow: React__default.FC<ItemerGroupRowProps>;
|
|
25
|
+
|
|
26
|
+
interface ItemerGroupContextValue {
|
|
27
|
+
draggable: boolean;
|
|
28
|
+
rowCount: number;
|
|
29
|
+
}
|
|
30
|
+
declare const ItemerGroupContext: React.Context<ItemerGroupContextValue>;
|
|
31
|
+
|
|
32
|
+
export { ItemerGroup, ItemerGroupContext, type ItemerGroupProps, ItemerGroupRow, type ItemerGroupRowProps };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ReactNode } from 'react';
|
|
3
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
4
|
+
|
|
5
|
+
interface ItemerGroupProps extends ThemeOverrideProps {
|
|
6
|
+
label?: string | string[];
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
draggable?: boolean;
|
|
9
|
+
onAdd?: () => void;
|
|
10
|
+
addButtonLabel?: string;
|
|
11
|
+
showAddButton?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
testID?: string;
|
|
14
|
+
}
|
|
15
|
+
interface ItemerGroupRowProps {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
onRemove?: () => void;
|
|
18
|
+
onAdd?: () => void;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare const ItemerGroup: React__default.FC<ItemerGroupProps>;
|
|
23
|
+
|
|
24
|
+
declare const ItemerGroupRow: React__default.FC<ItemerGroupRowProps>;
|
|
25
|
+
|
|
26
|
+
interface ItemerGroupContextValue {
|
|
27
|
+
draggable: boolean;
|
|
28
|
+
rowCount: number;
|
|
29
|
+
}
|
|
30
|
+
declare const ItemerGroupContext: React.Context<ItemerGroupContextValue>;
|
|
31
|
+
|
|
32
|
+
export { ItemerGroup, ItemerGroupContext, type ItemerGroupProps, ItemerGroupRow, type ItemerGroupRowProps };
|
package/native/index.js
ADDED
|
@@ -0,0 +1,364 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.tsx
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
ItemerGroup: () => ItemerGroup,
|
|
34
|
+
ItemerGroupContext: () => ItemerGroupContext,
|
|
35
|
+
ItemerGroupRow: () => ItemerGroupRow
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(index_exports);
|
|
38
|
+
|
|
39
|
+
// src/ItemerGroup.tsx
|
|
40
|
+
var import_react2 = __toESM(require("react"));
|
|
41
|
+
|
|
42
|
+
// ../../foundation/primitives-native/src/Box.tsx
|
|
43
|
+
var import_react_native = require("react-native");
|
|
44
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
45
|
+
var Box = ({
|
|
46
|
+
children,
|
|
47
|
+
onPress,
|
|
48
|
+
onLayout,
|
|
49
|
+
onMoveShouldSetResponder,
|
|
50
|
+
onResponderGrant,
|
|
51
|
+
onResponderMove,
|
|
52
|
+
onResponderRelease,
|
|
53
|
+
onResponderTerminate,
|
|
54
|
+
backgroundColor,
|
|
55
|
+
borderColor,
|
|
56
|
+
borderWidth,
|
|
57
|
+
borderBottomWidth,
|
|
58
|
+
borderBottomColor,
|
|
59
|
+
borderTopWidth,
|
|
60
|
+
borderTopColor,
|
|
61
|
+
borderLeftWidth,
|
|
62
|
+
borderLeftColor,
|
|
63
|
+
borderRightWidth,
|
|
64
|
+
borderRightColor,
|
|
65
|
+
borderRadius,
|
|
66
|
+
borderStyle,
|
|
67
|
+
height,
|
|
68
|
+
padding,
|
|
69
|
+
paddingHorizontal,
|
|
70
|
+
paddingVertical,
|
|
71
|
+
margin,
|
|
72
|
+
marginTop,
|
|
73
|
+
marginBottom,
|
|
74
|
+
marginLeft,
|
|
75
|
+
marginRight,
|
|
76
|
+
flexDirection,
|
|
77
|
+
alignItems,
|
|
78
|
+
justifyContent,
|
|
79
|
+
position,
|
|
80
|
+
top,
|
|
81
|
+
bottom,
|
|
82
|
+
left,
|
|
83
|
+
right,
|
|
84
|
+
width,
|
|
85
|
+
minWidth,
|
|
86
|
+
minHeight,
|
|
87
|
+
maxWidth,
|
|
88
|
+
maxHeight,
|
|
89
|
+
flex,
|
|
90
|
+
overflow,
|
|
91
|
+
zIndex,
|
|
92
|
+
hoverStyle,
|
|
93
|
+
pressStyle,
|
|
94
|
+
style,
|
|
95
|
+
"data-testid": dataTestId,
|
|
96
|
+
testID,
|
|
97
|
+
as,
|
|
98
|
+
src,
|
|
99
|
+
alt,
|
|
100
|
+
...rest
|
|
101
|
+
}) => {
|
|
102
|
+
const getContainerStyle = (pressed) => ({
|
|
103
|
+
backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
|
|
104
|
+
borderColor,
|
|
105
|
+
borderWidth,
|
|
106
|
+
borderBottomWidth,
|
|
107
|
+
borderBottomColor,
|
|
108
|
+
borderTopWidth,
|
|
109
|
+
borderTopColor,
|
|
110
|
+
borderLeftWidth,
|
|
111
|
+
borderLeftColor,
|
|
112
|
+
borderRightWidth,
|
|
113
|
+
borderRightColor,
|
|
114
|
+
borderRadius,
|
|
115
|
+
borderStyle,
|
|
116
|
+
overflow,
|
|
117
|
+
zIndex,
|
|
118
|
+
height,
|
|
119
|
+
width,
|
|
120
|
+
minWidth,
|
|
121
|
+
minHeight,
|
|
122
|
+
maxWidth,
|
|
123
|
+
maxHeight,
|
|
124
|
+
padding,
|
|
125
|
+
paddingHorizontal,
|
|
126
|
+
paddingVertical,
|
|
127
|
+
margin,
|
|
128
|
+
marginTop,
|
|
129
|
+
marginBottom,
|
|
130
|
+
marginLeft,
|
|
131
|
+
marginRight,
|
|
132
|
+
flexDirection,
|
|
133
|
+
alignItems,
|
|
134
|
+
justifyContent,
|
|
135
|
+
position,
|
|
136
|
+
top,
|
|
137
|
+
bottom,
|
|
138
|
+
left,
|
|
139
|
+
right,
|
|
140
|
+
flex,
|
|
141
|
+
...style
|
|
142
|
+
});
|
|
143
|
+
const finalTestID = dataTestId || testID;
|
|
144
|
+
const {
|
|
145
|
+
role,
|
|
146
|
+
tabIndex,
|
|
147
|
+
onKeyDown,
|
|
148
|
+
onKeyUp,
|
|
149
|
+
"aria-label": _ariaLabel,
|
|
150
|
+
"aria-labelledby": _ariaLabelledBy,
|
|
151
|
+
"aria-current": _ariaCurrent,
|
|
152
|
+
"aria-disabled": _ariaDisabled,
|
|
153
|
+
"aria-live": _ariaLive,
|
|
154
|
+
className,
|
|
155
|
+
"data-testid": _dataTestId,
|
|
156
|
+
...nativeRest
|
|
157
|
+
} = rest;
|
|
158
|
+
if (as === "img" && src) {
|
|
159
|
+
const imageStyle = {
|
|
160
|
+
width,
|
|
161
|
+
height,
|
|
162
|
+
borderRadius,
|
|
163
|
+
position,
|
|
164
|
+
top,
|
|
165
|
+
bottom,
|
|
166
|
+
left,
|
|
167
|
+
right,
|
|
168
|
+
...style
|
|
169
|
+
};
|
|
170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
|
+
import_react_native.Image,
|
|
172
|
+
{
|
|
173
|
+
source: { uri: src },
|
|
174
|
+
style: imageStyle,
|
|
175
|
+
testID: finalTestID,
|
|
176
|
+
resizeMode: "cover",
|
|
177
|
+
...nativeRest
|
|
178
|
+
}
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
if (onPress) {
|
|
182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
183
|
+
import_react_native.Pressable,
|
|
184
|
+
{
|
|
185
|
+
onPress,
|
|
186
|
+
onLayout,
|
|
187
|
+
onMoveShouldSetResponder,
|
|
188
|
+
onResponderGrant,
|
|
189
|
+
onResponderMove,
|
|
190
|
+
onResponderRelease,
|
|
191
|
+
onResponderTerminate,
|
|
192
|
+
style: ({ pressed }) => getContainerStyle(pressed),
|
|
193
|
+
testID: finalTestID,
|
|
194
|
+
...nativeRest,
|
|
195
|
+
children
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
200
|
+
import_react_native.View,
|
|
201
|
+
{
|
|
202
|
+
style: getContainerStyle(),
|
|
203
|
+
testID: finalTestID,
|
|
204
|
+
onLayout,
|
|
205
|
+
onMoveShouldSetResponder,
|
|
206
|
+
onResponderGrant,
|
|
207
|
+
onResponderMove,
|
|
208
|
+
onResponderRelease,
|
|
209
|
+
onResponderTerminate,
|
|
210
|
+
...nativeRest,
|
|
211
|
+
children
|
|
212
|
+
}
|
|
213
|
+
);
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
// src/ItemerGroup.tsx
|
|
217
|
+
var import_xui_core = require("@xsolla/xui-core");
|
|
218
|
+
var import_xui_button = require("@xsolla/xui-button");
|
|
219
|
+
var import_xui_typography = require("@xsolla/xui-typography");
|
|
220
|
+
var import_xui_icons_base = require("@xsolla/xui-icons-base");
|
|
221
|
+
|
|
222
|
+
// src/ItemerGroupContext.tsx
|
|
223
|
+
var import_react = require("react");
|
|
224
|
+
var ItemerGroupContext = (0, import_react.createContext)({
|
|
225
|
+
draggable: false,
|
|
226
|
+
rowCount: 0
|
|
227
|
+
});
|
|
228
|
+
var useItemerGroupContext = () => (0, import_react.useContext)(ItemerGroupContext);
|
|
229
|
+
|
|
230
|
+
// src/ItemerGroup.tsx
|
|
231
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
232
|
+
var REMOVE_BUTTON_SIZE = 40;
|
|
233
|
+
var ItemerGroup = ({
|
|
234
|
+
label,
|
|
235
|
+
children,
|
|
236
|
+
draggable = false,
|
|
237
|
+
onAdd,
|
|
238
|
+
addButtonLabel = "Add line",
|
|
239
|
+
showAddButton,
|
|
240
|
+
className,
|
|
241
|
+
testID,
|
|
242
|
+
themeMode,
|
|
243
|
+
themeProductContext
|
|
244
|
+
}) => {
|
|
245
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
246
|
+
const shouldShowAddButton = showAddButton ?? Boolean(onAdd);
|
|
247
|
+
const rowCount = import_react2.default.Children.toArray(children).length;
|
|
248
|
+
const contextValue = (0, import_react2.useMemo)(
|
|
249
|
+
() => ({ draggable, rowCount }),
|
|
250
|
+
[draggable, rowCount]
|
|
251
|
+
);
|
|
252
|
+
const showDragSpacer = draggable && rowCount > 1;
|
|
253
|
+
const renderLabel = () => {
|
|
254
|
+
if (!label) return null;
|
|
255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
|
|
256
|
+
showDragSpacer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { width: 28, flexShrink: 0 }),
|
|
257
|
+
Array.isArray(label) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flex: 1, flexDirection: "row", alignItems: "flex-start", gap: 4, children: label.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
259
|
+
import_xui_typography.Typography,
|
|
260
|
+
{
|
|
261
|
+
variant: "bodyXs",
|
|
262
|
+
color: theme.colors.content.secondary,
|
|
263
|
+
children: l
|
|
264
|
+
}
|
|
265
|
+
) }, i)) }),
|
|
266
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { width: REMOVE_BUTTON_SIZE, flexShrink: 0 })
|
|
267
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_typography.Typography, { variant: "bodyXs", color: theme.colors.content.secondary, children: label })
|
|
268
|
+
] });
|
|
269
|
+
};
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ItemerGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "column", gap: 8, testID, className, children: [
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "column", gap: 4, children: [
|
|
272
|
+
renderLabel(),
|
|
273
|
+
children
|
|
274
|
+
] }),
|
|
275
|
+
shouldShowAddButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
|
|
276
|
+
showDragSpacer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { width: 28, flexShrink: 0 }),
|
|
277
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
278
|
+
import_xui_button.Button,
|
|
279
|
+
{
|
|
280
|
+
variant: "secondary",
|
|
281
|
+
tone: "brand",
|
|
282
|
+
size: "sm",
|
|
283
|
+
iconRight: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Plus, { size: 16 }),
|
|
284
|
+
onPress: onAdd,
|
|
285
|
+
children: addButtonLabel
|
|
286
|
+
}
|
|
287
|
+
)
|
|
288
|
+
] })
|
|
289
|
+
] }) });
|
|
290
|
+
};
|
|
291
|
+
ItemerGroup.displayName = "ItemerGroup";
|
|
292
|
+
|
|
293
|
+
// src/ItemerGroupRow.tsx
|
|
294
|
+
var import_xui_core2 = require("@xsolla/xui-core");
|
|
295
|
+
var import_xui_button2 = require("@xsolla/xui-button");
|
|
296
|
+
var import_xui_icons_base2 = require("@xsolla/xui-icons-base");
|
|
297
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
298
|
+
var ItemerGroupRow = ({
|
|
299
|
+
children,
|
|
300
|
+
onRemove,
|
|
301
|
+
onAdd,
|
|
302
|
+
className
|
|
303
|
+
}) => {
|
|
304
|
+
const { theme } = (0, import_xui_core2.useResolvedTheme)({});
|
|
305
|
+
const { draggable, rowCount } = useItemerGroupContext();
|
|
306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, className, children: [
|
|
307
|
+
draggable && rowCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
308
|
+
Box,
|
|
309
|
+
{
|
|
310
|
+
"data-drag-handle": "true",
|
|
311
|
+
width: 28,
|
|
312
|
+
height: 28,
|
|
313
|
+
alignItems: "center",
|
|
314
|
+
justifyContent: "center",
|
|
315
|
+
flexShrink: 0,
|
|
316
|
+
style: { cursor: "grab" },
|
|
317
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base2.Drag, { size: 20, color: theme.colors.content.tertiary })
|
|
318
|
+
}
|
|
319
|
+
),
|
|
320
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
321
|
+
Box,
|
|
322
|
+
{
|
|
323
|
+
flex: 1,
|
|
324
|
+
flexDirection: "row",
|
|
325
|
+
alignItems: "flex-start",
|
|
326
|
+
gap: 4,
|
|
327
|
+
minWidth: 0,
|
|
328
|
+
children: [
|
|
329
|
+
children,
|
|
330
|
+
onAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
331
|
+
import_xui_button2.IconButton,
|
|
332
|
+
{
|
|
333
|
+
"aria-label": "Add row",
|
|
334
|
+
variant: "secondary",
|
|
335
|
+
tone: "mono",
|
|
336
|
+
size: "sm",
|
|
337
|
+
onPress: onAdd,
|
|
338
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base2.Plus, { size: 20 })
|
|
339
|
+
}
|
|
340
|
+
),
|
|
341
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
342
|
+
import_xui_button2.IconButton,
|
|
343
|
+
{
|
|
344
|
+
"aria-label": "Remove row",
|
|
345
|
+
variant: "secondary",
|
|
346
|
+
tone: "mono",
|
|
347
|
+
size: "sm",
|
|
348
|
+
onPress: onRemove,
|
|
349
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base2.Remove, { size: 20 })
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
)
|
|
355
|
+
] });
|
|
356
|
+
};
|
|
357
|
+
ItemerGroupRow.displayName = "ItemerGroupRow";
|
|
358
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
359
|
+
0 && (module.exports = {
|
|
360
|
+
ItemerGroup,
|
|
361
|
+
ItemerGroupContext,
|
|
362
|
+
ItemerGroupRow
|
|
363
|
+
});
|
|
364
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/ItemerGroup.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../src/ItemerGroupContext.tsx","../../src/ItemerGroupRow.tsx"],"sourcesContent":["export { ItemerGroup } from \"./ItemerGroup\";\nexport { ItemerGroupRow } from \"./ItemerGroupRow\";\nexport { ItemerGroupContext } from \"./ItemerGroupContext\";\nexport type { ItemerGroupProps, ItemerGroupRowProps } from \"./types\";\n","import React, { useMemo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { Button } from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport { Plus } from \"@xsolla/xui-icons-base\";\nimport { ItemerGroupContext } from \"./ItemerGroupContext\";\nimport type { ItemerGroupProps } from \"./types\";\n\n// Size of the IconButton size=\"sm\" — used to reserve matching space in the label row\nconst REMOVE_BUTTON_SIZE = 40;\n\nexport const ItemerGroup: React.FC<ItemerGroupProps> = ({\n label,\n children,\n draggable = false,\n onAdd,\n addButtonLabel = \"Add line\",\n showAddButton,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const shouldShowAddButton = showAddButton ?? Boolean(onAdd);\n const rowCount = React.Children.toArray(children).length;\n const contextValue = useMemo(\n () => ({ draggable, rowCount }),\n [draggable, rowCount]\n );\n\n const showDragSpacer = draggable && rowCount > 1;\n\n const renderLabel = () => {\n if (!label) return null;\n\n return (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={8}>\n {showDragSpacer && <Box width={28} flexShrink={0} />}\n {Array.isArray(label) ? (\n <>\n <Box flex={1} flexDirection=\"row\" alignItems=\"flex-start\" gap={4}>\n {label.map((l, i) => (\n <Box flex={1} key={i}>\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.secondary}\n >\n {l}\n </Typography>\n </Box>\n ))}\n </Box>\n <Box width={REMOVE_BUTTON_SIZE} flexShrink={0} />\n </>\n ) : (\n <Typography variant=\"bodyXs\" color={theme.colors.content.secondary}>\n {label}\n </Typography>\n )}\n </Box>\n );\n };\n\n return (\n <ItemerGroupContext.Provider value={contextValue}>\n <Box flexDirection=\"column\" gap={8} testID={testID} className={className}>\n <Box flexDirection=\"column\" gap={4}>\n {renderLabel()}\n {children}\n </Box>\n {shouldShowAddButton && (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={8}>\n {showDragSpacer && <Box width={28} flexShrink={0} />}\n <Button\n variant=\"secondary\"\n tone=\"brand\"\n size=\"sm\"\n iconRight={<Plus size={16} />}\n onPress={onAdd}\n >\n {addButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n </ItemerGroupContext.Provider>\n );\n};\n\nItemerGroup.displayName = \"ItemerGroup\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import { createContext, useContext } from \"react\";\n\ninterface ItemerGroupContextValue {\n draggable: boolean;\n rowCount: number;\n}\n\nexport const ItemerGroupContext = createContext<ItemerGroupContextValue>({\n draggable: false,\n rowCount: 0,\n});\n\nexport const useItemerGroupContext = () => useContext(ItemerGroupContext);\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { IconButton } from \"@xsolla/xui-button\";\nimport { Drag, Plus, Remove } from \"@xsolla/xui-icons-base\";\nimport { useItemerGroupContext } from \"./ItemerGroupContext\";\nimport type { ItemerGroupRowProps } from \"./types\";\n\nexport const ItemerGroupRow: React.FC<ItemerGroupRowProps> = ({\n children,\n onRemove,\n onAdd,\n className,\n}) => {\n const { theme } = useResolvedTheme({});\n const { draggable, rowCount } = useItemerGroupContext();\n\n return (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={8} className={className}>\n {draggable && rowCount > 1 && (\n <Box\n data-drag-handle=\"true\"\n width={28}\n height={28}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n style={{ cursor: \"grab\" }}\n >\n <Drag size={20} color={theme.colors.content.tertiary} />\n </Box>\n )}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={4}\n minWidth={0}\n >\n {children}\n {onAdd && (\n <IconButton\n aria-label=\"Add row\"\n variant=\"secondary\"\n tone=\"mono\"\n size=\"sm\"\n onPress={onAdd}\n icon={<Plus size={20} />}\n />\n )}\n {onRemove && (\n <IconButton\n aria-label=\"Remove row\"\n variant=\"secondary\"\n tone=\"mono\"\n size=\"sm\"\n onPress={onRemove}\n icon={<Remove size={20} />}\n />\n )}\n </Box>\n </Box>\n );\n};\n\nItemerGroupRow.displayName = \"ItemerGroupRow\";\n"],"mappings":"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","names":["import_react","import_jsx_runtime","React","import_xui_core","import_xui_button","import_xui_icons_base","import_jsx_runtime"]}
|