@snack-uikit/fields 0.32.4 → 0.32.5-preview-1bd2190e.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.
Files changed (4) hide show
  1. package/dist/cjs/components/FieldStepper/FieldStepper.js +65 -46
  2. package/dist/esm/components/FieldStepper/FieldStepper.js +15 -2
  3. package/package.json +2 -2
  4. package/src/components/FieldStepper/FieldStepper.tsx +66 -48
package/dist/cjs/components/FieldStepper/FieldStepper.js CHANGED
@@ -42,6 +42,11 @@ const getDefaultValue = (min, max) => {
42
42
  }
43
43
  return 0;
44
44
  };
45
+ const SymbolWidth = {
46
+ s: 8,
47
+ m: 9,
48
+ l: 10
49
+ };
45
50
  exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
46
51
  var {
47
52
  id,
@@ -199,54 +204,68 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
199
204
  readonly: readonly,
200
205
  variant: constants_1.CONTAINER_VARIANT.SingleLine,
201
206
  inputRef: inputRef,
202
- prefix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
203
- children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
204
- tabIndex: -1,
205
- ref: minusButtonRef,
206
- size: 'xs',
207
- className: styles_module_scss_1.default.button,
208
- icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
209
- onClick: handleMinusButtonClick,
210
- onKeyDown: handleMinusButtonKeyDown,
211
- disabled: isMinusButtonDisabled,
212
- "data-test-id": 'field-stepper__minus-button'
213
- }), prefixSettings.show && prefixSettings.render({
214
- key: prefixSettings.id
215
- })]
207
+ prefix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
208
+ tabIndex: -1,
209
+ ref: minusButtonRef,
210
+ size: 'xs',
211
+ className: styles_module_scss_1.default.button,
212
+ icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
213
+ onClick: handleMinusButtonClick,
214
+ onKeyDown: handleMinusButtonKeyDown,
215
+ disabled: isMinusButtonDisabled,
216
+ "data-test-id": 'field-stepper__minus-button'
216
217
  }),
217
- postfix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
218
- children: [postfixSettings.show && postfixSettings.render({
219
- key: postfixSettings.id
220
- }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
221
- ref: plusButtonRef,
222
- tabIndex: -1,
223
- size: 'xs',
224
- className: styles_module_scss_1.default.button,
225
- icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
226
- onClick: handlePlusButtonClick,
227
- onKeyDown: handlePlusButtonKeyDown,
228
- disabled: isPlusButtonDisabled,
229
- "data-test-id": 'field-stepper__plus-button'
230
- })]
218
+ postfix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
219
+ ref: plusButtonRef,
220
+ tabIndex: -1,
221
+ size: 'xs',
222
+ className: styles_module_scss_1.default.button,
223
+ icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
224
+ onClick: handlePlusButtonClick,
225
+ onKeyDown: handlePlusButtonKeyDown,
226
+ disabled: isPlusButtonDisabled,
227
+ "data-test-id": 'field-stepper__plus-button'
231
228
  }),
232
- children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
233
- ref: (0, merge_refs_1.default)(ref, inputRef),
234
- className: styles_module_scss_1.default.stepper,
235
- "data-size": size,
236
- value: String(value),
237
- tabIndex: 0,
238
- onKeyDown: handleInputKeyDown,
239
- onChange: handleInputChange,
240
- onBlur: handleInputBlur,
241
- onFocus: handleInputFocus,
242
- disabled: disabled,
243
- readonly: readonly,
244
- type: 'number',
245
- id: id,
246
- name: name,
247
- min: min,
248
- max: max,
249
- "data-test-id": 'field-stepper__input'
229
+ children: (0, jsx_runtime_1.jsxs)("div", {
230
+ style: {
231
+ display: 'flex',
232
+ justifyContent: 'center',
233
+ gap: 4,
234
+ maxWidth: '100%'
235
+ },
236
+ children: [(0, jsx_runtime_1.jsx)("div", {
237
+ children: prefixSettings.show && prefixSettings.render({
238
+ key: prefixSettings.id
239
+ })
240
+ }), (0, jsx_runtime_1.jsx)("div", {
241
+ style: {
242
+ width: String(value).length * SymbolWidth[size],
243
+ maxWidth: '100%'
244
+ },
245
+ children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
246
+ ref: (0, merge_refs_1.default)(ref, inputRef),
247
+ className: styles_module_scss_1.default.stepper,
248
+ "data-size": size,
249
+ value: String(value),
250
+ tabIndex: 0,
251
+ onKeyDown: handleInputKeyDown,
252
+ onChange: handleInputChange,
253
+ onBlur: handleInputBlur,
254
+ onFocus: handleInputFocus,
255
+ disabled: disabled,
256
+ readonly: readonly,
257
+ type: 'number',
258
+ id: id,
259
+ name: name,
260
+ min: min,
261
+ max: max,
262
+ "data-test-id": 'field-stepper__input'
263
+ })
264
+ }), (0, jsx_runtime_1.jsx)("div", {
265
+ children: postfixSettings.show && postfixSettings.render({
266
+ key: postfixSettings.id
267
+ })
268
+ })]
250
269
  })
251
270
  })
252
271
  })
package/dist/esm/components/FieldStepper/FieldStepper.js CHANGED
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import mergeRefs from 'merge-refs';
14
14
  import { forwardRef, useEffect, useRef, useState, } from 'react';
15
15
  import { ButtonFunction } from '@snack-uikit/button';
@@ -34,6 +34,11 @@ const getDefaultValue = (min, max) => {
34
34
  }
35
35
  return 0;
36
36
  };
