@pingux/astro 2.117.0 → 2.118.0-alpha.1
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/lib/cjs/components/ComboBoxField/ComboBoxField.js +0 -1
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +24 -16
- package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +74 -32
- package/lib/cjs/components/SliderField/Slider.styles.d.ts +138 -0
- package/lib/cjs/components/SliderField/Slider.styles.js +163 -0
- package/lib/cjs/components/SliderField/SliderActiveTrack.d.ts +4 -0
- package/lib/cjs/components/SliderField/SliderActiveTrack.js +49 -0
- package/lib/cjs/components/SliderField/SliderField.d.ts +4 -0
- package/lib/cjs/components/SliderField/SliderField.js +58 -0
- package/lib/cjs/components/SliderField/SliderField.mdx +127 -0
- package/lib/cjs/components/SliderField/SliderField.stories.d.ts +11 -0
- package/lib/cjs/components/SliderField/SliderField.stories.js +151 -0
- package/lib/cjs/components/SliderField/SliderField.test.d.ts +1 -0
- package/lib/cjs/components/SliderField/SliderField.test.js +357 -0
- package/lib/cjs/components/SliderField/SliderLabelContainer.d.ts +4 -0
- package/lib/cjs/components/SliderField/SliderLabelContainer.js +43 -0
- package/lib/cjs/components/SliderField/SliderThumb.d.ts +4 -0
- package/lib/cjs/components/SliderField/SliderThumb.js +82 -0
- package/lib/cjs/components/SliderField/index.d.ts +1 -0
- package/lib/cjs/components/SliderField/index.js +14 -0
- package/lib/cjs/hooks/index.d.ts +1 -0
- package/lib/cjs/hooks/index.js +7 -0
- package/lib/cjs/hooks/useSliderField/index.d.ts +1 -0
- package/lib/cjs/hooks/useSliderField/index.js +14 -0
- package/lib/cjs/hooks/useSliderField/useSliderField.d.ts +4290 -0
- package/lib/cjs/hooks/useSliderField/useSliderField.js +230 -0
- package/lib/cjs/hooks/useSliderField/useSliderField.test.d.ts +1 -0
- package/lib/cjs/hooks/useSliderField/useSliderField.test.js +109 -0
- package/lib/cjs/index.d.ts +1 -0
- package/lib/cjs/index.js +8 -0
- package/lib/cjs/styles/colors.d.ts +6 -0
- package/lib/cjs/styles/colors.js +5 -1
- package/lib/cjs/styles/variants/variants.js +2 -0
- package/lib/cjs/types/sliderField.d.ts +79 -0
- package/lib/cjs/types/sliderField.js +6 -0
- package/lib/cjs/utils/testUtils/universalFormSubmitTest.js +17 -0
- package/lib/components/ComboBoxField/ComboBoxField.js +0 -1
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +24 -16
- package/lib/components/ComboBoxField/ComboBoxField.test.js +74 -32
- package/lib/components/SliderField/Slider.styles.js +155 -0
- package/lib/components/SliderField/SliderActiveTrack.js +37 -0
- package/lib/components/SliderField/SliderField.js +46 -0
- package/lib/components/SliderField/SliderField.mdx +127 -0
- package/lib/components/SliderField/SliderField.stories.js +131 -0
- package/lib/components/SliderField/SliderField.test.js +354 -0
- package/lib/components/SliderField/SliderLabelContainer.js +29 -0
- package/lib/components/SliderField/SliderThumb.js +68 -0
- package/lib/components/SliderField/index.js +1 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/useSliderField/index.js +1 -0
- package/lib/hooks/useSliderField/useSliderField.js +220 -0
- package/lib/hooks/useSliderField/useSliderField.test.js +102 -0
- package/lib/index.js +1 -0
- package/lib/styles/colors.js +5 -1
- package/lib/styles/variants/variants.js +2 -0
- package/lib/types/sliderField.js +1 -0
- package/lib/utils/testUtils/universalFormSubmitTest.js +17 -0
- package/package.json +3 -1
@@ -0,0 +1,357 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
4
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
5
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
8
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
9
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
10
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
11
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
13
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
14
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
16
|
+
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
17
|
+
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
18
|
+
var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
|
19
|
+
var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmitTest");
|
20
|
+
var _SliderField = _interopRequireDefault(require("./SliderField"));
|
21
|
+
var _react2 = require("@emotion/react");
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
23
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
24
|
+
var thumbId = 'thumb';
|
25
|
+
var outputId = 'output';
|
26
|
+
var wrapperId = 'wrapper';
|
27
|
+
var labelId = 'label';
|
28
|
+
var trackId = 'track-id';
|
29
|
+
var activeTrackId = 'active-track-id';
|
30
|
+
var labelClassName = 'labelClass';
|
31
|
+
var wrapperClassName = 'wrapperClass';
|
32
|
+
var testLabel = 'Slider Field';
|
33
|
+
var wrapperProps = {
|
34
|
+
'data-testid': wrapperId,
|
35
|
+
className: wrapperClassName
|
36
|
+
};
|
37
|
+
var labelProps = {
|
38
|
+
'data-testid': labelId,
|
39
|
+
className: labelClassName
|
40
|
+
};
|
41
|
+
var sliderTestId = 'slider-id';
|
42
|
+
var outputProps = {
|
43
|
+
'data-testid': outputId
|
44
|
+
};
|
45
|
+
var defaultProps = {
|
46
|
+
thumbProps: {
|
47
|
+
'data-testid': thumbId
|
48
|
+
},
|
49
|
+
outputProps: outputProps,
|
50
|
+
label: testLabel,
|
51
|
+
'data-testid': sliderTestId
|
52
|
+
};
|
53
|
+
var getComponent = function getComponent() {
|
54
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
55
|
+
return (0, _testWrapper.render)((0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, defaultProps, props)));
|
56
|
+
};
|
57
|
+
(0, _universalComponentTest.universalComponentTests)({
|
58
|
+
renderComponent: function renderComponent(props) {
|
59
|
+
return (0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, props, defaultProps));
|
60
|
+
}
|
61
|
+
});
|
62
|
+
(0, _universalFormSubmitTest.universalFieldComponentTests)({
|
63
|
+
renderComponent: function renderComponent(props) {
|
64
|
+
return (0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, defaultProps, props));
|
65
|
+
},
|
66
|
+
testValue: 50,
|
67
|
+
testLabel: testLabel,
|
68
|
+
componentType: 'SliderField'
|
69
|
+
});
|
70
|
+
describe('SliderField Component', function () {
|
71
|
+
test('renders SliderField with default props', function () {
|
72
|
+
getComponent({
|
73
|
+
label: 'Slider Field',
|
74
|
+
defaultValue: 50
|
75
|
+
});
|
76
|
+
expect(_testWrapper.screen.getByText('Slider Field')).toBeInTheDocument();
|
77
|
+
expect(_testWrapper.screen.getByRole('slider')).toHaveValue('50');
|
78
|
+
});
|
79
|
+
test('renders SliderField with custom value', function () {
|
80
|
+
getComponent({
|
81
|
+
label: 'Custom Slider',
|
82
|
+
value: 30
|
83
|
+
});
|
84
|
+
expect(_testWrapper.screen.getByText('Custom Slider')).toBeInTheDocument();
|
85
|
+
expect(_testWrapper.screen.getByRole('slider')).toHaveValue('30');
|
86
|
+
});
|
87
|
+
test('calls onChange when slider value changes', function () {
|
88
|
+
var onChangeMock = jest.fn();
|
89
|
+
getComponent({
|
90
|
+
label: 'Slider Field',
|
91
|
+
onChange: onChangeMock,
|
92
|
+
defaultValue: 40
|
93
|
+
});
|
94
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
95
|
+
_testWrapper.fireEvent.change(slider, {
|
96
|
+
target: {
|
97
|
+
value: 60
|
98
|
+
}
|
99
|
+
});
|
100
|
+
expect(onChangeMock).toHaveBeenCalledWith(60);
|
101
|
+
});
|
102
|
+
test('renders vertical orientation', function () {
|
103
|
+
getComponent({
|
104
|
+
label: 'Vertical Slider',
|
105
|
+
orientation: 'vertical',
|
106
|
+
defaultValue: 20
|
107
|
+
});
|
108
|
+
expect(_testWrapper.screen.getByText('Vertical Slider')).toBeInTheDocument();
|
109
|
+
expect(_testWrapper.screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical');
|
110
|
+
});
|
111
|
+
test('disables the slider when isDisabled is true', function () {
|
112
|
+
getComponent({
|
113
|
+
label: 'Disabled Slider',
|
114
|
+
isDisabled: true
|
115
|
+
});
|
116
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
117
|
+
expect(slider).toBeDisabled();
|
118
|
+
});
|
119
|
+
test('renders display value correctly', function () {
|
120
|
+
getComponent({
|
121
|
+
label: 'Slider with Display',
|
122
|
+
defaultValue: 70,
|
123
|
+
displayValue: '70%'
|
124
|
+
});
|
125
|
+
expect(_testWrapper.screen.getByText('70%')).toBeInTheDocument();
|
126
|
+
});
|
127
|
+
test('hides display value when isDisplayValueHidden is true', function () {
|
128
|
+
getComponent({
|
129
|
+
label: 'Hidden Display Slider',
|
130
|
+
defaultValue: 50,
|
131
|
+
isDisplayValueHidden: true
|
132
|
+
});
|
133
|
+
expect(_testWrapper.screen.queryByText('50')).not.toBeInTheDocument();
|
134
|
+
});
|
135
|
+
test('calls onChangeEnd when slider interaction ends', function () {
|
136
|
+
var onChangeEndMock = jest.fn();
|
137
|
+
getComponent({
|
138
|
+
label: 'Slider Field',
|
139
|
+
onChangeEnd: onChangeEndMock,
|
140
|
+
defaultValue: 40
|
141
|
+
});
|
142
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
143
|
+
_testWrapper.fireEvent.mouseDown(slider);
|
144
|
+
_testWrapper.fireEvent.mouseUp(slider);
|
145
|
+
expect(onChangeEndMock).toHaveBeenCalled();
|
146
|
+
});
|
147
|
+
test('handles keyboard functionality', function () {
|
148
|
+
var onChangeMock = jest.fn();
|
149
|
+
getComponent({
|
150
|
+
label: 'Keyboard Slider',
|
151
|
+
onChange: onChangeMock,
|
152
|
+
defaultValue: 50,
|
153
|
+
step: 10
|
154
|
+
});
|
155
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
156
|
+
var output = _testWrapper.screen.getByTestId(outputId);
|
157
|
+
_userEvent["default"].tab();
|
158
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
159
|
+
key: 'ArrowRight'
|
160
|
+
});
|
161
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
162
|
+
key: 'ArrowRight'
|
163
|
+
});
|
164
|
+
expect(onChangeMock).toHaveBeenCalledTimes(1);
|
165
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
166
|
+
expect(output).toHaveTextContent('60');
|
167
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
168
|
+
key: 'ArrowLeft'
|
169
|
+
});
|
170
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
171
|
+
key: 'ArrowLeft'
|
172
|
+
});
|
173
|
+
expect(onChangeMock).toHaveBeenCalledTimes(2);
|
174
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
175
|
+
expect(output).toHaveTextContent('50');
|
176
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
177
|
+
key: 'Home'
|
178
|
+
});
|
179
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
180
|
+
key: 'Home'
|
181
|
+
});
|
182
|
+
expect(onChangeMock).toHaveBeenCalledTimes(3);
|
183
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
184
|
+
expect(output).toHaveTextContent('0');
|
185
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
186
|
+
key: 'End'
|
187
|
+
});
|
188
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
189
|
+
key: 'End'
|
190
|
+
});
|
191
|
+
expect(onChangeMock).toHaveBeenCalledTimes(4);
|
192
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
193
|
+
expect(output).toHaveTextContent('100');
|
194
|
+
});
|
195
|
+
test('handles minValue and maxValue', function () {
|
196
|
+
var onChangeMock = jest.fn();
|
197
|
+
getComponent({
|
198
|
+
label: 'Keyboard Slider',
|
199
|
+
onChange: onChangeMock,
|
200
|
+
defaultValue: 50,
|
201
|
+
step: 10,
|
202
|
+
minValue: 10,
|
203
|
+
maxValue: 190
|
204
|
+
});
|
205
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
206
|
+
var output = _testWrapper.screen.getByTestId(outputId);
|
207
|
+
_userEvent["default"].tab();
|
208
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
209
|
+
key: 'Home'
|
210
|
+
});
|
211
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
212
|
+
key: 'Home'
|
213
|
+
});
|
214
|
+
expect(onChangeMock).toHaveBeenCalledTimes(1);
|
215
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
216
|
+
expect(output).toHaveTextContent('10');
|
217
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
218
|
+
key: 'End'
|
219
|
+
});
|
220
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
221
|
+
key: 'End'
|
222
|
+
});
|
223
|
+
expect(onChangeMock).toHaveBeenCalledTimes(2);
|
224
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
225
|
+
expect(output).toHaveTextContent('190');
|
226
|
+
});
|
227
|
+
test('handles vertical slider keyboard functionality', function () {
|
228
|
+
var onChangeMock = jest.fn();
|
229
|
+
getComponent({
|
230
|
+
label: 'Vertical Slider',
|
231
|
+
onChange: onChangeMock,
|
232
|
+
defaultValue: 50,
|
233
|
+
step: 10,
|
234
|
+
orientation: 'vertical'
|
235
|
+
});
|
236
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
237
|
+
var output = _testWrapper.screen.getByTestId(outputId);
|
238
|
+
_userEvent["default"].tab();
|
239
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
240
|
+
key: 'ArrowUp'
|
241
|
+
});
|
242
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
243
|
+
key: 'ArrowUp'
|
244
|
+
});
|
245
|
+
expect(onChangeMock).toHaveBeenCalledTimes(1);
|
246
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
247
|
+
expect(output).toHaveTextContent('60');
|
248
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
249
|
+
key: 'ArrowDown'
|
250
|
+
});
|
251
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
252
|
+
key: 'ArrowDown'
|
253
|
+
});
|
254
|
+
expect(onChangeMock).toHaveBeenCalledTimes(2);
|
255
|
+
output = _testWrapper.screen.getByTestId(outputId);
|
256
|
+
expect(output).toHaveTextContent('50');
|
257
|
+
});
|
258
|
+
test('handles multi-thumb slider functionality', function () {
|
259
|
+
var onChangeMock = jest.fn();
|
260
|
+
getComponent({
|
261
|
+
label: 'Multi Thumb Slider',
|
262
|
+
onChange: onChangeMock,
|
263
|
+
defaultValue: [20, 80],
|
264
|
+
isMultiThumb: true
|
265
|
+
});
|
266
|
+
var thumbs = _testWrapper.screen.getAllByTestId(thumbId);
|
267
|
+
expect(thumbs).toHaveLength(2);
|
268
|
+
var _thumbs = (0, _slicedToArray2["default"])(thumbs, 2),
|
269
|
+
thumb1 = _thumbs[0],
|
270
|
+
thumb2 = _thumbs[1];
|
271
|
+
_testWrapper.fireEvent.keyDown(thumb1, {
|
272
|
+
key: 'ArrowRight'
|
273
|
+
});
|
274
|
+
_testWrapper.fireEvent.keyUp(thumb1, {
|
275
|
+
key: 'ArrowRight'
|
276
|
+
});
|
277
|
+
expect(onChangeMock).toHaveBeenCalledWith([30, 80]);
|
278
|
+
_testWrapper.fireEvent.keyDown(thumb2, {
|
279
|
+
key: 'ArrowLeft'
|
280
|
+
});
|
281
|
+
_testWrapper.fireEvent.keyUp(thumb2, {
|
282
|
+
key: 'ArrowLeft'
|
283
|
+
});
|
284
|
+
expect(onChangeMock).toHaveBeenCalledWith([30, 70]);
|
285
|
+
});
|
286
|
+
test('adds custom class names to trackProps and activeTrackProps', function () {
|
287
|
+
var trackClassName = 'custom-track-class';
|
288
|
+
var activeTrackClassName = 'custom-active-track-class';
|
289
|
+
getComponent(_objectSpread({
|
290
|
+
trackProps: {
|
291
|
+
className: trackClassName,
|
292
|
+
'data-testid': trackId
|
293
|
+
},
|
294
|
+
activeTrackProps: {
|
295
|
+
className: activeTrackClassName,
|
296
|
+
'data-testid': activeTrackId
|
297
|
+
}
|
298
|
+
}, defaultProps));
|
299
|
+
var track = _testWrapper.screen.getByTestId(trackId);
|
300
|
+
var activeTrack = _testWrapper.screen.getByTestId(activeTrackId);
|
301
|
+
var slider = _testWrapper.screen.getByRole('slider');
|
302
|
+
_userEvent["default"].tab();
|
303
|
+
_testWrapper.fireEvent.keyDown(slider, {
|
304
|
+
key: 'ArrowRight'
|
305
|
+
});
|
306
|
+
_testWrapper.fireEvent.keyUp(slider, {
|
307
|
+
key: 'ArrowRight'
|
308
|
+
});
|
309
|
+
expect(track).toBeInTheDocument();
|
310
|
+
expect(track).toHaveClass(trackClassName);
|
311
|
+
expect(activeTrack).toBeInTheDocument();
|
312
|
+
expect(activeTrack).toHaveClass(activeTrackClassName);
|
313
|
+
});
|
314
|
+
test('adds custom class names to labelProps and wrapperProps', function () {
|
315
|
+
getComponent(_objectSpread({
|
316
|
+
labelProps: labelProps,
|
317
|
+
wrapperProps: wrapperProps
|
318
|
+
}, defaultProps));
|
319
|
+
var label = _testWrapper.screen.getByText('Slider Field');
|
320
|
+
var wrapper = _testWrapper.screen.getByTestId(wrapperId);
|
321
|
+
_userEvent["default"].tab();
|
322
|
+
expect(label).toBeInTheDocument();
|
323
|
+
expect(label).toHaveClass(labelClassName);
|
324
|
+
expect(wrapper).toBeInTheDocument();
|
325
|
+
expect(wrapper).toHaveClass(wrapperClassName);
|
326
|
+
});
|
327
|
+
test('changes size property', function () {
|
328
|
+
var _getComponent = getComponent({
|
329
|
+
size: '300px'
|
330
|
+
}),
|
331
|
+
rerender = _getComponent.rerender;
|
332
|
+
var container = _testWrapper.screen.getByTestId(sliderTestId);
|
333
|
+
expect(container).toHaveStyle({
|
334
|
+
width: '300px'
|
335
|
+
});
|
336
|
+
rerender((0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, defaultProps, {
|
337
|
+
size: "500px"
|
338
|
+
})));
|
339
|
+
expect(container).toHaveStyle({
|
340
|
+
width: '500px'
|
341
|
+
});
|
342
|
+
});
|
343
|
+
test('applies custom styles via sx prop', function () {
|
344
|
+
var customStyles = {
|
345
|
+
backgroundColor: 'red',
|
346
|
+
padding: '20px'
|
347
|
+
};
|
348
|
+
getComponent({
|
349
|
+
sx: customStyles
|
350
|
+
});
|
351
|
+
var container = _testWrapper.screen.getByTestId(sliderTestId);
|
352
|
+
expect(container).toHaveStyle({
|
353
|
+
backgroundColor: 'red',
|
354
|
+
padding: '20px'
|
355
|
+
});
|
356
|
+
});
|
357
|
+
});
|
@@ -0,0 +1,43 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
8
|
+
_Object$defineProperty(exports, "__esModule", {
|
9
|
+
value: true
|
10
|
+
});
|
11
|
+
exports["default"] = void 0;
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
13
|
+
var _react = _interopRequireWildcard(require("react"));
|
14
|
+
var _index = require("../../index");
|
15
|
+
var _react2 = require("@emotion/react");
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
17
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
18
|
+
var SliderLabelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
19
|
+
var displayValue = props.displayValue,
|
20
|
+
label = props.label,
|
21
|
+
labelProps = props.labelProps,
|
22
|
+
isDisplayValueHidden = props.isDisplayValueHidden,
|
23
|
+
outputProps = props.outputProps,
|
24
|
+
className = props.className;
|
25
|
+
return (0, _react2.jsx)(_index.Box, {
|
26
|
+
ref: ref,
|
27
|
+
className: className,
|
28
|
+
variant: "slider.labelContainer"
|
29
|
+
}, label && (0, _react2.jsx)(_index.Box, {
|
30
|
+
sx: {
|
31
|
+
gap: '0px'
|
32
|
+
}
|
33
|
+
}, (0, _react2.jsx)(_index.Label, (0, _extends2["default"])({}, labelProps, {
|
34
|
+
sx: {
|
35
|
+
mb: '0px'
|
36
|
+
}
|
37
|
+
}), label)), !isDisplayValueHidden && (0, _react2.jsx)(_index.Box, {
|
38
|
+
className: className,
|
39
|
+
variant: "slider.outputContainer"
|
40
|
+
}, (0, _react2.jsx)(_index.Text, outputProps, displayValue)));
|
41
|
+
});
|
42
|
+
var _default = SliderLabelContainer;
|
43
|
+
exports["default"] = _default;
|
@@ -0,0 +1,82 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
8
|
+
_Object$defineProperty(exports, "__esModule", {
|
9
|
+
value: true
|
10
|
+
});
|
11
|
+
exports["default"] = void 0;
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
13
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
15
|
+
var _reactAria = require("react-aria");
|
16
|
+
var _interactions = require("@react-aria/interactions");
|
17
|
+
var _hooks = require("../../hooks");
|
18
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
19
|
+
var _Input = _interopRequireDefault(require("../Input"));
|
20
|
+
var _react2 = require("@emotion/react");
|
21
|
+
var _excluded = ["className", "index", "inputProps", "isHorizontal", "isVertical", "name", "onFocus", "onFocusChange", "onPress", "state", "trackRef"];
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
23
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
24
|
+
var SliderThumb = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
25
|
+
var inputRef = (0, _react.useRef)(null);
|
26
|
+
var thumbRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
27
|
+
var className = props.className,
|
28
|
+
index = props.index,
|
29
|
+
inputProps = props.inputProps,
|
30
|
+
isHorizontal = props.isHorizontal,
|
31
|
+
isVertical = props.isVertical,
|
32
|
+
name = props.name,
|
33
|
+
onFocus = props.onFocus,
|
34
|
+
onFocusChange = props.onFocusChange,
|
35
|
+
onPress = props.onPress,
|
36
|
+
state = props.state,
|
37
|
+
trackRef = props.trackRef,
|
38
|
+
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
39
|
+
var _useSliderThumb = (0, _reactAria.useSliderThumb)({
|
40
|
+
index: index,
|
41
|
+
trackRef: trackRef,
|
42
|
+
inputRef: inputRef,
|
43
|
+
name: name
|
44
|
+
}, state),
|
45
|
+
thumbProps = _useSliderThumb.thumbProps,
|
46
|
+
raInputProps = _useSliderThumb.inputProps,
|
47
|
+
isDragging = _useSliderThumb.isDragging;
|
48
|
+
var _useFocusRing = (0, _reactAria.useFocusRing)(),
|
49
|
+
focusProps = _useFocusRing.focusProps,
|
50
|
+
isFocusVisible = _useFocusRing.isFocusVisible;
|
51
|
+
var _useHover = (0, _interactions.useHover)({}),
|
52
|
+
hoverProps = _useHover.hoverProps,
|
53
|
+
isHovered = _useHover.isHovered;
|
54
|
+
var _usePress = (0, _interactions.usePress)({
|
55
|
+
ref: thumbRef,
|
56
|
+
onPress: onPress
|
57
|
+
}),
|
58
|
+
pressProps = _usePress.pressProps,
|
59
|
+
isPressed = _usePress.isPressed;
|
60
|
+
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
61
|
+
isDragging: isDragging,
|
62
|
+
isFocused: isFocusVisible,
|
63
|
+
isHorizontal: isHorizontal,
|
64
|
+
isVertical: isVertical,
|
65
|
+
isHovered: isHovered,
|
66
|
+
isPressed: isPressed
|
67
|
+
}),
|
68
|
+
classNames = _useStatusClasses.classNames;
|
69
|
+
var mergedThumbProps = (0, _reactAria.mergeProps)(pressProps, others, hoverProps, thumbProps);
|
70
|
+
return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
71
|
+
className: classNames,
|
72
|
+
variant: "slider.thumb",
|
73
|
+
"data-testid": "thumb"
|
74
|
+
}, mergedThumbProps), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({
|
75
|
+
ref: inputRef,
|
76
|
+
"data-testid": "input"
|
77
|
+
}, (0, _reactAria.mergeProps)(inputProps, raInputProps, focusProps), {
|
78
|
+
name: name
|
79
|
+
}))));
|
80
|
+
});
|
81
|
+
var _default = SliderThumb;
|
82
|
+
exports["default"] = _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './SliderField';
|
@@ -0,0 +1,14 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
_Object$defineProperty(exports, "default", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function get() {
|
11
|
+
return _SliderField["default"];
|
12
|
+
}
|
13
|
+
});
|
14
|
+
var _SliderField = _interopRequireDefault(require("./SliderField"));
|
package/lib/cjs/hooks/index.d.ts
CHANGED
@@ -19,5 +19,6 @@ export { default as useProgressiveState } from './useProgressiveState';
|
|
19
19
|
export { default as usePropWarning } from './usePropWarning';
|
20
20
|
export { default as useRockerButton } from './useRockerButton';
|
21
21
|
export { default as useSelectField } from './useSelectField';
|
22
|
+
export { default as useSliderField } from './useSliderField';
|
22
23
|
export { default as useStatusClasses } from './useStatusClasses';
|
23
24
|
export { default as useTShirtSize } from './useTShirtSize';
|
package/lib/cjs/hooks/index.js
CHANGED
@@ -131,6 +131,12 @@ _Object$defineProperty(exports, "useSelectField", {
|
|
131
131
|
return _useSelectField["default"];
|
132
132
|
}
|
133
133
|
});
|
134
|
+
_Object$defineProperty(exports, "useSliderField", {
|
135
|
+
enumerable: true,
|
136
|
+
get: function get() {
|
137
|
+
return _useSliderField["default"];
|
138
|
+
}
|
139
|
+
});
|
134
140
|
_Object$defineProperty(exports, "useStatusClasses", {
|
135
141
|
enumerable: true,
|
136
142
|
get: function get() {
|
@@ -164,5 +170,6 @@ var _useProgressiveState = _interopRequireDefault(require("./useProgressiveState
|
|
164
170
|
var _usePropWarning = _interopRequireDefault(require("./usePropWarning"));
|
165
171
|
var _useRockerButton = _interopRequireDefault(require("./useRockerButton"));
|
166
172
|
var _useSelectField = _interopRequireDefault(require("./useSelectField"));
|
173
|
+
var _useSliderField = _interopRequireDefault(require("./useSliderField"));
|
167
174
|
var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));
|
168
175
|
var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './useSliderField';
|
@@ -0,0 +1,14 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
_Object$defineProperty(exports, "default", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function get() {
|
11
|
+
return _useSliderField["default"];
|
12
|
+
}
|
13
|
+
});
|
14
|
+
var _useSliderField = _interopRequireDefault(require("./useSliderField"));
|