@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 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
- | onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
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
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
7
+ onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
8
8
  };
9
- export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
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
- onKeyDown
41
+ onKeyUp
42
42
  } = _a,
43
- restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyDown"]);
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
- onKeyDown: onKeyDown,
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
- onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
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
- onKeyDown,
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", "onKeyDown", 'data-test-id']);
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
- onKeyDown: onKeyDown
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`,
@@ -46,7 +46,7 @@ export type TogglePrivateProps = WithSupportProps<{
46
46
  /** Колбек приобретения фокуса */
47
47
  onFocus?: FocusEventHandler<HTMLInputElement>;
48
48
  /** Колбек нажатия клавиши клавиатуры */
49
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
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
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
7
+ onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
8
8
  };
9
- export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
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, onKeyDown } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyDown"]);
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, onKeyDown: onKeyDown, render: function Favorite(visualState) {
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
- onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
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, onKeyDown, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyDown", 'data-test-id']);
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), onKeyDown: onKeyDown }, 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 => {
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 => {
@@ -46,7 +46,7 @@ export type TogglePrivateProps = WithSupportProps<{
46
46
  /** Колбек приобретения фокуса */
47
47
  onFocus?: FocusEventHandler<HTMLInputElement>;
48
48
  /** Колбек нажатия клавиши клавиатуры */
49
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
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-2e497be2.0",
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": "3d1c15a282ba2036ee2b6c9f0982f93548cead64"
45
+ "gitHead": "3407ce2f3acfdcbcf92c2005b6d7899d55b75230"
46
46
  }
@@ -22,7 +22,7 @@ export type FavoriteProps = ToggleProps & {
22
22
  /** Иконка */
23
23
  icon?: FavoriteIcon;
24
24
  /** Колбек нажатия клавиши клавиатуры */
25
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
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
- onKeyDown,
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
- onKeyDown={onKeyDown}
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
- onKeyDown,
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
- onKeyDown={onKeyDown}
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
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
55
+ onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
56
56
  }>;
57
57
 
58
58
  export type ToggleProps = WithSupportProps<