@vkontakte/vkui 7.5.0 → 7.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.5.0",
+  "version": "7.5.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/Clickable/Clickable.tsx

@@ -1,25 +1,18 @@
+'use client';
+
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';
+import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
+import { mergeCalls } from '../../lib/mergeCalls';
+import { clickByKeyboardHandler } from '../../lib/utils';
 import { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';
-import { RealClickable } from './RealClickable';
 import { type StateProps } from './useState';
+import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';
 import styles from './Clickable.module.css';
 
-export interface ClickableProps<T = HTMLElement>
-  extends RootComponentProps<T>,
-    FocusVisibleModeProps,
-    StateProps {
-  /**
-   * Компонент который будет при передаче `onClick`. По умолчанию `"div"`.
-   */
-  DefaultComponent?: React.ElementType;
-}
-
-/**
- * Некликабельный компонент. Отключаем возможность нажимать на компонент.
- */
-const NonClickable = <T,>({
+function nonClickableProps<T>({
   href,
   onClick,
   onClickCapture,
@@ -35,7 +28,132 @@ const NonClickable = <T,>({
   DefaultComponent,
   Component,
   ...restProps
-}: ClickableProps<T>) => <RootComponent Component={Component || DefaultComponent} {...restProps} />;
+}: ClickableProps<T>) {
+  return {
+    Component: Component || DefaultComponent,
+    ...restProps,
+    lockStateContextValue: {
+      lockHoverStateBubbling: undefined,
+      lockActiveStateBubbling: undefined,
+    },
+  };
+}
+
+function useClickableProps<T>({
+  baseClassName,
+  focusVisibleMode = 'inside',
+  activeClassName,
+  hoverClassName,
+  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,
+  hasHover = true,
+  hasActive = true,
+  hovered,
+  activated,
+  hasHoverWithChildren,
+  unlockParentHover,
+  onPointerEnter,
+  onPointerLeave,
+  onPointerDown,
+  onPointerCancel,
+  onPointerUp,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  DefaultComponent,
+  ...restProps
+}: ClickableProps<T>) {
+  const { focusVisible, ...focusEvents } = useFocusVisible();
+  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });
+
+  const {
+    stateClassName,
+    setLockHoverBubblingImmediate,
+    setLockActiveBubblingImmediate,
+    ...stateEvents
+  } = useState({
+    activeClassName,
+    hoverClassName,
+    activeEffectDelay,
+    hasHover,
+    hasActive,
+    hovered,
+    activated,
+    unlockParentHover,
+  });
+
+  const handlers = mergeCalls(
+    focusEvents,
+    stateEvents,
+    { onKeyDown: clickByKeyboardHandler },
+    {
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown,
+      onPointerCancel,
+      onPointerUp,
+      onBlur,
+      onFocus,
+      onKeyDown,
+    },
+  );
+
+  const lockStateContextValue = React.useMemo(
+    () => ({
+      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
+      lockActiveStateBubbling: setLockActiveBubblingImmediate,
+    }),
+    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],
+  );
+
+  return {
+    baseClassName: classNames(
+      baseClassName,
+      styles.realClickable,
+      focusVisibleClassNames,
+      stateClassName,
+    ),
+    ...handlers,
+    ...restProps,
+    lockStateContextValue,
+  };
+}
+
+function useProps<T>(props: ClickableProps<T>): RootComponentProps<T> & {
+  lockStateContextValue: {
+    lockHoverStateBubbling: undefined | ((...args: any[]) => void);
+    lockActiveStateBubbling: undefined | ((...args: any[]) => void);
+  };
+} {
+  const commonProps = component(props);
+  const isClickable = checkClickable(props);
+
+  const {
+    baseClassName,
+    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps
+    Component,
+    ...restProps
+  } = props;
+
+  const nextProps = {
+    baseClassName: classNames(baseClassName, styles.host),
+    ...commonProps,
+    ...restProps,
+  };
+
+  const clickableProps = useClickableProps(nextProps);
+
+  return isClickable ? clickableProps : nonClickableProps(nextProps);
+}
+
+export interface ClickableProps<T = HTMLElement>
+  extends RootComponentProps<T>,
+    FocusVisibleModeProps,
+    StateProps {
+  /**
+   * Компонент который будет при передаче `onClick`. По умолчанию `"div"`.
+   */
+  DefaultComponent?: React.ElementType;
+}
 
 /**
  * Проверяем, является ли компонент кликабельным.
@@ -113,22 +231,13 @@ function component<T>({
  * - a11y компонентов.
  */
 export const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {
-  const commonProps = component(props);
-  const isClickable = checkClickable(props);
-  const Component = isClickable ? RealClickable : NonClickable;
-
-  const {
-    baseClassName,
-    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps
-    Component: ignore,
-    ...restProps
-  } = props;
+  const { lockStateContextValue, children, ...restProps } = useProps(props);
 
   return (
-    <Component
-      baseClassName={classNames(baseClassName, styles.host)}
-      {...commonProps}
-      {...restProps}
-    />
+    <RootComponent {...restProps}>
+      <ClickableLockStateContext.Provider value={lockStateContextValue}>
+        {children}
+      </ClickableLockStateContext.Provider>
+    </RootComponent>
   );
 };