37
+ const SymbolWidth = {
38
+ s: 8,
39
+ m: 9,
40
+ l: 10,
41
+ };
37
42
  export const FieldStepper = forwardRef((_a, ref) => {
38
43
  var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix"]);
39
44
  const { t } = useLocale('Fields');
@@ -126,5 +131,13 @@ export const FieldStepper = forwardRef((_a, ref) => {
126
131
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
127
132
  }
128
133
  };
129
- return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsxs(_Fragment, { children: [_jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] }), postfix: _jsxs(_Fragment, { children: [postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
134
+ return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { style: {
135
+ display: 'flex',
136
+ justifyContent: 'center',
137
+ gap: 4,
138
+ maxWidth: '100%',
139
+ }, children: [_jsx("div", { children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
140
+ width: String(value).length * SymbolWidth[size],
141
+ maxWidth: '100%',
142
+ }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }), _jsx("div", { children: postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }) })] }) }) }) })));
130
143
  });
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.32.4",
7
+ "version": "0.32.5-preview-1bd2190e.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -65,5 +65,5 @@
65
65
  "peerDependencies": {
66
66
  "@snack-uikit/locale": "*"
67
67
  },
68
- "gitHead": "5b03de23f7a23a7459a9bfbfa55fc216fe0809ef"
68
+ "gitHead": "9ba12a400b500296598a57048295ebd19c6bf22e"
69
69
  }
package/src/components/FieldStepper/FieldStepper.tsx CHANGED
@@ -76,6 +76,12 @@ const getDefaultValue = (min: number, max: number) => {
76
76
  return 0;
77
77
  };
78
78
 
79
+ const SymbolWidth = {
80
+ s: 8,
81
+ m: 9,
82
+ l: 10,
83
+ };
84
+
79
85
  export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
80
86
  (
81
87
  {
@@ -250,58 +256,70 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
250
256
  variant={CONTAINER_VARIANT.SingleLine}
251
257
  inputRef={inputRef}
252
258
  prefix={
253
- <>
254
- <ButtonFunction
255
- tabIndex={-1}
256
- ref={minusButtonRef}
257
- size='xs'
258
- className={styles.button}
259
- icon={<MinusSVG />}
260
- onClick={handleMinusButtonClick}
261
- onKeyDown={handleMinusButtonKeyDown}
262
- disabled={isMinusButtonDisabled}
263
- data-test-id='field-stepper__minus-button'
264
- />
265
- {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
266
- </>
259
+ <ButtonFunction
260
+ tabIndex={-1}
261
+ ref={minusButtonRef}
262
+ size='xs'
263
+ className={styles.button}
264
+ icon={<MinusSVG />}
265
+ onClick={handleMinusButtonClick}
266
+ onKeyDown={handleMinusButtonKeyDown}
267
+ disabled={isMinusButtonDisabled}
268
+ data-test-id='field-stepper__minus-button'
269
+ />
267
270
  }
268
271
  postfix={
269
- <>
270
- {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
271
-
272
- <ButtonFunction
273
- ref={plusButtonRef}
274
- tabIndex={-1}
275
- size='xs'
276
- className={styles.button}
277
- icon={<PlusSVG />}
278
- onClick={handlePlusButtonClick}
279
- onKeyDown={handlePlusButtonKeyDown}
280
- disabled={isPlusButtonDisabled}
281
- data-test-id='field-stepper__plus-button'
282
- />
283
- </>
272
+ <ButtonFunction
273
+ ref={plusButtonRef}
274
+ tabIndex={-1}
275
+ size='xs'
276
+ className={styles.button}
277
+ icon={<PlusSVG />}
278
+ onClick={handlePlusButtonClick}
279
+ onKeyDown={handlePlusButtonKeyDown}
280
+ disabled={isPlusButtonDisabled}
281
+ data-test-id='field-stepper__plus-button'
282
+ />
284
283
  }
285
284
  >
286
- <InputPrivate
287
- ref={mergeRefs(ref, inputRef)}
288
- className={styles.stepper}
289
- data-size={size}
290
- value={String(value)}
291
- tabIndex={0}
292
- onKeyDown={handleInputKeyDown}
293
- onChange={handleInputChange}
294
- onBlur={handleInputBlur}
295
- onFocus={handleInputFocus}
296
- disabled={disabled}
297
- readonly={readonly}
298
- type='number'
299
- id={id}
300
- name={name}
301
- min={min}
302
- max={max}
303
- data-test-id='field-stepper__input'
304
- />
285
+ <div
286
+ style={{
287
+ display: 'flex',
288
+ justifyContent: 'center',
289
+ gap: 4,
290
+ maxWidth: '100%',
291
+ }}
292
+ >
293
+ <div>{prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}</div>
294
+
295
+ <div
296
+ style={{
297
+ width: String(value).length * SymbolWidth[size],
298
+ maxWidth: '100%',
299
+ }}
300
+ >
301
+ <InputPrivate
302
+ ref={mergeRefs(ref, inputRef)}
303
+ className={styles.stepper}
304
+ data-size={size}
305
+ value={String(value)}
306
+ tabIndex={0}
307
+ onKeyDown={handleInputKeyDown}
308
+ onChange={handleInputChange}
309
+ onBlur={handleInputBlur}
310
+ onFocus={handleInputFocus}
311
+ disabled={disabled}
312
+ readonly={readonly}
313
+ type='number'
314
+ id={id}
315
+ name={name}
316
+ min={min}
317
+ max={max}
318
+ data-test-id='field-stepper__input'
319
+ />
320
+ </div>
321
+ <div>{postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}</div>
322
+ </div>
305
323
  </FieldContainerPrivate>
306
324
  </Tooltip>
307
325
  </FieldDecorator>