@cloud-ru/uikit-product-mobile-fields 0.12.3 → 0.12.4

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.12.4 (2025-12-24)
+
+
+### Bug Fixes
+
+* **PDS-3335:** FieldSelect disabled tag background-color ([8e169bd](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/8e169bd5f5c2857c661b1bb819742e0173e744d0))
+
+
+
+
+
 ## 0.12.3 (2025-12-17)
 
 ### Only dependencies have been changed

package/dist/cjs/components/MobileFieldSelect/MobileFieldSelectMultiple.js

@@ -149,6 +149,6 @@ exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, ref) => {
                     }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, ref: contentRef, children: [selectedItems &&
                                         selectedItems.map(option => {
                                             var _a;
-                                            return ((0, jsx_runtime_1.jsx)(tag_1.Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral' }, option.id));
+                                            return ((0, jsx_runtime_1.jsx)(tag_1.Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', className: styles_module_scss_1.default.tag, "data-disabled": disabled || undefined }, option.id));
                                         }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputWrapper, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: (0, merge_refs_1.default)(ref, localRef), onChange: undefined, value: '', inputMode: 'none', "data-test-id": 'field-select__input', onBlur: handleBlur, className: styles_module_scss_1.default.readonlyCursor, autoFocus: autoFocus }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.postfix, children: [postfixButtons, postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), (0, jsx_runtime_1.jsx)(ArrowIcon, { size: arrowIconSize, className: styles_module_scss_1.default.arrowIcon })] })] }) }) })), (0, jsx_runtime_1.jsxs)(uikit_product_mobile_modal_1.MobileModalCustom, { open: open, onClose: () => handleOpenChange(false), size: searchable ? 'full' : 'auto', children: [rest.label && (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Header, { title: rest.label }), searchable ? listJsx : (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Body, { className: styles_module_scss_1.default.bodyNoPadding, content: listJsx }), (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Footer, { actions: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footerTopLine, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.counter, children: `${t('selectedN')}${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0}` }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'm', label: t('resetAll'), onClick: onClear, "data-test-id": 'field-select__reset-all-button' })] }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { fullWidth: true, label: t('select'), "data-test-id": 'field-select__approve-button', onClick: handleApplyChange, size: 'l' })] }) })] })] }));
 });

package/dist/cjs/components/MobileFieldSelect/styles.module.css

@@ -53,6 +53,12 @@
 .tagContainer[data-size=l] .contentWrapper{
   gap:var(--space-fields-single-line-container-l-gap, 8px);
 }
+.tagContainer[data-disabled] .tag[data-disabled]{
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.tagContainer[data-disabled] .tag[data-disabled] *{
+  background-color:inherit;
+}
 
 .container{
   position:relative;

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectMultiple.js

@@ -143,6 +143,6 @@ export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
                     }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
                                         selectedItems.map(option => {
                                             var _a;
-                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral' }, option.id));
+                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', className: styles.tag, "data-disabled": disabled || undefined }, option.id));
                                         }), _jsx("div", { className: styles.inputWrapper, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: undefined, value: '', inputMode: 'none', "data-test-id": 'field-select__input', onBlur: handleBlur, className: styles.readonlyCursor, autoFocus: autoFocus }) })] }), _jsxs("div", { className: styles.postfix, children: [postfixButtons, postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] }) }) })), _jsxs(MobileModalCustom, { open: open, onClose: () => handleOpenChange(false), size: searchable ? 'full' : 'auto', children: [rest.label && _jsx(MobileModalCustom.Header, { title: rest.label }), searchable ? listJsx : _jsx(MobileModalCustom.Body, { className: styles.bodyNoPadding, content: listJsx }), _jsx(MobileModalCustom.Footer, { actions: _jsxs("div", { className: styles.footer, children: [_jsxs("div", { className: styles.footerTopLine, children: [_jsx("span", { className: styles.counter, children: `${t('selectedN')}${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0}` }), _jsx(ButtonFunction, { size: 'm', label: t('resetAll'), onClick: onClear, "data-test-id": 'field-select__reset-all-button' })] }), _jsx(ButtonFilled, { fullWidth: true, label: t('select'), "data-test-id": 'field-select__approve-button', onClick: handleApplyChange, size: 'l' })] }) })] })] }));
 });

package/dist/esm/components/MobileFieldSelect/styles.module.css

@@ -53,6 +53,12 @@
 .tagContainer[data-size=l] .contentWrapper{
   gap:var(--space-fields-single-line-container-l-gap, 8px);
 }
+.tagContainer[data-disabled] .tag[data-disabled]{
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.tagContainer[data-disabled] .tag[data-disabled] *{
+  background-color:inherit;
+}
 
 .container{
   position:relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-fields",
   "title": "Mobile Fields",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,7 +42,7 @@
     "@cloud-ru/uikit-product-utils": "8.1.0",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/calendar": "0.13.0",
-    "@snack-uikit/fields": "0.51.12",
+    "@snack-uikit/fields": "0.51.14",
     "@snack-uikit/input-private": "4.8.5",
     "@snack-uikit/list": "0.32.1",
     "@snack-uikit/scroll": "0.10.4",
@@ -62,5 +62,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
+  "gitHead": "629fe2bd96a28ea24b60a04c913fbbe453d104b7"
 }

package/src/components/MobileFieldSelect/MobileFieldSelectMultiple.tsx

@@ -266,6 +266,8 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
                       label={selectedOptionFormatter(option)}
                       key={option.id}
                       appearance={option.appearance ?? 'neutral'}
+                      className={styles.tag}
+                      data-disabled={disabled || undefined}
                     />
                   ))}
 

package/src/components/MobileFieldSelect/styles.module.scss

@@ -40,6 +40,18 @@ $base-min-width: 4px;
       }
     }
   }
+
+  &[data-disabled] {
+    .tag {
+      &[data-disabled] {
+        background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-default);
+
+        * {
+          background-color: inherit;
+        }
+      }
+    }
+  }
 }
 
 .container {