@snack-uikit/toggles 0.12.1-preview-2e497be2.0 → 0.12.1-preview-eda282a2.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 +1 -1
- package/dist/cjs/components/Favorite/Favorite.d.ts +2 -2
- package/dist/cjs/components/Favorite/Favorite.js +3 -3
- package/dist/cjs/components/TogglePrivate/TogglePrivate.d.ts +1 -1
- package/dist/cjs/components/TogglePrivate/TogglePrivate.js +3 -3
- package/dist/cjs/types.d.ts +1 -1
- package/dist/esm/components/Favorite/Favorite.d.ts +2 -2
- package/dist/esm/components/Favorite/Favorite.js +2 -2
- package/dist/esm/components/TogglePrivate/TogglePrivate.d.ts +1 -1
- package/dist/esm/components/TogglePrivate/TogglePrivate.js +2 -2
- package/dist/esm/types.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/Favorite/Favorite.tsx +3 -3
- package/src/components/TogglePrivate/TogglePrivate.tsx +2 -2
- package/src/types.ts +1 -1
package/README.md
CHANGED
|
@@ -152,7 +152,7 @@ return (
|
|
|
152
152
|
| size | enum Size: `"s"`, `"m"` | m | Размер |
|
|
153
153
|
| inputRef | `RefObject<HTMLInputElement>` | - | |
|
|
154
154
|
| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
|
|
155
|
-
|
|
|
155
|
+
| onKeyUp | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
|
|
156
156
|
## ToggleGroup
|
|
157
157
|
### Props
|
|
158
158
|
| name | type | default value | description |
|
|
@@ -4,6 +4,6 @@ export type FavoriteProps = ToggleProps & {
|
|
|
4
4
|
/** Иконка */
|
|
5
5
|
icon?: FavoriteIcon;
|
|
6
6
|
/** Колбек нажатия клавиши клавиатуры */
|
|
7
|
-
|
|
7
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
8
8
|
};
|
|
9
|
-
export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon,
|
|
9
|
+
export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyUp, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -38,15 +38,15 @@ function Favorite(_a) {
|
|
|
38
38
|
'data-test-id': dataTestId,
|
|
39
39
|
size = constants_1.SIZE.M,
|
|
40
40
|
icon = constants_1.FAVORITE_ICON.Heart,
|
|
41
|
-
|
|
41
|
+
onKeyUp
|
|
42
42
|
} = _a,
|
|
43
|
-
restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "
|
|
43
|
+
restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyUp"]);
|
|
44
44
|
const iconSize = (0, react_1.useMemo)(() => (0, utils_1.getIconSize)(size), [size]);
|
|
45
45
|
return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
|
|
46
46
|
"data-test-id": dataTestId,
|
|
47
47
|
ref: inputRef,
|
|
48
48
|
size: size,
|
|
49
|
-
|
|
49
|
+
onKeyUp: onKeyUp,
|
|
50
50
|
render: function Favorite(visualState) {
|
|
51
51
|
const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
|
|
52
52
|
const data = (0, utils_1.getVisualStateAttributes)(Object.assign(Object.assign({}, visualState), {
|
|
@@ -17,5 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
|
|
|
17
17
|
onClick?: import("react").MouseEventHandler<HTMLInputElement>;
|
|
18
18
|
onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
|
|
19
19
|
onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
|
|
20
|
-
|
|
20
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
|
|
21
21
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -36,10 +36,10 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
|
|
|
36
36
|
className,
|
|
37
37
|
size = constants_1.SIZE.M,
|
|
38
38
|
mode = constants_1.MODE.Checkbox,
|
|
39
|
-
|
|
39
|
+
onKeyUp,
|
|
40
40
|
'data-test-id': testId
|
|
41
41
|
} = _a,
|
|
42
|
-
otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "
|
|
42
|
+
otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyUp", 'data-test-id']);
|
|
43
43
|
const [checked, setChecked] = (0, uncontrollable_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChange);
|
|
44
44
|
const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
|
|
45
45
|
const [hover, setHover] = (0, react_1.useState)(false);
|
|
@@ -57,7 +57,7 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
|
|
|
57
57
|
"data-test-id": testId,
|
|
58
58
|
onMouseEnter: () => setHover(true),
|
|
59
59
|
onMouseLeave: () => setHover(false),
|
|
60
|
-
|
|
60
|
+
onKeyUp: onKeyUp
|
|
61
61
|
}, (0, utils_1.getVisualStateAttributes)(visualState), {
|
|
62
62
|
children: [render(visualState), (0, jsx_runtime_1.jsx)("input", Object.assign({}, otherProps, {
|
|
63
63
|
"data-test-id": `${testId}-native-input`,
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -46,7 +46,7 @@ export type TogglePrivateProps = WithSupportProps<{
|
|
|
46
46
|
/** Колбек приобретения фокуса */
|
|
47
47
|
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
48
48
|
/** Колбек нажатия клавиши клавиатуры */
|
|
49
|
-
|
|
49
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
50
50
|
}>;
|
|
51
51
|
export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
|
|
52
52
|
inputRef?: RefObject<HTMLInputElement>;
|
|
@@ -4,6 +4,6 @@ export type FavoriteProps = ToggleProps & {
|
|
|
4
4
|
/** Иконка */
|
|
5
5
|
icon?: FavoriteIcon;
|
|
6
6
|
/** Колбек нажатия клавиши клавиатуры */
|
|
7
|
-
|
|
7
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
8
8
|
};
|
|
9
|
-
export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon,
|
|
9
|
+
export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyUp, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -25,9 +25,9 @@ const UNCHECKED_ICONS = {
|
|
|
25
25
|
[FAVORITE_ICON.Heart]: HeartSVG,
|
|
26
26
|
};
|
|
27
27
|
export function Favorite(_a) {
|
|
28
|
-
var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.Heart,
|
|
28
|
+
var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.Heart, onKeyUp } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyUp"]);
|
|
29
29
|
const iconSize = useMemo(() => getIconSize(size), [size]);
|
|
30
|
-
return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size,
|
|
30
|
+
return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, onKeyUp: onKeyUp, render: function Favorite(visualState) {
|
|
31
31
|
const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
|
|
32
32
|
const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { icon }));
|
|
33
33
|
return (_jsx("div", Object.assign({ className: styles.container }, data, { children: _jsx(Icon, Object.assign({ className: styles.icon }, data, { size: iconSize })) })));
|
|
@@ -17,5 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
|
|
|
17
17
|
onClick?: import("react").MouseEventHandler<HTMLInputElement>;
|
|
18
18
|
onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
|
|
19
19
|
onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
|
|
20
|
-
|
|
20
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
|
|
21
21
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -17,7 +17,7 @@ import { MODE, SIZE } from '../../constants';
|
|
|
17
17
|
import { getVisualStateAttributes } from '../../utils';
|
|
18
18
|
import styles from './styles.module.css';
|
|
19
19
|
export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
|
|
20
|
-
var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox,
|
|
20
|
+
var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox, onKeyUp, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyUp", 'data-test-id']);
|
|
21
21
|
const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
|
|
22
22
|
const [focusVisible, setFocusVisible] = useState(false);
|
|
23
23
|
const [hover, setHover] = useState(false);
|
|
@@ -28,7 +28,7 @@ export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
|
|
|
28
28
|
hover,
|
|
29
29
|
size,
|
|
30
30
|
};
|
|
31
|
-
return (_jsxs("span", Object.assign({ role: mode, className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
|
|
31
|
+
return (_jsxs("span", Object.assign({ role: mode, className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onKeyUp: onKeyUp }, getVisualStateAttributes(visualState), { children: [render(visualState), _jsx("input", Object.assign({}, otherProps, { "data-test-id": `${testId}-native-input`, ref: ref, type: mode, className: styles.togglePrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
|
|
32
32
|
setFocusVisible(event.target.matches(':focus-visible'));
|
|
33
33
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
34
34
|
}, onBlur: event => {
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -46,7 +46,7 @@ export type TogglePrivateProps = WithSupportProps<{
|
|
|
46
46
|
/** Колбек приобретения фокуса */
|
|
47
47
|
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
48
48
|
/** Колбек нажатия клавиши клавиатуры */
|
|
49
|
-
|
|
49
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
50
50
|
}>;
|
|
51
51
|
export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
|
|
52
52
|
inputRef?: RefObject<HTMLInputElement>;
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Toggles",
|
|
7
|
-
"version": "0.12.1-preview-
|
|
7
|
+
"version": "0.12.1-preview-eda282a2.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"merge-refs": "1.2.1",
|
|
43
43
|
"uncontrollable": "8.0.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "3407ce2f3acfdcbcf92c2005b6d7899d55b75230"
|
|
46
46
|
}
|
|
@@ -22,7 +22,7 @@ export type FavoriteProps = ToggleProps & {
|
|
|
22
22
|
/** Иконка */
|
|
23
23
|
icon?: FavoriteIcon;
|
|
24
24
|
/** Колбек нажатия клавиши клавиатуры */
|
|
25
|
-
|
|
25
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
export function Favorite({
|
|
@@ -30,7 +30,7 @@ export function Favorite({
|
|
|
30
30
|
'data-test-id': dataTestId,
|
|
31
31
|
size = SIZE.M,
|
|
32
32
|
icon = FAVORITE_ICON.Heart,
|
|
33
|
-
|
|
33
|
+
onKeyUp,
|
|
34
34
|
...restProps
|
|
35
35
|
}: FavoriteProps) {
|
|
36
36
|
const iconSize = useMemo(() => getIconSize(size), [size]);
|
|
@@ -41,7 +41,7 @@ export function Favorite({
|
|
|
41
41
|
data-test-id={dataTestId}
|
|
42
42
|
ref={inputRef}
|
|
43
43
|
size={size}
|
|
44
|
-
|
|
44
|
+
onKeyUp={onKeyUp}
|
|
45
45
|
render={function Favorite(visualState) {
|
|
46
46
|
const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
|
|
47
47
|
const data = getVisualStateAttributes({ ...visualState, icon });
|
|
@@ -19,7 +19,7 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
|
|
|
19
19
|
className,
|
|
20
20
|
size = SIZE.M,
|
|
21
21
|
mode = MODE.Checkbox,
|
|
22
|
-
|
|
22
|
+
onKeyUp,
|
|
23
23
|
'data-test-id': testId,
|
|
24
24
|
...otherProps
|
|
25
25
|
},
|
|
@@ -45,7 +45,7 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
|
|
|
45
45
|
data-test-id={testId}
|
|
46
46
|
onMouseEnter={() => setHover(true)}
|
|
47
47
|
onMouseLeave={() => setHover(false)}
|
|
48
|
-
|
|
48
|
+
onKeyUp={onKeyUp}
|
|
49
49
|
{...getVisualStateAttributes(visualState)}
|
|
50
50
|
>
|
|
51
51
|
{render(visualState)}
|
package/src/types.ts
CHANGED
|
@@ -52,7 +52,7 @@ export type TogglePrivateProps = WithSupportProps<{
|
|
|
52
52
|
/** Колбек приобретения фокуса */
|
|
53
53
|
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
54
54
|
/** Колбек нажатия клавиши клавиатуры */
|
|
55
|
-
|
|
55
|
+
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
|
|
56
56
|
}>;
|
|
57
57
|
|
|
58
58
|
export type ToggleProps = WithSupportProps<
|