@snack-uikit/toggles 0.12.0 → 0.12.1-preview-d1a63029.0

package/README.md

@@ -151,7 +151,8 @@ return (
 | className | `string` | - | CSS-класс |
 | size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
-| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
+| icon | enum FavoriteIcon: `"star"`, `"heart"`, `"pin"` | heart | Иконка |
+| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
 ## ToggleGroup
 ### Props
 | name | type | default value | description |

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

@@ -1,6 +1,9 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
 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;

package/dist/cjs/components/Favorite/Favorite.js

@@ -26,25 +26,29 @@ const TogglePrivate_1 = require("../TogglePrivate");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const CHECKED_ICONS = {
   [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
 };
 function Favorite(_a) {
   var {
       inputRef,
       'data-test-id': dataTestId,
       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]);
   return (0, jsx_runtime_1.jsx)(TogglePrivate_1.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];
       const data = (0, utils_1.getVisualStateAttributes)(Object.assign(Object.assign({}, visualState), {

package/dist/cjs/components/Favorite/styles.module.css

@@ -45,6 +45,12 @@
 .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-hover=true]{
   color:var(--sys-red-accent-hovered, #bd4844);
 }
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
 .icon[data-disabled=true]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }

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

@@ -17,4 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onClick?: import("react").MouseEventHandler<HTMLInputElement>;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/TogglePrivate/TogglePrivate.js

@@ -36,9 +36,10 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
       className,
       size = constants_1.SIZE.M,
       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);
   const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
   const [hover, setHover] = (0, react_1.useState)(false);
@@ -50,11 +51,13 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
     size
   };
   return (0, jsx_runtime_1.jsxs)("span", Object.assign({
+    role: mode,
     className: (0, classnames_1.default)(className, styles_module_scss_1.default.toggleLayout),
     "data-size": size,
     "data-test-id": testId,
     onMouseEnter: () => setHover(true),
-    onMouseLeave: () => setHover(false)
+    onMouseLeave: () => setHover(false),
+    onKeyDown: onKeyDown
   }, (0, utils_1.getVisualStateAttributes)(visualState), {
     children: [render(visualState), (0, jsx_runtime_1.jsx)("input", Object.assign({}, otherProps, {
       "data-test-id": `${testId}-native-input`,

package/dist/cjs/constants.d.ts

@@ -9,6 +9,7 @@ export declare const SIZE: {
 export declare const FAVORITE_ICON: {
     readonly Star: "star";
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
 export declare const SELECTION_MODE: {
     readonly Single: "single";

package/dist/cjs/constants.js

@@ -14,7 +14,8 @@ exports.SIZE = {
 };
 exports.FAVORITE_ICON = {
   Star: 'star',
-  Heart: 'heart'
+  Heart: 'heart',
+  Pin: 'pin'
 };
 exports.SELECTION_MODE = {
   Single: 'single',

package/dist/cjs/types.d.ts

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

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

@@ -1,6 +1,9 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
 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;

package/dist/esm/components/Favorite/Favorite.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 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';
 import { getIconSize, getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
@@ -19,15 +19,17 @@ import styles from './styles.module.css';
 const CHECKED_ICONS = {
     [FAVORITE_ICON.Star]: StarFilledSVG,
     [FAVORITE_ICON.Heart]: HeartFilledSVG,
+    [FAVORITE_ICON.Pin]: PinnedSVG,
 };
 const UNCHECKED_ICONS = {
     [FAVORITE_ICON.Star]: StarSVG,
     [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];
             const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { icon }));
             return (_jsx("div", Object.assign({ className: styles.container }, data, { children: _jsx(Icon, Object.assign({ className: styles.icon }, data, { size: iconSize })) })));

package/dist/esm/components/Favorite/styles.module.css

@@ -45,6 +45,12 @@
 .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-hover=true]{
   color:var(--sys-red-accent-hovered, #bd4844);
 }
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
 .icon[data-disabled=true]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }

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

@@ -17,4 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onClick?: import("react").MouseEventHandler<HTMLInputElement>;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/TogglePrivate/TogglePrivate.js

@@ -17,7 +17,7 @@ import { MODE, SIZE } from '../../constants';
 import { getVisualStateAttributes } from '../../utils';
 import styles from './styles.module.css';
 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);
     const [focusVisible, setFocusVisible] = useState(false);
     const [hover, setHover] = useState(false);
@@ -28,7 +28,7 @@ export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
         hover,
         size,
     };
-    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'));
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
                 }, onBlur: event => {

package/dist/esm/constants.d.ts

@@ -9,6 +9,7 @@ export declare const SIZE: {
 export declare const FAVORITE_ICON: {
     readonly Star: "star";
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
 export declare const SELECTION_MODE: {
     readonly Single: "single";

package/dist/esm/constants.js

@@ -9,6 +9,7 @@ export const SIZE = {
 export const FAVORITE_ICON = {
     Star: 'star',
     Heart: 'heart',
+    Pin: 'pin',
 };
 export const SELECTION_MODE = {
     Single: 'single',

package/dist/esm/types.d.ts

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.12.0",
+  "version": "0.12.1-preview-d1a63029.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "167f0c505b9958dc320111f7ee9e8ed2ebc58796"
 }

package/src/components/Favorite/Favorite.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { KeyboardEventHandler, 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';
 import { FavoriteIcon, ToggleProps } from '../../types';
@@ -11,16 +11,20 @@ import styles from './styles.module.scss';
 const CHECKED_ICONS = {
   [FAVORITE_ICON.Star]: StarFilledSVG,
   [FAVORITE_ICON.Heart]: HeartFilledSVG,
+  [FAVORITE_ICON.Pin]: PinnedSVG,
 };
 
 const UNCHECKED_ICONS = {
   [FAVORITE_ICON.Star]: StarSVG,
   [FAVORITE_ICON.Heart]: HeartSVG,
+  [FAVORITE_ICON.Pin]: UnPinnedSVG,
 };
 
 export type FavoriteProps = ToggleProps & {
   /** Иконка */
   icon?: FavoriteIcon;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
 
 export function Favorite({
@@ -28,6 +32,7 @@ export function Favorite({
   'data-test-id': dataTestId,
   size = SIZE.M,
   icon = FAVORITE_ICON.Heart,
+  onKeyDown,
   ...restProps
 }: FavoriteProps) {
   const iconSize = useMemo(() => getIconSize(size), [size]);
@@ -38,6 +43,7 @@ export function Favorite({
       data-test-id={dataTestId}
       ref={inputRef}
       size={size}
+      onKeyDown={onKeyDown}
       render={function Favorite(visualState) {
         const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
         const data = getVisualStateAttributes({ ...visualState, icon });

package/src/components/Favorite/styles.module.scss

@@ -4,6 +4,7 @@
 $icons: (
   'star': 'yellow',
   'heart': 'red',
+  'pin': 'primary',
 );
 
 .container {

package/src/components/TogglePrivate/TogglePrivate.tsx

@@ -19,6 +19,7 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
     className,
     size = SIZE.M,
     mode = MODE.Checkbox,
+    onKeyDown,
     'data-test-id': testId,
     ...otherProps
   },
@@ -38,11 +39,13 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
 
   return (
     <span
+      role={mode}
       className={cn(className, styles.toggleLayout)}
       data-size={size}
       data-test-id={testId}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      onKeyDown={onKeyDown}
       {...getVisualStateAttributes(visualState)}
     >
       {render(visualState)}

package/src/constants.ts

@@ -11,6 +11,7 @@ export const SIZE = {
 export const FAVORITE_ICON = {
   Star: 'star',
   Heart: 'heart',
+  Pin: 'pin',
 } as const;
 
 export const SELECTION_MODE = {

package/src/types.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
@@ -51,6 +51,8 @@ export type TogglePrivateProps = WithSupportProps<{
   onBlur?: FocusEventHandler<HTMLInputElement>;
   /** Колбек приобретения фокуса */
   onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 
 export type ToggleProps = WithSupportProps<