@snack-uikit/toggles - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1-preview-3e824eee.0

dist/cjs/components/Favorite/Favorite.d.ts

@@ -0,1 +1,2 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
@@ -5,3 +6,5 @@ export type FavoriteProps = ToggleProps & {
     icon?: FavoriteIcon;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
-export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;

dist/cjs/components/Favorite/Favorite.js

@@ -29,7 +29,9 @@ "use strict";
   [constants_1.FAVORITE_ICON.Star]: icons_1.StarFilledSVG,
-  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartFilledSVG
+  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartFilledSVG,
+  [constants_1.FAVORITE_ICON.Pin]: icons_1.PinnedSVG
 };
 const UNCHECKED_ICONS = {
   [constants_1.FAVORITE_ICON.Star]: icons_1.StarSVG,
-  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartSVG
+  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartSVG,
+  [constants_1.FAVORITE_ICON.Pin]: icons_1.UnPinnedSVG
 };
@@ -41,5 +43,6 @@ function Favorite(_a) {
       size = constants_1.SIZE.M,
-      icon = constants_1.FAVORITE_ICON.Heart
+      icon = constants_1.FAVORITE_ICON.Heart,
+      onKeyDown
     } = _a,
-    restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon"]);
+    restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyDown"]);
   const iconSize = (0, react_1.useMemo)(() => (0, utils_1.getIconSize)(size), [size]);
@@ -50,2 +53,3 @@ return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
     size: size,
+    onKeyDown: onKeyDown,
     render: function Favorite(visualState) {
@@ -52,0 +56,0 @@ const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];

dist/cjs/components/TogglePrivate/TogglePrivate.d.ts

@@ -20,2 +20,3 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

dist/cjs/components/TogglePrivate/TogglePrivate.js

@@ -39,5 +39,6 @@ "use strict";
       mode = constants_1.MODE.Checkbox,
+      onKeyDown,
       'data-test-id': testId
     } = _a,
-    otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyDown", 'data-test-id']);
   const [checked, setChecked] = (0, uncontrollable_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChange);
@@ -54,2 +55,3 @@ const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
   return (0, jsx_runtime_1.jsxs)("span", Object.assign({
+    role: mode,
     className: (0, classnames_1.default)(className, styles_module_scss_1.default.toggleLayout),
@@ -59,3 +61,4 @@ "data-size": size,
     onMouseEnter: () => setHover(true),
-    onMouseLeave: () => setHover(false)
+    onMouseLeave: () => setHover(false),
+    onKeyDown: onKeyDown
   }, (0, utils_1.getVisualStateAttributes)(visualState), {
@@ -62,0 +65,0 @@ children: [render(visualState), (0, jsx_runtime_1.jsx)("input", Object.assign({}, otherProps, {

dist/cjs/constants.d.ts

@@ -12,2 +12,3 @@ export declare const MODE: {
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
@@ -14,0 +15,0 @@ export declare const SELECTION_MODE: {

dist/cjs/constants.js

@@ -17,3 +17,4 @@ "use strict";
   Star: 'star',
-  Heart: 'heart'
+  Heart: 'heart',
+  Pin: 'pin'
 };
@@ -20,0 +21,0 @@ exports.SELECTION_MODE = {

dist/cjs/types.d.ts

@@ -1,2 +0,2 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
@@ -48,2 +48,4 @@ import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -50,0 +52,0 @@ export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {

dist/esm/components/Favorite/Favorite.d.ts

@@ -0,1 +1,2 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
@@ -5,3 +6,5 @@ export type FavoriteProps = ToggleProps & {
     icon?: FavoriteIcon;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
-export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;

dist/esm/components/Favorite/Favorite.js

@@ -14,3 +14,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useMemo } from 'react';
-import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
+import { HeartFilledSVG, HeartSVG, PinnedSVG, StarFilledSVG, StarSVG, UnPinnedSVG } from '@snack-uikit/icons';
 import { FAVORITE_ICON, SIZE } from '../../constants';
@@ -23,2 +23,3 @@ import { getIconSize, getVisualStateAttributes } from '../../utils';
     [FAVORITE_ICON.Heart]: HeartFilledSVG,
+    [FAVORITE_ICON.Pin]: PinnedSVG,
 };
@@ -28,7 +29,8 @@ const UNCHECKED_ICONS = {
     [FAVORITE_ICON.Heart]: HeartSVG,
+    [FAVORITE_ICON.Pin]: UnPinnedSVG,
 };
 export function Favorite(_a) {
-    var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.Heart } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon"]);
+    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"]);
     const iconSize = useMemo(() => getIconSize(size), [size]);
-    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, render: function Favorite(visualState) {
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, onKeyDown: onKeyDown, render: function Favorite(visualState) {
             const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
@@ -35,0 +37,0 @@ const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { icon }));

dist/esm/components/TogglePrivate/TogglePrivate.d.ts

@@ -20,2 +20,3 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

dist/esm/components/TogglePrivate/TogglePrivate.js

@@ -20,3 +20,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
-    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    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']);
     const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
@@ -32,3 +32,3 @@ const [focusVisible, setFocusVisible] = useState(false);
     };
-    return (_jsxs("span", Object.assign({ className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, 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 => {
+    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 => {
                     setFocusVisible(event.target.matches(':focus-visible'));
@@ -35,0 +35,0 @@ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);

dist/esm/constants.d.ts

@@ -12,2 +12,3 @@ export declare const MODE: {
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
@@ -14,0 +15,0 @@ export declare const SELECTION_MODE: {

dist/esm/constants.js

@@ -12,2 +12,3 @@ export const MODE = {
     Heart: 'heart',
+    Pin: 'pin',
 };
@@ -14,0 +15,0 @@ export const SELECTION_MODE = {

dist/esm/types.d.ts

@@ -1,2 +0,2 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
@@ -48,2 +48,4 @@ import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -50,0 +52,0 @@ export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {

package.json

@@ -7,3 +7,3 @@ {
   "title": "Toggles",
-  "version": "0.12.0",
+  "version": "0.12.1-preview-3e824eee.0",
   "sideEffects": [
@@ -46,3 +46,3 @@ "*.css",
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "e03a2d793311385c56686433260ea6572c6fc823"
 }

README.md

@@ -154,3 +154,4 @@ # Checkbox, Radio, Switch и Favorite
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
-| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
+| icon | enum FavoriteIcon: `"star"`, `"heart"`, `"pin"` | heart | Иконка |
+| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
 ## ToggleGroup
@@ -157,0 +158,0 @@ ### Props

src/constants.ts

@@ -14,2 +14,3 @@ export const MODE = {
   Heart: 'heart',
+  Pin: 'pin',
 } as const;
@@ -16,0 +17,0 @@

src/types.ts

@@ -1,2 +0,2 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 
@@ -54,2 +54,4 @@ import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
   onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
@@ -56,0 +58,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147232

increased by1.88%

Lines of code

2712

increased by1.84%

Number of lines in readme file

172

increased by0.58%

No dependency changes