package/src/components/ImageBase/ImageBase.module.css

@@ -45,6 +45,13 @@
   display: block;
   inline-size: 100%;
   block-size: 100%;
+  /* Скрывает текст из атрибута alt. */
+  color: transparent;
+  /*
+  Скрывает альтернативную иконку, которая появляется когда нет атрибута alt.
+  Работает только в Chromium. В остальных ситуациях сработает `.imgHiddenAlt`, который добавляется на `onError`.
+  */
+  text-indent: 10000px;
   border: 0;
   border-radius: inherit;
 }
@@ -88,8 +95,8 @@
   );
 }
 
-.host:not(.loaded) .img {
-  visibility: hidden;
+.imgHiddenAlt {
+  opacity: 0;
 }
 
 .fallback {

package/src/components/ImageBase/ImageBase.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aAmDAC,c,WAnDA;AAAA,E,aAwDAC,qB,WAxDA;AAAA,E,aA4DAC,mB,WA5DA;AAAA,E,aAgEAC,kB,WAhEA;AAAA,E,aAoEAC,uB,WApEA;AAAA,E,aAwEAC,oB,WAxEA;AAAA,E,aAiFAC,Y,WAjFA;AAAA,E,aA0FAZ,M,WA1FA;AAAA,E,aA0FUC,Q,WA1FV;AAAA,E,aA0FmBI,K,WA1FnB;AAAA,E,aA8FAQ,U,WA9FA;AAAA,E,aA2G4Cb,M,WA3G5C;AAAA,E,aAgH2CA,M,WAhH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aA0DAC,c,WA1DA;AAAA,E,aA+DAC,qB,WA/DA;AAAA,E,aAmEAC,mB,WAnEA;AAAA,E,aAuEAC,kB,WAvEA;AAAA,E,aA2EAC,uB,WA3EA;AAAA,E,aA+EAC,oB,WA/EA;AAAA,E,aAwFAC,Y,WAxFA;AAAA,E,aAiGAC,c,WAjGA;AAAA,E,aAqGAC,U,WArGA;AAAA,E,aAkH4Cd,M,WAlH5C;AAAA,E,aAuH2CA,M,WAvH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBase.tsx

@@ -202,13 +202,11 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   const mouseOutHandlersRef = useRef<VoidFunction[]>([]);
 
   const hasSrc = src || srcSet;
-  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);
-
-  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
+  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;
 
   if (process.env.NODE_ENV === 'development') {
     validateSize(size);
-    if (fallbackIcon) {
+    if (React.isValidElement(fallbackIcon)) {
       validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });
     }
   }
