@snack-uikit/fields 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/FieldDate/FieldDate.js +2 -2
- package/dist/components/FieldDecorator/FieldDecorator.js +1 -1
- package/dist/components/FieldDecorator/Footer.js +1 -1
- package/dist/components/FieldDecorator/Header.js +1 -1
- package/dist/components/FieldSecure/FieldSecure.js +1 -1
- package/dist/components/FieldSelect/FieldSelectBase.js +1 -1
- package/dist/components/FieldText/FieldText.js +1 -1
- package/dist/components/FieldTextArea/FieldTextArea.js +1 -1
- package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.js +1 -1
- package/dist/helperComponents/ButtonHideValue/ButtonHideValue.js +1 -1
- package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.10.1 (2023-12-14)
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/calendar@0.6.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/calendar/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/input-private@3.0.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/input-private/CHANGELOG.md)
|
|
13
|
+
* [@snack-uikit/tooltip@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/tooltip/CHANGELOG.md)
|
|
14
|
+
* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
# 0.10.0 (2023-12-14)
|
|
7
21
|
|
|
8
22
|
|
|
@@ -138,10 +138,10 @@ export const FieldDate = forwardRef((_a, ref) => {
|
|
|
138
138
|
: {
|
|
139
139
|
open: showDropList,
|
|
140
140
|
onOpenChange: setIsOpen,
|
|
141
|
-
}), { content: _jsx("div",
|
|
141
|
+
}), { content: _jsx("div", { className: styles.calendarWrapper, "data-size": size, children: _jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, navigationStartRef: element => {
|
|
142
142
|
if (pickerAutofocus) {
|
|
143
143
|
element === null || element === void 0 ? void 0 : element.focus();
|
|
144
144
|
setPickerAutofocus(false);
|
|
145
145
|
}
|
|
146
|
-
}, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) })
|
|
146
|
+
}, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(CalendarSVG, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
|
|
147
147
|
});
|
|
@@ -20,5 +20,5 @@ import styles from './styles.module.css';
|
|
|
20
20
|
export function FieldDecorator(_a) {
|
|
21
21
|
var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "validationState"]);
|
|
22
22
|
const isFieldActive = !disabled && !readonly;
|
|
23
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size
|
|
23
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? validationState : VALIDATION_STATE.Default })] })));
|
|
24
24
|
}
|
|
@@ -35,5 +35,5 @@ export function Footer({ length, hint, size, validationState = VALIDATION_STATE.
|
|
|
35
35
|
if (!hint && !length) {
|
|
36
36
|
return null;
|
|
37
37
|
}
|
|
38
|
-
return (_jsxs("span",
|
|
38
|
+
return (_jsxs("span", { className: styles.footer, "data-reverse": isReverseContainer || undefined, "data-size": size, children: [hint && (_jsxs("span", { className: styles.hintLayout, children: [icon && (_jsx("span", { className: styles.hintIconContainer, "data-size": size, children: icon })), _jsx("span", { className: styles.hint, "data-validation": validationState, "data-test-id": 'field-decorator__hint', children: hint })] })), length && (_jsxs("span", { "data-test-id": 'field-decorator__counter', className: styles.counterLimit, children: [_jsx("span", { "data-validation": validationState, "data-limit-exceeded": limitExceeded || undefined, className: styles.counterCurrentValue, "data-test-id": 'field-decorator__counter-current-value', children: length.current }), _jsxs("span", { "data-validation": validationState, "data-limit-exceeded": limitExceeded || undefined, "data-test-id": 'field-decorator__counter-limit-value', children: ["/", length.max] })] }))] }));
|
|
39
39
|
}
|
|
@@ -4,5 +4,5 @@ import { Tooltip } from '@snack-uikit/tooltip';
|
|
|
4
4
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
5
5
|
import styles from './styles.module.css';
|
|
6
6
|
export function Header({ label = '', labelTooltip, labelFor, size, required = false, labelTooltipPlacement = 'top', }) {
|
|
7
|
-
return (_jsx("span",
|
|
7
|
+
return (_jsx("span", { className: styles.header, "data-size": size, children: label && (_jsxs("span", { className: styles.labelLayout, children: [_jsx("label", { className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label', children: _jsx(TruncateString, { text: label }) }), required && _jsx("span", { "data-test-id": 'field-decorator__required-sign', children: "*" }), labelTooltip && (_jsx(Tooltip, { tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip', children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) }))] })) }));
|
|
8
8
|
}
|
|
@@ -46,5 +46,5 @@ export const FieldSecure = forwardRef((_a, ref) => {
|
|
|
46
46
|
readonly,
|
|
47
47
|
submitKeys: ['Enter', 'Space', 'Tab'],
|
|
48
48
|
});
|
|
49
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate,
|
|
49
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
|
|
50
50
|
});
|
|
@@ -47,5 +47,5 @@ export const FieldSelectBase = forwardRef((_a, ref) => {
|
|
|
47
47
|
},
|
|
48
48
|
onDroplistFocusLeave,
|
|
49
49
|
]);
|
|
50
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate,
|
|
50
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", { className: styles.displayValue, "data-test-id": 'field-select__displayed-value', children: displayedValue }))] }), children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
|
|
51
51
|
});
|
|
@@ -43,5 +43,5 @@ export const FieldText = forwardRef((_a, ref) => {
|
|
|
43
43
|
readonly,
|
|
44
44
|
submitKeys: ['Enter', 'Space', 'Tab'],
|
|
45
45
|
});
|
|
46
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate,
|
|
46
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) }) })));
|
|
47
47
|
});
|
|
@@ -45,5 +45,5 @@ export const FieldTextArea = forwardRef((_a, ref) => {
|
|
|
45
45
|
readonly,
|
|
46
46
|
submitKeys: ['Enter', 'Space', 'Tab'],
|
|
47
47
|
});
|
|
48
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate,
|
|
48
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
|
|
49
49
|
});
|
|
@@ -20,5 +20,5 @@ export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, o
|
|
|
20
20
|
closeTooltip();
|
|
21
21
|
clearTimeout(timerId.current);
|
|
22
22
|
}, []);
|
|
23
|
-
return (_jsx("button",
|
|
23
|
+
return (_jsx("button", { className: styles.buttonCopyValue, "data-size": size, onClick: handleClick, "data-test-id": 'button-copy-value', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, type: 'button', children: getIcon({ size, isChecked }) }));
|
|
24
24
|
});
|
|
@@ -11,5 +11,5 @@ export const ButtonHideValue = forwardRef(({ size, onClick, hidden, disabled, ta
|
|
|
11
11
|
event.stopPropagation();
|
|
12
12
|
onClick(event);
|
|
13
13
|
};
|
|
14
|
-
return (_jsx("button",
|
|
14
|
+
return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) }));
|
|
15
15
|
});
|
|
@@ -23,5 +23,5 @@ export function FieldContainerPrivate(_a) {
|
|
|
23
23
|
}
|
|
24
24
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, onMouseDown: onMouseDown, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span",
|
|
26
|
+
return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, onMouseDown: onMouseDown, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span", { className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon', children: prefix })), children, postfix && _jsx("span", { className: styles.postfix, children: postfix })] })));
|
|
27
27
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Fields",
|
|
7
|
-
"version": "0.10.
|
|
7
|
+
"version": "0.10.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/calendar": "0.6.
|
|
36
|
-
"@snack-uikit/droplist": "0.12.
|
|
37
|
-
"@snack-uikit/icons": "0.19.
|
|
38
|
-
"@snack-uikit/input-private": "3.0.
|
|
35
|
+
"@snack-uikit/calendar": "0.6.1",
|
|
36
|
+
"@snack-uikit/droplist": "0.12.1",
|
|
37
|
+
"@snack-uikit/icons": "0.19.1",
|
|
38
|
+
"@snack-uikit/input-private": "3.0.1",
|
|
39
39
|
"@snack-uikit/scroll": "0.5.0",
|
|
40
|
-
"@snack-uikit/tooltip": "0.10.
|
|
41
|
-
"@snack-uikit/truncate-string": "0.4.
|
|
40
|
+
"@snack-uikit/tooltip": "0.10.1",
|
|
41
|
+
"@snack-uikit/truncate-string": "0.4.1",
|
|
42
42
|
"@snack-uikit/utils": "3.2.0",
|
|
43
43
|
"classnames": "2.3.2",
|
|
44
44
|
"copy-to-clipboard": "3.3.3",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/merge-refs": "1.0.0"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
|
|
53
53
|
}
|