@snack-uikit/fields 0.32.5-preview-1bd2190e.0 → 0.32.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.32.5 (2024-11-14)
+
+
+### Dependencies
+
+* **FF-5678:** up deps classnames/uncontrollable ([8f0d645](https://github.com/cloud-ru-tech/snack-uikit/commit/8f0d645fc7eb8eaf95660cd0ae7d4b550821059b))
+
+
+
+
+
 ## 0.32.4 (2024-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/FieldStepper/FieldStepper.js

@@ -42,11 +42,6 @@ const getDefaultValue = (min, max) => {
   }
   return 0;
 };
-const SymbolWidth = {
-  s: 8,
-  m: 9,
-  l: 10
-};
 exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
   var {
       id,
@@ -204,68 +199,54 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
         readonly: readonly,
         variant: constants_1.CONTAINER_VARIANT.SingleLine,
         inputRef: inputRef,
-        prefix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-          tabIndex: -1,
-          ref: minusButtonRef,
-          size: 'xs',
-          className: styles_module_scss_1.default.button,
-          icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
-          onClick: handleMinusButtonClick,
-          onKeyDown: handleMinusButtonKeyDown,
-          disabled: isMinusButtonDisabled,
-          "data-test-id": 'field-stepper__minus-button'
-        }),
-        postfix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-          ref: plusButtonRef,
-          tabIndex: -1,
-          size: 'xs',
-          className: styles_module_scss_1.default.button,
-          icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
-          onClick: handlePlusButtonClick,
-          onKeyDown: handlePlusButtonKeyDown,
-          disabled: isPlusButtonDisabled,
-          "data-test-id": 'field-stepper__plus-button'
+        prefix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            tabIndex: -1,
+            ref: minusButtonRef,
+            size: 'xs',
+            className: styles_module_scss_1.default.button,
+            icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
+            onClick: handleMinusButtonClick,
+            onKeyDown: handleMinusButtonKeyDown,
+            disabled: isMinusButtonDisabled,
+            "data-test-id": 'field-stepper__minus-button'
+          }), prefixSettings.show && prefixSettings.render({
+            key: prefixSettings.id
+          })]
         }),
-        children: (0, jsx_runtime_1.jsxs)("div", {
-          style: {
-            display: 'flex',
-            justifyContent: 'center',
-            gap: 4,
-            maxWidth: '100%'
-          },
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            children: prefixSettings.show && prefixSettings.render({
-              key: prefixSettings.id
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            style: {
-              width: String(value).length * SymbolWidth[size],
-              maxWidth: '100%'
-            },
-            children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
-              ref: (0, merge_refs_1.default)(ref, inputRef),
-              className: styles_module_scss_1.default.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'
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            children: postfixSettings.show && postfixSettings.render({
-              key: postfixSettings.id
-            })
+        postfix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [postfixSettings.show && postfixSettings.render({
+            key: postfixSettings.id
+          }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            ref: plusButtonRef,
+            tabIndex: -1,
+            size: 'xs',
+            className: styles_module_scss_1.default.button,
+            icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
+            onClick: handlePlusButtonClick,
+            onKeyDown: handlePlusButtonKeyDown,
+            disabled: isPlusButtonDisabled,
+            "data-test-id": 'field-stepper__plus-button'
           })]
+        }),
+        children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
+          ref: (0, merge_refs_1.default)(ref, inputRef),
+          className: styles_module_scss_1.default.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'
         })
       })
     })

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useEffect, useRef, useState, } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
@@ -34,11 +34,6 @@ const getDefaultValue = (min, max) => {
     }
     return 0;
 };
