@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/dist/components/Tappable/Tappable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAO,EAA+C,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBvF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,KAAG,KAAK,CAAC,SAoCxB,CAAC"}
+{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAO,EAA+C,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBvF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,KAAG,KAAK,CAAC,SAqCxB,CAAC"}

package/dist/components/Tappable/Tappable.js

@@ -47,7 +47,7 @@ export const Tappable = (_param)=>{
         type: 'button'
     } : {};
     return /*#__PURE__*/ _jsxs(Clickable, _object_spread_props(_object_spread({
-        baseClassName: classNames(baseClassName, "vkuiTappable__host", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && "vkuiTappable__borderRadiusInherit", hasPointerClassName(hasPointer)),
+        baseClassName: classNames('vkuiInternalTappable', baseClassName, "vkuiTappable__host", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && "vkuiTappable__borderRadiusInherit", hasPointerClassName(hasPointer)),
         hoverClassName: hoverClass(hoverMode),
         activeClassName: activeClass(activeMode)
     }, typeProps, handlers, restProps), {

package/dist/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUA,OAAO,MAAMC,WAAW;QAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYZ,kBAAkB,EAC9Ba,aAAab,kBAAkB,EAC/Bc,aAAa,EACbC,eAAe,EAED,WADXC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcvB,eAAesB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGf;IAEvC,MAAM4B,aAAatB,mBAAmBgB,YAAYP;IAClD,MAAoCR,aAAAA,UAAUqB,YAAYb,aAApD,EAAEc,MAAM,EAAmB,GAAGtB,YAAjBuB,0CAAiBvB;QAA5BsB;;IAER,MAAME,WAAW7B,WAAW4B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC9B;QACCc,eAAenB,WACbmB,qCAEAS,UAAU1B,SAASkC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,kDACrBL,oBAAoBC;QAEtBqB,gBAAgB1B,WAAWW;QAC3BgB,iBAAiB7B,YAAYc;OACzBU,WACAD,UACAN;;YAEHL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACjB;gBAAOuB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUA,OAAO,MAAMC,WAAW;QAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYZ,kBAAkB,EAC9Ba,aAAab,kBAAkB,EAC/Bc,aAAa,EACbC,eAAe,EAED,WADXC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcvB,eAAesB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGf;IAEvC,MAAM4B,aAAatB,mBAAmBgB,YAAYP;IAClD,MAAoCR,aAAAA,UAAUqB,YAAYb,aAApD,EAAEc,MAAM,EAAmB,GAAGtB,YAAjBuB,0CAAiBvB;QAA5BsB;;IAER,MAAME,WAAW7B,WAAW4B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC9B;QACCc,eAAenB,WACb,wBACAmB,qCAEAS,UAAU1B,SAASkC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,kDACrBL,oBAAoBC;QAEtBqB,gBAAgB1B,WAAWW;QAC3BgB,iBAAiB7B,YAAYc;OACzBU,WACAD,UACAN;;YAEHL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACjB;gBAAOuB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/components/View/useLayoutEffectCall.d.ts

@@ -2,5 +2,5 @@
  * Возвращает функцию которая вызывает callback после изменения DOM, но до того
  * как пользователь увидит изменения
  */
-export declare function useLayoutEffectCall(): (fn: () => void) => void;
+export declare function useLayoutEffectCall(): (fn: () => void) => number;
 //# sourceMappingURL=useLayoutEffectCall.d.ts.map

package/dist/components/View/useLayoutEffectCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutEffectCall.d.ts","sourceRoot":"","sources":["../../../src/components/View/useLayoutEffectCall.tsx"],"names":[],"mappings":"AA0BA;;;GAGG;AACH,wBAAgB,mBAAmB,SATtB,MAAM,IAAI,UAoBtB"}
+{"version":3,"file":"useLayoutEffectCall.d.ts","sourceRoot":"","sources":["../../../src/components/View/useLayoutEffectCall.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,mBAAmB,SASE,MAAM,IAAI,YAG9C"}

package/dist/components/View/useLayoutEffectCall.js

@@ -1,44 +1,19 @@
-import { _ as _class_private_field_get } from "@swc/helpers/_/_class_private_field_get";
-import { _ as _class_private_field_init } from "@swc/helpers/_/_class_private_field_init";
-import { _ as _class_private_field_set } from "@swc/helpers/_/_class_private_field_set";
-import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-var _fns = /*#__PURE__*/ new WeakMap();
-class LayoutEffectCall {
-    /**
-   * Выполняет переданные функции
-   */ run() {
-        for (const fn of _class_private_field_get(this, _fns)){
-            fn();
-        }
-        _class_private_field_set(this, _fns, []);
-    }
-    constructor(){
-        _class_private_field_init(this, _fns, {
-            writable: true,
-            value: []
-        });
-        /**
-   * Вызовет функцию после изменения DOM, но до того как пользователь увидит
-   * изменения
-   */ _define_property(this, "add", (fn)=>{
-            _class_private_field_get(this, _fns).push(fn);
-        });
-    }
-}
 /**
  * Возвращает функцию которая вызывает callback после изменения DOM, но до того
  * как пользователь увидит изменения
  */ export function useLayoutEffectCall() {
-    const ref = React.useRef(null);
-    if (!ref.current) {
-        ref.current = new LayoutEffectCall();
-    }
+    const [fns] = React.useState(()=>[]);
     useIsomorphicLayoutEffect(()=>{
-        ref.current.run();
+        while(fns.length > 0){
+            fns.pop()();
+        }
     });
-    return ref.current.add;
+    const add = React.useCallback((fn)=>fns.push(fn), [
+        fns
+    ]);
+    return add;
 }
 
 //# sourceMappingURL=useLayoutEffectCall.js.map

package/dist/components/View/useLayoutEffectCall.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/View/useLayoutEffectCall.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nclass LayoutEffectCall {\n  #fns: Array<() => void> = [];\n\n  /**\n   * Выполняет переданные функции\n   */\n  run() {\n    for (const fn of this.#fns) {\n      fn();\n    }\n\n    this.#fns = [];\n  }\n\n  /**\n   * Вызовет функцию после изменения DOM, но до того как пользователь увидит\n   * изменения\n   */\n  add = (fn: () => void) => {\n    this.#fns.push(fn);\n  };\n}\n\n/**\n * Возвращает функцию которая вызывает callback после изменения DOM, но до того\n * как пользователь увидит изменения\n */\nexport function useLayoutEffectCall() {\n  const ref = React.useRef<LayoutEffectCall | null>(null);\n  if (!ref.current) {\n    ref.current = new LayoutEffectCall();\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current!.run();\n  });\n\n  return ref.current.add;\n}\n"],"names":["React","useIsomorphicLayoutEffect","LayoutEffectCall","run","fn","add","push","useLayoutEffectCall","ref","useRef","current"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;IAG9E;AADF,MAAMC;IAGJ;;GAEC,GACDC,MAAM;QACJ,KAAK,MAAMC,+BAAM,IAAI,EAAC,MAAM;YAC1BA;QACF;uCAEK,MAAO,EAAE;IAChB;;QAXA,gCAAA;;mBAA0B,EAAE;;QAa5B;;;GAGC,GACDC,uBAAAA,OAAM,CAACD;YACL,yBAAA,IAAI,EAAC,MAAKE,IAAI,CAACF;QACjB;;AACF;AAEA;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,MAAMR,MAAMS,MAAM,CAA0B;IAClD,IAAI,CAACD,IAAIE,OAAO,EAAE;QAChBF,IAAIE,OAAO,GAAG,IAAIR;IACpB;IAEAD,0BAA0B;QACxBO,IAAIE,OAAO,CAAEP,GAAG;IAClB;IAEA,OAAOK,IAAIE,OAAO,CAACL,GAAG;AACxB"}
+{"version":3,"sources":["../../../src/components/View/useLayoutEffectCall.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\n/**\n * Возвращает функцию которая вызывает callback после изменения DOM, но до того\n * как пользователь увидит изменения\n */\nexport function useLayoutEffectCall() {\n  const [fns] = React.useState<Array<() => void>>(() => []);\n\n  useIsomorphicLayoutEffect(() => {\n    while (fns.length > 0) {\n      fns.pop()!();\n    }\n  });\n\n  const add = React.useCallback((fn: () => void) => fns.push(fn), [fns]);\n\n  return add;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useLayoutEffectCall","fns","useState","length","pop","add","useCallback","fn","push"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF;;;CAGC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,IAAI,GAAGH,MAAMI,QAAQ,CAAoB,IAAM,EAAE;IAExDH,0BAA0B;QACxB,MAAOE,IAAIE,MAAM,GAAG,EAAG;YACrBF,IAAIG,GAAG;QACT;IACF;IAEA,MAAMC,MAAMP,MAAMQ,WAAW,CAAC,CAACC,KAAmBN,IAAIO,IAAI,CAACD,KAAK;QAACN;KAAI;IAErE,OAAOI;AACT"}