@@ -304,6 +302,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
               objectPosition && styles.withObjectPosition,
               filter && styles.withFilter,
               keepAspectRatio && styles.imgKeepRatio,
+              failed && styles.imgHiddenAlt,
             )}
             crossOrigin={crossOrigin}
             decoding={decoding}

package/src/components/ModalCard/ModalCard.module.css

@@ -1,6 +1,4 @@
 .host {
-  inline-size: 100%;
-  padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
 }
 
@@ -26,16 +24,22 @@
   --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
   position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
+  /*
+   * Используем inset вместо padding, чтобы срабатывала логика с закрытие с Click Outside.
+   * Для этого также нужны `inline-size: auto` и `margin-inline: auto`.
+   */
+  inset-block-end: calc(
+    var(--vkui--spacing_size_m) + var(--vkui_internal_ModalCard--safeAreaInsetBottom)
+  );
+  inset-inline: var(--vkui--spacing_size_m);
   box-sizing: border-box;
-  margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+  inline-size: auto;
   transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
   transition: transform 0.4s var(--vkui_internal--spring-easing);
 }
 
 .hostMobile.hostStateEnter {
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
   transition: none;
 }
 
@@ -44,18 +48,20 @@
 }
 
 .hostMobile.hostStateExiting {
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
   transition: transform 0.2s ease;
 }
 
 .hostMobile.hostStateExited {
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
   transition: none;
 }
 
 /* Desktop */
 .hostDesktop {
   box-sizing: content-box;
+  inline-size: 100%;
+  padding: var(--vkui--spacing_size_m);
   margin-block: auto;
   opacity: 1;
   transition: opacity 340ms var(--vkui--animation_easing_platform);

package/src/components/ModalCard/ModalCard.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAA,M,WANA;AAAA,E,aAUAC,e,WAVA;AAAA,E,aAcAC,e,WAdA;AAAA,E,aAkBAC,e,WAlBA;AAAA,E,aAuBAC,Y,WAvBA;AAAA,E,aAoCAA,Y,WApCA;AAAA,E,aAoCWC,gB,WApCX;AAAA,E,aAyCAD,Y,WAzCA;AAAA,E,aAyCWE,mB,WAzCX;AAAA,E,aA6CAF,Y,WA7CA;AAAA,E,aA6CWG,kB,WA7CX;AAAA,E,aAkDAH,Y,WAlDA;AAAA,E,aAkDWI,iB,WAlDX;AAAA,E,aAwDAC,a,WAxDA;AAAA,E,aA+DAA,a,WA/DA;AAAA,E,aA+DYJ,gB,WA/DZ;AAAA,E,aAoEAI,a,WApEA;AAAA,E,aAoEYH,mB,WApEZ;AAAA,E,aAwEAG,a,WAxEA;AAAA,E,aAwEYF,kB,WAxEZ;AAAA,E,aA4EAE,a,WA5EA;AAAA,E,aA4EYD,iB,WA5EZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,e,WARA;AAAA,E,aAYAC,e,WAZA;AAAA,E,aAgBAC,e,WAhBA;AAAA,E,aAqBAC,Y,WArBA;AAAA,E,aAwCAA,Y,WAxCA;AAAA,E,aAwCWC,gB,WAxCX;AAAA,E,aA6CAD,Y,WA7CA;AAAA,E,aA6CWE,mB,WA7CX;AAAA,E,aAiDAF,Y,WAjDA;AAAA,E,aAiDWG,kB,WAjDX;AAAA,E,aAsDAH,Y,WAtDA;AAAA,E,aAsDWI,iB,WAtDX;AAAA,E,aA4DAC,a,WA5DA;AAAA,E,aAqEAA,a,WArEA;AAAA,E,aAqEYJ,gB,WArEZ;AAAA,E,aA0EAI,a,WA1EA;AAAA,E,aA0EYH,mB,WA1EZ;AAAA,E,aA8EAG,a,WA9EA;AAAA,E,aA8EYF,kB,WA9EZ;AAAA,E,aAkFAE,a,WAlFA;AAAA,E,aAkFYD,iB,WAlFZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}

