@cloud-ru/ds-fields 2.2.7-preview-d50a3da1.0 → 2.2.7-preview-e30f4f90.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/README.md +0 -1
- package/dist/cjs/components/FieldColor/FieldColor.js +1 -1
- package/dist/cjs/components/FieldColor/styles.module.css +9 -9
- package/dist/cjs/components/FieldCombo/FieldCombo.js +1 -1
- package/dist/cjs/components/FieldDate/styles.module.css +3 -3
- package/dist/cjs/components/FieldSecure/FieldSecure.js +1 -1
- package/dist/cjs/components/FieldSelect/FieldSelect.js +2 -2
- package/dist/cjs/components/FieldSelect/styles.module.css +18 -15
- package/dist/cjs/components/FieldSelect/types.d.ts +1 -1
- package/dist/cjs/components/FieldSlider/FieldSlider.js +1 -1
- package/dist/cjs/components/FieldSlider/styles.module.css +7 -0
- package/dist/cjs/components/FieldStepper/FieldStepper.js +2 -2
- package/dist/cjs/components/FieldStepper/styles.module.css +52 -6
- package/dist/cjs/components/FieldTextArea/FieldTextArea.js +1 -1
- package/dist/cjs/components/FieldTextArea/styles.module.css +36 -39
- package/dist/cjs/components/FieldTime/FieldTime.js +1 -1
- package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
- package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
- package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
- package/dist/cjs/components/shared/styles.module.css +124 -151
- package/dist/cjs/style.css +271 -245
- package/dist/esm/components/FieldColor/FieldColor.js +1 -1
- package/dist/esm/components/FieldColor/styles.module.css +9 -9
- package/dist/esm/components/FieldCombo/FieldCombo.js +1 -1
- package/dist/esm/components/FieldDate/styles.module.css +3 -3
- package/dist/esm/components/FieldSecure/FieldSecure.js +1 -1
- package/dist/esm/components/FieldSelect/FieldSelect.js +2 -2
- package/dist/esm/components/FieldSelect/styles.module.css +18 -15
- package/dist/esm/components/FieldSelect/types.d.ts +1 -1
- package/dist/esm/components/FieldSlider/FieldSlider.js +2 -2
- package/dist/esm/components/FieldSlider/styles.module.css +7 -0
- package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
- package/dist/esm/components/FieldStepper/styles.module.css +52 -6
- package/dist/esm/components/FieldTextArea/FieldTextArea.js +1 -1
- package/dist/esm/components/FieldTextArea/styles.module.css +36 -39
- package/dist/esm/components/FieldTime/FieldTime.js +1 -1
- package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
- package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
- package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
- package/dist/esm/components/shared/styles.module.css +124 -151
- package/dist/esm/style.css +271 -245
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +17 -17
- package/src/components/FieldColor/FieldColor.tsx +1 -1
- package/src/components/FieldColor/styles.module.scss +7 -5
- package/src/components/FieldCombo/FieldCombo.tsx +1 -1
- package/src/components/FieldDate/styles.module.scss +1 -1
- package/src/components/FieldSecure/FieldSecure.tsx +1 -2
- package/src/components/FieldSelect/FieldSelect.tsx +0 -2
- package/src/components/FieldSelect/styles.module.scss +5 -7
- package/src/components/FieldSelect/types.ts +0 -1
- package/src/components/FieldSlider/FieldSlider.tsx +3 -3
- package/src/components/FieldSlider/styles.module.scss +8 -0
- package/src/components/FieldStepper/FieldStepper.tsx +41 -46
- package/src/components/FieldStepper/styles.module.scss +60 -10
- package/src/components/FieldTextArea/FieldTextArea.tsx +1 -2
- package/src/components/FieldTextArea/styles.module.scss +22 -33
- package/src/components/FieldTime/FieldTime.tsx +1 -1
- package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss +2 -2
- package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx +0 -4
- package/src/components/shared/styles.module.scss +17 -58
package/README.md
CHANGED
|
@@ -455,7 +455,6 @@ export function Select() {
|
|
|
455
455
|
| `fieldClassName` | `string` | — | CSS-класс оболочки поля |
|
|
456
456
|
| `footer` | `ReactNode ;` | — | Кастомизируемый элемент в конце списка |
|
|
457
457
|
| `footerActiveElementsRefs` | `RefObject<HTMLElement>[]` | — | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
|
|
458
|
-
| `footerDivider` | `boolean` | — | Показывать divider между body и footer (Figma `dropdownContainer.dividerWrapper` снизу) |
|
|
459
458
|
| `formatSelected` | `((selected: { id: ItemId; label: string; }[]) => string)` | `— список лейблов через `, `` | Форматтер строки выбранных значений (используется, если `chips=false`). |
|
|
460
459
|
| `hint` | `string` | — | Подсказка |
|
|
461
460
|
| `iconBefore` | `ReactNode` | — | Иконка перед текстом |
|
|
@@ -139,7 +139,7 @@ exports.FieldColor = (0, react_1.forwardRef)(function FieldColor({ label = '', l
|
|
|
139
139
|
readonly: readOnly,
|
|
140
140
|
hover,
|
|
141
141
|
focusVisible: focusVisible || showOpen,
|
|
142
|
-
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.swatch, "data-test-id": constants_1.TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), (0, jsx_runtime_1.
|
|
142
|
+
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.swatch, "data-test-id": constants_1.TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholder, autoFocus: resolvedAutoFocus, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldColorInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-test-id": constants_1.TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
|
|
143
143
|
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { trigger: 'click', widthStrategy: 'auto', open: showOpen, onOpenChange: handleOpenChange, headerDivider: mobile, footerDivider: mobile, title: mobile ? ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_2.default.sheetTitle, "data-test-id": constants_1.TEST_IDS.fieldColorSheetTitle, children: [(draft || '').toUpperCase(), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.sheetSwatch, style: { '--field-color-swatch-color': draft || 'transparent' }, "aria-hidden": true })] })) : undefined, footer: mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.sheetFooter, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: t('cancel'), size: size, view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, onClick: handleMobileCancel, "data-test-id": constants_1.TEST_IDS.fieldColorCancel }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: t('apply'), size: size, view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Primary, onClick: handleMobileApply, "data-test-id": constants_1.TEST_IDS.fieldColorApply })] })) : undefined, content:
|
|
144
144
|
// На mobile палитра живёт в `BottomSheet`: помечаем её no-drag, иначе drag по слайдеру/области
|
|
145
145
|
// цвета одновременно потащил бы sheet к закрытию (свайп-дисмисс перехватывал бы жест контрола).
|
|
@@ -26,21 +26,21 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.trigger[data-size=s] .swatch{
|
|
29
|
-
width:var(--sn-colorPicker-anatomy-size-
|
|
30
|
-
height:var(--sn-colorPicker-anatomy-size-
|
|
31
|
-
border-radius:var(--sn-colorPicker-anatomy-size-
|
|
29
|
+
width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
|
|
30
|
+
height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
|
|
31
|
+
border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.trigger[data-size=m] .swatch{
|
|
35
|
-
width:var(--sn-colorPicker-anatomy-size-
|
|
36
|
-
height:var(--sn-colorPicker-anatomy-size-
|
|
37
|
-
border-radius:var(--sn-colorPicker-anatomy-size-
|
|
35
|
+
width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
|
|
36
|
+
height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
|
|
37
|
+
border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.trigger[data-size=l] .swatch{
|
|
41
|
-
width:var(--sn-colorPicker-anatomy-size-
|
|
42
|
-
height:var(--sn-colorPicker-anatomy-size-
|
|
43
|
-
border-radius:var(--sn-colorPicker-anatomy-size-
|
|
41
|
+
width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
|
|
42
|
+
height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
|
|
43
|
+
border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.sheetTitle{
|
|
@@ -195,6 +195,6 @@ exports.FieldCombo = (0, react_1.forwardRef)(function FieldCombo({ label = '', l
|
|
|
195
195
|
readonly: readOnly,
|
|
196
196
|
hover,
|
|
197
197
|
focusVisible,
|
|
198
|
-
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), elementBefore && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.
|
|
198
|
+
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), elementBefore && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: onChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, maxLength: effectiveMaxLength, onFocus: handleFocus, onBlur: handleBlur, ...restInputProps, autoFocus: resolvedAutoFocus, "data-test-id": innerTestIds?.input ?? constants_1.TEST_IDS.fieldComboInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), iconAfter && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconAfter })] }) }), elementAfter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
|
|
199
199
|
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: effectiveLength, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
|
|
200
200
|
});
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
min-width:0;
|
|
19
19
|
}
|
|
20
20
|
[data-size=s] .rangeInputs{
|
|
21
|
-
gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-
|
|
21
|
+
gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
|
|
22
22
|
}
|
|
23
23
|
[data-size=m] .rangeInputs{
|
|
24
|
-
gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-
|
|
24
|
+
gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
|
|
25
25
|
}
|
|
26
26
|
[data-size=l] .rangeInputs{
|
|
27
|
-
gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-
|
|
27
|
+
gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.rangeInputFrom{
|
|
@@ -150,7 +150,7 @@ exports.FieldSecure = (0, react_1.forwardRef)(function FieldSecure({ label = '',
|
|
|
150
150
|
readonly: readOnly,
|
|
151
151
|
hover,
|
|
152
152
|
focusVisible,
|
|
153
|
-
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [prefixIcon && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: prefixIcon }), (0, jsx_runtime_1.
|
|
153
|
+
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [prefixIcon && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: prefixIcon }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { skeleton: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: '100%', borderRadius: 2, "data-test-id": constants_1.TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? input_private_1.TYPE.Password : input_private_1.TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldSecureInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) })] }) }), showHideUi && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": true, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), (0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { ref: hideButtonRef, variant: 'after', size: size, action: hidden ? (0, jsx_runtime_1.jsx)(system_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled,
|
|
154
154
|
// Roving-композит (легаси: обе кнопки в postfixButtons useButtonNavigation):
|
|
155
155
|
// Tab уходит из поля целиком, по кнопкам (copy → глаз) ходят стрелки.
|
|
156
156
|
tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSecureHideButton })] }))] }));
|
|
@@ -23,7 +23,7 @@ const styles_module_scss_1 = __importDefault(require('../shared/styles.module.cs
|
|
|
23
23
|
const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
|
|
24
24
|
const utils_2 = require("./utils");
|
|
25
25
|
exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
|
|
26
|
-
const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer,
|
|
26
|
+
const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldSelect, } = props;
|
|
27
27
|
const multiple = (0, utils_2.isMultiple)(props);
|
|
28
28
|
const chips = multiple ? (props.chips ?? true) : false;
|
|
29
29
|
const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
|
|
@@ -377,5 +377,5 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
|
|
|
377
377
|
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), hasChips ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.chipsRow, ref: contentRef, "data-test-id": constants_1.TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { label: formatPair(pair), size: utils_2.TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, (0, jsx_runtime_1.jsx)("span", { ref: inputPlugRef, className: styles_module_scss_2.default.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
|
|
378
378
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
379
379
|
(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, onMouseDown: shared_1.preventSlotMouseDown, onClick: shared_1.stopSlotClickPropagation, children: postfixButtons })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-open": open || undefined, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
|
|
380
|
-
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer,
|
|
380
|
+
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
|
|
381
381
|
});
|
|
@@ -32,16 +32,19 @@
|
|
|
32
32
|
min-width:0;
|
|
33
33
|
}
|
|
34
34
|
[data-size=s] .chipsRow{
|
|
35
|
-
gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-
|
|
36
|
-
padding:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-
|
|
35
|
+
gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
|
|
36
|
+
padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
|
|
37
|
+
padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
|
|
37
38
|
}
|
|
38
39
|
[data-size=m] .chipsRow{
|
|
39
|
-
gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-
|
|
40
|
-
padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-
|
|
40
|
+
gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
|
|
41
|
+
padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
|
|
42
|
+
padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
|
|
41
43
|
}
|
|
42
44
|
[data-size=l] .chipsRow{
|
|
43
|
-
gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-
|
|
44
|
-
padding:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-
|
|
45
|
+
gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
|
|
46
|
+
padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
|
|
47
|
+
padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
.inputWrapper{
|
|
@@ -64,26 +67,26 @@
|
|
|
64
67
|
white-space:pre;
|
|
65
68
|
}
|
|
66
69
|
[data-size=s] .inputPlug{
|
|
67
|
-
font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
|
|
70
|
+
font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
68
71
|
font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
69
|
-
line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
70
|
-
font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-
|
|
72
|
+
line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
73
|
+
font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
|
|
71
74
|
letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
72
75
|
paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
|
|
73
76
|
}
|
|
74
77
|
[data-size=m] .inputPlug{
|
|
75
|
-
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
|
|
78
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
76
79
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
77
|
-
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
78
|
-
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
80
|
+
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
81
|
+
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
79
82
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
80
83
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
81
84
|
}
|
|
82
85
|
[data-size=l] .inputPlug{
|
|
83
|
-
font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
|
|
86
|
+
font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
84
87
|
font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
85
|
-
line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-
|
|
86
|
-
font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-
|
|
88
|
+
line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
89
|
+
font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
|
|
87
90
|
letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
88
91
|
paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
|
|
89
92
|
}
|
|
@@ -18,7 +18,7 @@ type WithTagAppearance<T> = T extends {
|
|
|
18
18
|
/** Айтем дроплиста: айтем `@cloud-ru/ds-list` плюс `appearance` — цвет тега выбранного значения при `selection='multiple'`. */
|
|
19
19
|
export type FieldSelectItem = WithTagAppearance<ItemProps>;
|
|
20
20
|
type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
|
|
21
|
-
type DroplistPassthrough = Pick<DroplistProps, 'footer' | '
|
|
21
|
+
type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
|
|
22
22
|
/**
|
|
23
23
|
* Флаг «ошибка загрузки данных» — при `true` дроплист рендерит `errorDataState`
|
|
24
24
|
* вместо списка (для асинхронной подгрузки с провалившимся запросом).
|
|
@@ -191,6 +191,6 @@ exports.FieldSlider = (0, react_1.forwardRef)(function FieldSlider({ label = '',
|
|
|
191
191
|
readonly: readOnly,
|
|
192
192
|
hover,
|
|
193
193
|
focusVisible,
|
|
194
|
-
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, type: input_private_1.TYPE.Text, inputMode: input_private_1.INPUT_MODE.Numeric, disabled: disabled, readonly: range || readOnly, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldSliderInput, ...(0, utils_1.extractSupportProps)(rest) }) }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className:
|
|
194
|
+
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, type: input_private_1.TYPE.Text, inputMode: input_private_1.INPUT_MODE.Numeric, disabled: disabled, readonly: range || readOnly, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldSliderInput, ...(0, utils_1.extractSupportProps)(rest) }) }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: size, icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSliderCopyButton }) })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix }), postfixIcon && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixIcon, children: postfixIcon })] }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.sliderWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.slider, children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { range: range, min: min, max: max, step: step, value: value, onChange: handleSliderChange, marks: showScaleBar ? marks : undefined, marksEqualSpacing: marksEqualSpacing, disabled: readOnly || disabled, "data-test-id": constants_1.TEST_IDS.fieldSliderHandle }) }) })] }));
|
|
195
195
|
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
|
|
196
196
|
});
|
|
@@ -34,4 +34,11 @@
|
|
|
34
34
|
align-items:center;
|
|
35
35
|
justify-content:center;
|
|
36
36
|
color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.copyButton{
|
|
40
|
+
display:flex;
|
|
41
|
+
flex-shrink:0;
|
|
42
|
+
align-items:center;
|
|
43
|
+
justify-content:center;
|
|
37
44
|
}
|
|
@@ -103,7 +103,7 @@ exports.FieldStepper = (0, react_1.forwardRef)(function FieldStepper({ label = '
|
|
|
103
103
|
}, [onFocus]);
|
|
104
104
|
// Ширина инпута по числу символов значения (минимум 2ch), задаётся через `ch`-юниты в CSS-переменной —
|
|
105
105
|
// без px-хардкода и подгонки под ширину глифа.
|
|
106
|
-
const inputWidthCh = Math.max(
|
|
106
|
+
const inputWidthCh = Math.max(2, String(value).length);
|
|
107
107
|
const handleMouseEnter = (0, react_1.useCallback)(() => {
|
|
108
108
|
if (!readOnly) {
|
|
109
109
|
setHover(true);
|
|
@@ -155,6 +155,6 @@ exports.FieldStepper = (0, react_1.forwardRef)(function FieldStepper({ label = '
|
|
|
155
155
|
readonly: readOnly,
|
|
156
156
|
hover,
|
|
157
157
|
focusVisible,
|
|
158
|
-
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderStepButton('minus'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className:
|
|
158
|
+
}), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderStepButton('minus'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.valueArea, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, styles_module_scss_2.default.input), value: String(value), type: input_private_1.TYPE.Number, disabled: disabled, readonly: readOnly, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: id, name: name, min: min, max: max, step: step, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldStepperInput, ...(0, utils_1.extractSupportProps)(rest) }) }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: postfix })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: input_private_1.BUTTON_SIZE_MAP[size], icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldStepperCopyButton }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
|
|
159
159
|
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: effectiveValidationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: clampTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: clampTooltip, open: true, "data-test-id": constants_1.TEST_IDS.fieldStepperLimitTooltip, children: shell })) : (shell) }));
|
|
160
160
|
});
|
|
@@ -4,29 +4,75 @@
|
|
|
4
4
|
height:100%;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.
|
|
8
|
-
|
|
7
|
+
.copyButton{
|
|
8
|
+
display:flex;
|
|
9
|
+
align-items:center;
|
|
10
|
+
height:100%;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
.
|
|
12
|
-
flex
|
|
13
|
+
.valueArea{
|
|
14
|
+
display:flex;
|
|
15
|
+
flex:1 1 auto;
|
|
16
|
+
align-items:baseline;
|
|
17
|
+
justify-content:center;
|
|
18
|
+
min-width:0;
|
|
19
|
+
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
|
|
20
|
+
text-align:center;
|
|
21
|
+
}
|
|
22
|
+
[data-size=s] .valueArea{
|
|
23
|
+
gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
|
|
24
|
+
}
|
|
25
|
+
[data-size=m] .valueArea{
|
|
26
|
+
gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
|
|
27
|
+
}
|
|
28
|
+
[data-size=l] .valueArea{
|
|
29
|
+
gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
|
|
13
30
|
}
|
|
14
31
|
|
|
15
32
|
.inputWrapper{
|
|
16
33
|
display:flex;
|
|
17
34
|
flex:0 0 auto;
|
|
35
|
+
width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
|
|
18
36
|
max-width:100%;
|
|
19
37
|
}
|
|
20
38
|
|
|
21
39
|
.input{
|
|
22
40
|
flex:0 0 auto;
|
|
23
|
-
width:
|
|
41
|
+
width:100%;
|
|
24
42
|
min-width:1ch;
|
|
25
|
-
max-width:100%;
|
|
26
43
|
text-align:center;
|
|
27
44
|
-moz-appearance:textfield;
|
|
28
45
|
}
|
|
29
46
|
.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button{
|
|
30
47
|
margin:0;
|
|
31
48
|
-webkit-appearance:none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.affix{
|
|
52
|
+
flex-shrink:0;
|
|
53
|
+
color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
|
|
54
|
+
}
|
|
55
|
+
[data-size=s] .affix{
|
|
56
|
+
font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
57
|
+
font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
58
|
+
line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
59
|
+
font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
|
|
60
|
+
letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
61
|
+
paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
|
|
62
|
+
}
|
|
63
|
+
[data-size=m] .affix{
|
|
64
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
65
|
+
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
66
|
+
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
67
|
+
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
68
|
+
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
69
|
+
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
70
|
+
}
|
|
71
|
+
[data-size=l] .affix{
|
|
72
|
+
font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
73
|
+
font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
74
|
+
line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
75
|
+
font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
|
|
76
|
+
letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
77
|
+
paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
|
|
32
78
|
}
|
|
@@ -114,6 +114,6 @@ exports.FieldTextArea = (0, react_1.forwardRef)(function FieldTextArea({ label =
|
|
|
114
114
|
const handleMouseLeave = (0, react_1.useCallback)(() => {
|
|
115
115
|
setHover(false);
|
|
116
116
|
}, []);
|
|
117
|
-
const shell = ((0, jsx_runtime_1.jsx)(shared_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.fieldTextAreaShell, className: fieldClassName, size: size, validationState: effectiveValidationState, disabled: disabled, readonly: readOnly, background: background, focusVisible: focusVisible, hover: hover, header: header, footer: footer,
|
|
117
|
+
const shell = ((0, jsx_runtime_1.jsx)(shared_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.fieldTextAreaShell, className: fieldClassName, size: size, validationState: effectiveValidationState, disabled: disabled, readonly: readOnly, background: background, focusVisible: focusVisible, hover: hover, header: header, footer: footer, style: { '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.contentWrapper, styles_module_scss_2.default.contentArea), onClick: handleContentClick, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: (0, classnames_1.default)(styles_module_scss_2.default.scrollContainer, { [styles_module_scss_2.default.scrollContainerResizable]: isResizable }), size: scroll_1.SIZE.S, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Never, resize: isResizable ? scroll_1.RESIZE.Vertical : scroll_1.RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": constants_1.TEST_IDS.fieldTextAreaScrollArea, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_2.default.textarea, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, id: id, name: name, maxLength: allowMoreThanMaxLength ? undefined : maxLength, autoFocus: resolvedAutoFocus, inputMode: inputMode, spellCheck: spellCheck, minRows: minRows, tabIndex: inputTabIndex, "data-test-id": constants_1.TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...(0, utils_1.extractSupportProps)(rest) }) }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixColumn, children: postfixButtons })] }) }));
|
|
118
118
|
return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined), required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
|
|
119
119
|
});
|
|
@@ -5,16 +5,13 @@
|
|
|
5
5
|
max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
|
|
6
6
|
}
|
|
7
7
|
[data-size=s] .scrollContainer{
|
|
8
|
-
--field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
9
|
-
margin-right:calc(-1 * var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))));
|
|
8
|
+
--field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
10
9
|
}
|
|
11
10
|
[data-size=m] .scrollContainer{
|
|
12
|
-
--field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
13
|
-
margin-right:calc(-1 * var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))));
|
|
11
|
+
--field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
14
12
|
}
|
|
15
13
|
[data-size=l] .scrollContainer{
|
|
16
|
-
--field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-
|
|
17
|
-
margin-right:calc(-1 * var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))));
|
|
14
|
+
--field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
.scrollContainerResizable{
|
|
@@ -53,29 +50,32 @@
|
|
|
53
50
|
color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
|
|
54
51
|
}
|
|
55
52
|
[data-size=s] .textarea{
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
|
|
54
|
+
padding-right:calc(var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
|
|
55
|
+
font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
58
56
|
font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
59
|
-
line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
60
|
-
font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-
|
|
57
|
+
line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
58
|
+
font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
|
|
61
59
|
letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
62
60
|
paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
|
|
63
61
|
}
|
|
64
62
|
[data-size=m] .textarea{
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
|
|
64
|
+
padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
|
|
65
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
67
66
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
68
|
-
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
69
|
-
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
67
|
+
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
68
|
+
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
70
69
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
71
70
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
72
71
|
}
|
|
73
72
|
[data-size=l] .textarea{
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
|
|
74
|
+
padding-right:calc(var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
|
|
75
|
+
font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
76
76
|
font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
77
|
-
line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-
|
|
78
|
-
font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-
|
|
77
|
+
line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
78
|
+
font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
|
|
79
79
|
letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
80
80
|
paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
|
|
81
81
|
}
|
|
@@ -84,16 +84,16 @@
|
|
|
84
84
|
position:relative;
|
|
85
85
|
}
|
|
86
86
|
[data-size=s] .contentArea{
|
|
87
|
-
padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-
|
|
88
|
-
padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-
|
|
87
|
+
padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
|
|
88
|
+
padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
|
|
89
89
|
}
|
|
90
90
|
[data-size=m] .contentArea{
|
|
91
|
-
padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-
|
|
92
|
-
padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-
|
|
91
|
+
padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
|
|
92
|
+
padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
|
|
93
93
|
}
|
|
94
94
|
[data-size=l] .contentArea{
|
|
95
|
-
padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-
|
|
96
|
-
padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-
|
|
95
|
+
padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
|
|
96
|
+
padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.postfixColumn{
|
|
@@ -104,23 +104,20 @@
|
|
|
104
104
|
place-items:center center;
|
|
105
105
|
}
|
|
106
106
|
[data-size=s] .postfixColumn{
|
|
107
|
-
--sn-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
|
|
107
|
+
top:calc(var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)))) / 2);
|
|
108
|
+
right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
|
|
109
|
+
grid-auto-rows:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
110
|
+
width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
|
|
112
111
|
}
|
|
113
112
|
[data-size=m] .postfixColumn{
|
|
114
|
-
--sn-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
|
|
113
|
+
top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
|
|
114
|
+
right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
|
|
115
|
+
grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
116
|
+
width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
119
117
|
}
|
|
120
118
|
[data-size=l] .postfixColumn{
|
|
121
|
-
--sn-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
|
|
119
|
+
top:calc(var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)))) / 2);
|
|
120
|
+
right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
|
|
121
|
+
grid-auto-rows:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
122
|
+
width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
126
123
|
}
|