-const SymbolWidth = {
-    s: 8,
-    m: 9,
-    l: 10,
-};
 export const FieldStepper = forwardRef((_a, ref) => {
     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"]);
     const { t } = useLocale('Fields');
@@ -131,13 +126,5 @@ export const FieldStepper = forwardRef((_a, ref) => {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    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: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        gap: 4,
-                        maxWidth: '100%',
-                    }, children: [_jsx("div", { children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
-                                width: String(value).length * SymbolWidth[size],
-                                maxWidth: '100%',
-                            }, 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 }) })] }) }) }) })));
+    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' }) }) }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.32.5-preview-1bd2190e.0",
+  "version": "0.32.5",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,25 +36,25 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.2",
-    "@snack-uikit/calendar": "0.11.4",
-    "@snack-uikit/color-picker": "0.3.2",
-    "@snack-uikit/divider": "3.2.0",
-    "@snack-uikit/dropdown": "0.4.0",
+    "@snack-uikit/button": "0.19.3",
+    "@snack-uikit/calendar": "0.11.5",
+    "@snack-uikit/color-picker": "0.3.3",
+    "@snack-uikit/divider": "3.2.1",
+    "@snack-uikit/dropdown": "0.4.1",
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/input-private": "4.2.1",
-    "@snack-uikit/list": "0.21.4",
-    "@snack-uikit/scroll": "0.9.0",
-    "@snack-uikit/skeleton": "0.5.0",
-    "@snack-uikit/slider": "0.3.1",
-    "@snack-uikit/tag": "0.11.1",
-    "@snack-uikit/tooltip": "0.15.0",
-    "@snack-uikit/truncate-string": "0.6.0",
+    "@snack-uikit/input-private": "4.2.2",
+    "@snack-uikit/list": "0.21.5",
+    "@snack-uikit/scroll": "0.9.1",
+    "@snack-uikit/skeleton": "0.5.1",
+    "@snack-uikit/slider": "0.3.2",
+    "@snack-uikit/tag": "0.11.2",
+    "@snack-uikit/tooltip": "0.15.1",
+    "@snack-uikit/truncate-string": "0.6.1",
     "@snack-uikit/utils": "3.5.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "copy-to-clipboard": "3.3.3",
     "fuzzy-search": "3.2.1",
-    "merge-refs": "1.2.2",
+    "merge-refs": "1.3.0",
     "react-textarea-autosize": "8.5.3",
     "uncontrollable": "8.0.4"
   },
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "9ba12a400b500296598a57048295ebd19c6bf22e"
+  "gitHead": "b9670e68c6af5fdd5dfceeae29ef3af8c89e5e6b"
 }

package/src/components/FieldStepper/FieldStepper.tsx

@@ -76,12 +76,6 @@ const getDefaultValue = (min: number, max: number) => {
   return 0;
 };
 
-const SymbolWidth = {
-  s: 8,
-  m: 9,
-  l: 10,
-};
-
 export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
   (
     {
@@ -256,70 +250,58 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
             variant={CONTAINER_VARIANT.SingleLine}
             inputRef={inputRef}
             prefix={
-              <ButtonFunction
-                tabIndex={-1}
-                ref={minusButtonRef}
-                size='xs'
-                className={styles.button}
-                icon={<MinusSVG />}
-                onClick={handleMinusButtonClick}
-                onKeyDown={handleMinusButtonKeyDown}
-                disabled={isMinusButtonDisabled}
-                data-test-id='field-stepper__minus-button'
-              />
+              <>
+                <ButtonFunction
+                  tabIndex={-1}
+                  ref={minusButtonRef}
+                  size='xs'
+                  className={styles.button}
+                  icon={<MinusSVG />}
+                  onClick={handleMinusButtonClick}
+                  onKeyDown={handleMinusButtonKeyDown}
+                  disabled={isMinusButtonDisabled}
+                  data-test-id='field-stepper__minus-button'
+                />
+                {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+              </>
             }
             postfix={
-              <ButtonFunction
-                ref={plusButtonRef}
-                tabIndex={-1}
-                size='xs'
-                className={styles.button}
-                icon={<PlusSVG />}
-                onClick={handlePlusButtonClick}
-                onKeyDown={handlePlusButtonKeyDown}
-                disabled={isPlusButtonDisabled}
-                data-test-id='field-stepper__plus-button'
-              />
+              <>
+                {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
+
+                <ButtonFunction
+                  ref={plusButtonRef}
+                  tabIndex={-1}
+                  size='xs'
+                  className={styles.button}
+                  icon={<PlusSVG />}
+                  onClick={handlePlusButtonClick}
+                  onKeyDown={handlePlusButtonKeyDown}
+                  disabled={isPlusButtonDisabled}
+                  data-test-id='field-stepper__plus-button'
+                />
+              </>
             }
           >
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                gap: 4,
-                maxWidth: '100%',
-              }}
-            >
-              <div>{prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}</div>
-
-              <div
-                style={{
-                  width: String(value).length * SymbolWidth[size],
-                  maxWidth: '100%',
-                }}
-              >
-                <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'
-                />
-              </div>
-              <div>{postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}</div>
-            </div>
+            <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'
+            />
           </FieldContainerPrivate>
         </Tooltip>
       </FieldDecorator>