package/src/components/ModalPage/ModalPage.module.css

@@ -89,7 +89,6 @@
   inset-inline-start: 0;
   block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
   max-block-size: 100%;
-  padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
   pointer-events: auto;
   touch-action: pan-y;
   transform: translate3d(0, 0, 0);
@@ -139,6 +138,7 @@
 }
 
 .children {
+  box-sizing: border-box;
   /*
    * Удерживает высоту в пределах 100% родителя при переполнении контента.
    *
@@ -157,6 +157,10 @@
   border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
+.childrenMobile {
+  padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
+}
+
 /* Desktop */
 .childrenDesktop {
   border-end-start-radius: var(--vkui--size_border_radius_paper--regular);

package/src/components/ModalPage/ModalPage.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAoBAC,4B,WApBA;AAAA,E,aAwBAC,4C,WAxBA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAgDEA,a,WAhDF;AAAA,E,aAuDAC,sB,WAvDA;AAAA,E,aA2DAC,sB,WA3DA;AAAA,E,aA+DAC,sB,WA/DA;AAAA,E,aAmEAC,U,WAnEA;AAAA,E,aAgFAC,gB,WAhFA;AAAA,E,aAkGAA,gB,WAlGA;AAAA,E,aAkGeC,oB,WAlGf;AAAA,E,aAsGAD,gB,WAtGA;AAAA,E,aAsGeE,uB,WAtGf;AAAA,E,aA2GAF,gB,WA3GA;AAAA,E,aA2GeG,sB,WA3Gf;AAAA,E,aAgHAH,gB,WAhHA;AAAA,E,aAgHeI,qB,WAhHf;AAAA,E,aAqHAC,iB,WArHA;AAAA,E,aA0HAA,iB,WA1HA;AAAA,E,aA0HgBJ,oB,WA1HhB;AAAA,E,aA8HAI,iB,WA9HA;AAAA,E,aA8HgBH,uB,WA9HhB;AAAA,E,aAmIAG,iB,WAnIA;AAAA,E,aAmIgBF,sB,WAnIhB;AAAA,E,aAwIAE,iB,WAxIA;AAAA,E,aAwIgBD,qB,WAxIhB;AAAA,E,aA4IAE,U,WA5IA;AAAA,E,aAgKAC,iB,WAhKA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAoBAC,4B,WApBA;AAAA,E,aAwBAC,4C,WAxBA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAgDEA,a,WAhDF;AAAA,E,aAuDAC,sB,WAvDA;AAAA,E,aA2DAC,sB,WA3DA;AAAA,E,aA+DAC,sB,WA/DA;AAAA,E,aAmEAC,U,WAnEA;AAAA,E,aAgFAC,gB,WAhFA;AAAA,E,aAiGAA,gB,WAjGA;AAAA,E,aAiGeC,oB,WAjGf;AAAA,E,aAqGAD,gB,WArGA;AAAA,E,aAqGeE,uB,WArGf;AAAA,E,aA0GAF,gB,WA1GA;AAAA,E,aA0GeG,sB,WA1Gf;AAAA,E,aA+GAH,gB,WA/GA;AAAA,E,aA+GeI,qB,WA/Gf;AAAA,E,aAoHAC,iB,WApHA;AAAA,E,aAyHAA,iB,WAzHA;AAAA,E,aAyHgBJ,oB,WAzHhB;AAAA,E,aA6HAI,iB,WA7HA;AAAA,E,aA6HgBH,uB,WA7HhB;AAAA,E,aAkIAG,iB,WAlIA;AAAA,E,aAkIgBF,sB,WAlIhB;AAAA,E,aAuIAE,iB,WAvIA;AAAA,E,aAuIgBD,qB,WAvIhB;AAAA,E,aA2IAE,U,WA3IA;AAAA,E,aA+JAC,gB,WA/JA;AAAA,E,aAoKAC,iB,WApKA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}

package/src/components/ModalPage/ModalPageBase.tsx

@@ -61,7 +61,7 @@ export const ModalPageBase = ({
             ? function handleDismissButtonClick(event) {
                 onClose('click-close-button', event);
               }
-            : undefined
+            : noop
         }
         aria-label={modalDismissButtonLabel}
       >
@@ -71,7 +71,12 @@ export const ModalPageBase = ({
 
   return (
     <RootComponent role="document" baseClassName={styles.document} {...restProps}>
-      <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
+      <div
+        className={classNames(
+          styles.children,
+          isDesktop ? styles.childrenDesktop : styles.childrenMobile,
+        )}
+      >
         {hasReactNode(header) && header}
         <ModalPageContent
           getRootRef={getRef}

package/dist/components/Clickable/RealClickable.d.ts

@@ -1,6 +0,0 @@
-import { type ClickableProps } from './Clickable';
-/**
- * Кликабельный компонент. Добавляем кучу обвесов.
- */
-export declare const RealClickable: <T>({ baseClassName, children, focusVisibleMode, activeClassName, hoverClassName, activeEffectDelay, hasHover, hasActive, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, DefaultComponent, ...restProps }: ClickableProps<T>) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=RealClickable.d.ts.map

package/dist/components/Clickable/RealClickable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RealClickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/RealClickable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAIlD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,8TAuB/B,cAAc,CAAC,CAAC,CAAC,4CA4DnB,CAAC"}

package/dist/components/Clickable/RealClickable.js

@@ -1,91 +0,0 @@
-'use client';
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames, noop } from "@vkontakte/vkjs";
-import { useFocusVisible } from "../../hooks/useFocusVisible.js";
-import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
-import { mergeCalls } from "../../lib/mergeCalls.js";
-import { clickByKeyboardHandler } from "../../lib/utils.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
-/**
- * Кликабельный компонент. Добавляем кучу обвесов.
- */ export const RealClickable = (_param)=>{
-    var { baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, DefaultComponent } = _param, restProps = _object_without_properties(_param, [
-        "baseClassName",
-        "children",
-        "focusVisibleMode",
-        "activeClassName",
-        "hoverClassName",
-        "activeEffectDelay",
-        "hasHover",
-        "hasActive",
-        "hovered",
-        "activated",
-        "hasHoverWithChildren",
-        "unlockParentHover",
-        "onPointerEnter",
-        "onPointerLeave",
-        "onPointerDown",
-        "onPointerCancel",
-        "onPointerUp",
-        "onBlur",
-        "onFocus",
-        "onKeyDown",
-        "DefaultComponent"
-    ]);
-    const _useFocusVisible = useFocusVisible(), { focusVisible } = _useFocusVisible, focusEvents = _object_without_properties(_useFocusVisible, [
-        "focusVisible"
-    ]);
-    const focusVisibleClassNames = useFocusVisibleClassName({
-        focusVisible,
-        mode: focusVisibleMode
-    });
-    const _useState = useState({
-        activeClassName,
-        hoverClassName,
-        activeEffectDelay,
-        hasHover,
-        hasActive,
-        hovered,
-        activated,
-        unlockParentHover
-    }), { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate } = _useState, stateEvents = _object_without_properties(_useState, [
-        "stateClassName",
-        "setLockHoverBubblingImmediate",
-        "setLockActiveBubblingImmediate"
-    ]);
-    const handlers = mergeCalls(focusEvents, stateEvents, {
-        onKeyDown: clickByKeyboardHandler
-    }, {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown,
-        onPointerCancel,
-        onPointerUp,
-        onBlur,
-        onFocus,
-        onKeyDown
-    });
-    const lockStateContextValue = React.useMemo(()=>({
-            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
-            lockActiveStateBubbling: setLockActiveBubblingImmediate
-        }), [
-        setLockHoverBubblingImmediate,
-        setLockActiveBubblingImmediate,
-        hasHoverWithChildren
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
-        baseClassName: classNames(baseClassName, "vkuiClickable__realClickable", focusVisibleClassNames, stateClassName)
-    }, handlers, restProps), {
-        children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
-            value: lockStateContextValue,
-            children: children
-        })
-    }));
-};
-
-//# sourceMappingURL=RealClickable.js.map

package/dist/components/Clickable/RealClickable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Clickable/RealClickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ClickableProps } from './Clickable';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов.\n */\nexport const RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  hasHoverWithChildren,\n  unlockParentHover,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  DefaultComponent,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...stateEvents\n  } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n    unlockParentHover,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  const lockStateContextValue = React.useMemo(\n    () => ({\n      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n      lockActiveStateBubbling: setLockActiveBubblingImmediate,\n    }),\n    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles.realClickable,\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={lockStateContextValue}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","RealClickable","baseClassName","children","focusVisibleMode","activeClassName","hoverClassName","activeEffectDelay","hasHover","hasActive","hovered","activated","hasHoverWithChildren","unlockParentHover","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","DefaultComponent","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","Provider","value"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,yBAAyB,EAAEC,2BAA2B,EAAEC,QAAQ,QAAQ,gBAAa;AAG9F;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAK,EAChCC,aAAa,EACbC,QAAQ,EACRC,mBAAmB,QAAQ,EAC3BC,eAAe,EACfC,cAAc,EACdC,oBAAoBR,2BAA2B,EAC/CS,WAAW,IAAI,EACfC,YAAY,IAAI,EAChBC,OAAO,EACPC,SAAS,EACTC,oBAAoB,EACpBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,WAAW,EACXC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAEE,WADfC;QArBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAyC7B,mBAAAA,mBAAnC,EAAE+B,YAAY,EAAkB,GAAG/B,kBAAhBgC,yCAAgBhC;QAAjC+B;;IACR,MAAME,yBAAyBhC,yBAAyB;QAAE8B;QAAcG,MAAMvB;IAAiB;IAE/F,MAKIJ,YAAAA,SAAS;QACXK;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF,IAdM,EACJe,cAAc,EACdC,6BAA6B,EAC7BC,8BAA8B,EAE/B,GAAG9B,WADC+B,yCACD/B;QAJF4B;QACAC;QACAC;;IAaF,MAAME,WAAWrC,WACf8B,aACAM,aACA;QAAEV,WAAWzB;IAAuB,GACpC;QACEkB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAGF,MAAMY,wBAAwB3C,MAAM4C,OAAO,CACzC,IAAO,CAAA;YACLC,wBAAwBvB,uBAAuBpB,OAAOqC;YACtDO,yBAAyBN;QAC3B,CAAA,GACA;QAACD;QAA+BC;QAAgClB;KAAqB;IAGvF,qBACE,KAACf;QACCK,eAAeX,WACbW,+CAEAwB,wBACAE;OAEEI,UACAT;kBAEJ,cAAA,KAACzB,0BAA0BuC,QAAQ;YAACC,OAAOL;sBACxC9B;;;AAIT,EAAE"}

package/dist/cssm/components/Clickable/RealClickable.js

@@ -1,61 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames, noop } from "@vkontakte/vkjs";
-import { useFocusVisible } from "../../hooks/useFocusVisible.js";
-import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
-import { mergeCalls } from "../../lib/mergeCalls.js";
-import { clickByKeyboardHandler } from "../../lib/utils.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
-import styles from "./Clickable.module.css";
-/**
- * Кликабельный компонент. Добавляем кучу обвесов.
- */ export const RealClickable = ({ baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, DefaultComponent, ...restProps })=>{
-    const { focusVisible, ...focusEvents } = useFocusVisible();
-    const focusVisibleClassNames = useFocusVisibleClassName({
-        focusVisible,
-        mode: focusVisibleMode
-    });
-    const { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, ...stateEvents } = useState({
-        activeClassName,
-        hoverClassName,
-        activeEffectDelay,
-        hasHover,
-        hasActive,
-        hovered,
-        activated,
-        unlockParentHover
-    });
-    const handlers = mergeCalls(focusEvents, stateEvents, {
-        onKeyDown: clickByKeyboardHandler
-    }, {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown,
-        onPointerCancel,
-        onPointerUp,
-        onBlur,
-        onFocus,
-        onKeyDown
-    });
-    const lockStateContextValue = React.useMemo(()=>({
-            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
-            lockActiveStateBubbling: setLockActiveBubblingImmediate
-        }), [
-        setLockHoverBubblingImmediate,
-        setLockActiveBubblingImmediate,
-        hasHoverWithChildren
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames(baseClassName, styles.realClickable, focusVisibleClassNames, stateClassName),
-        ...handlers,
-        ...restProps,
-        children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
-            value: lockStateContextValue,
-            children: children
-        })
-    });
-};
-
-//# sourceMappingURL=RealClickable.js.map

package/dist/cssm/components/Clickable/RealClickable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Clickable/RealClickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ClickableProps } from './Clickable';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов.\n */\nexport const RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  hasHoverWithChildren,\n  unlockParentHover,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  DefaultComponent,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...stateEvents\n  } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n    unlockParentHover,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  const lockStateContextValue = React.useMemo(\n    () => ({\n      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n      lockActiveStateBubbling: setLockActiveBubblingImmediate,\n    }),\n    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles.realClickable,\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={lockStateContextValue}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","RealClickable","baseClassName","children","focusVisibleMode","activeClassName","hoverClassName","activeEffectDelay","hasHover","hasActive","hovered","activated","hasHoverWithChildren","unlockParentHover","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","DefaultComponent","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","realClickable","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,yBAAyB,EAAEC,2BAA2B,EAAEC,QAAQ,QAAQ,gBAAa;AAC9F,OAAOC,YAAY,yBAAyB;AAE5C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,aAAa,EACbC,QAAQ,EACRC,mBAAmB,QAAQ,EAC3BC,eAAe,EACfC,cAAc,EACdC,oBAAoBT,2BAA2B,EAC/CU,WAAW,IAAI,EACfC,YAAY,IAAI,EAChBC,OAAO,EACPC,SAAS,EACTC,oBAAoB,EACpBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,WAAW,EACXC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACe;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGjC;IACzC,MAAMkC,yBAAyBjC,yBAAyB;QAAE+B;QAAcG,MAAMvB;IAAiB;IAE/F,MAAM,EACJwB,cAAc,EACdC,6BAA6B,EAC7BC,8BAA8B,EAC9B,GAAGC,aACJ,GAAGhC,SAAS;QACXM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMmB,WAAWtC,WACf+B,aACAM,aACA;QAAEV,WAAW1B;IAAuB,GACpC;QACEmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAGF,MAAMY,wBAAwB5C,MAAM6C,OAAO,CACzC,IAAO,CAAA;YACLC,wBAAwBvB,uBAAuBrB,OAAOsC;YACtDO,yBAAyBN;QAC3B,CAAA,GACA;QAACD;QAA+BC;QAAgClB;KAAqB;IAGvF,qBACE,KAAChB;QACCM,eAAeZ,WACbY,eACAF,OAAOqC,aAAa,EACpBX,wBACAE;QAED,GAAGI,QAAQ;QACX,GAAGT,SAAS;kBAEb,cAAA,KAAC1B,0BAA0ByC,QAAQ;YAACC,OAAON;sBACxC9B;;;AAIT,EAAE"}