@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/hooks/useDirection.js

@@ -1,55 +0,0 @@
-import * as React from "react";
-import { useDOM } from "../lib/dom.js";
-import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
-/**
- * Определяет направление текста элемента.
- *
- * ## Ограничения
- *
- * - Не следит за изменением направлением.
- * - Определяется только на второй рендер.
- *
- * ## Пример
- *
- * ```jsx
- * import { strict as assert } from 'node:assert';
- *
- * const Component = () => {
- *   const [ref, direction, writingMode] = useDirection();
- *
- *   React.useEffect(()=>{
- *     if (!direction || !writingMode) {
- *       return
- *     }
- *
- *     assert.equal(direction, 'ltr')
- *     assert.equal(writingMode, 'vertical-rl')
- *   }, [direction, writingMode])
- *
- *   return <div ref={ref} style={{writingMode: 'vertical-rl'}}>我家没有电脑。</div>
- * }
- * ```
- */ export function useDirection() {
-    const ref = React.useRef(null);
-    const [direction, setDirection] = React.useState(undefined);
-    const [writingMode, setWritingMode] = React.useState(undefined);
-    const { window } = useDOM();
-    const update = ()=>{
-        if (!window || !ref.current) {
-            return;
-        }
-        const styleDeclaration = window.getComputedStyle(ref.current);
-        setDirection(styleDeclaration.direction);
-        setWritingMode(styleDeclaration.writingMode);
-    };
-    useIsomorphicLayoutEffect(update, [
-        window
-    ]);
-    return [
-        ref,
-        direction,
-        writingMode
-    ];
-}
-
-//# sourceMappingURL=useDirection.js.map

package/dist/hooks/useDirection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useDirection.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport type Direction = 'ltr' | 'rtl';\ntype WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';\n\n/**\n * Определяет направление текста элемента.\n *\n * ## Ограничения\n *\n * - Не следит за изменением направлением.\n * - Определяется только на второй рендер.\n *\n * ## Пример\n *\n * ```jsx\n * import { strict as assert } from 'node:assert';\n *\n * const Component = () => {\n *   const [ref, direction, writingMode] = useDirection();\n *\n *   React.useEffect(()=>{\n *     if (!direction || !writingMode) {\n *       return\n *     }\n *\n *     assert.equal(direction, 'ltr')\n *     assert.equal(writingMode, 'vertical-rl')\n *   }, [direction, writingMode])\n *\n *   return <div ref={ref} style={{writingMode: 'vertical-rl'}}>我家没有电脑。</div>\n * }\n * ```\n */\nexport function useDirection<T extends HTMLElement>(): [\n  React.RefObject<T | null>,\n  Direction | undefined,\n  WritingMode | undefined,\n] {\n  const ref = React.useRef<T | null>(null);\n\n  const [direction, setDirection] = React.useState<Direction | undefined>(undefined);\n  const [writingMode, setWritingMode] = React.useState<WritingMode | undefined>(undefined);\n\n  const { window } = useDOM();\n\n  const update = () => {\n    if (!window || !ref.current) {\n      return;\n    }\n\n    const styleDeclaration = window.getComputedStyle(ref.current);\n\n    setDirection(styleDeclaration.direction as Direction);\n    setWritingMode(styleDeclaration.writingMode as WritingMode);\n  };\n\n  useIsomorphicLayoutEffect(update, [window]);\n\n  return [ref, direction, writingMode];\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","useDirection","ref","useRef","direction","setDirection","useState","undefined","writingMode","setWritingMode","window","update","current","styleDeclaration","getComputedStyle"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAK7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC;IAKd,MAAMC,MAAMJ,MAAMK,MAAM,CAAW;IAEnC,MAAM,CAACC,WAAWC,aAAa,GAAGP,MAAMQ,QAAQ,CAAwBC;IACxE,MAAM,CAACC,aAAaC,eAAe,GAAGX,MAAMQ,QAAQ,CAA0BC;IAE9E,MAAM,EAAEG,MAAM,EAAE,GAAGX;IAEnB,MAAMY,SAAS;QACb,IAAI,CAACD,UAAU,CAACR,IAAIU,OAAO,EAAE;YAC3B;QACF;QAEA,MAAMC,mBAAmBH,OAAOI,gBAAgB,CAACZ,IAAIU,OAAO;QAE5DP,aAAaQ,iBAAiBT,SAAS;QACvCK,eAAeI,iBAAiBL,WAAW;IAC7C;IAEAR,0BAA0BW,QAAQ;QAACD;KAAO;IAE1C,OAAO;QAACR;QAAKE;QAAWI;KAAY;AACtC"}

package/dist/lib/tokens/index.d.ts

@@ -1,5 +0,0 @@
-export type { TokensClassNamesByAppearances, TokensClassNamesByPlatforms, TokensClassNames, } from './types';
-export { DEFAULT_TOKENS_CLASS_NAMES } from './constants';
-export { useTokensClassName } from './useTokenClassName';
-export { TokensClassProvider, type TokensClassProviderProps } from './TokensClassProvider';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/tokens/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,6BAA6B,EAC7B,2BAA2B,EAC3B,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/lib/tokens/index.js

@@ -1,5 +0,0 @@
-export { DEFAULT_TOKENS_CLASS_NAMES } from "./constants.js";
-export { useTokensClassName } from "./useTokenClassName.js";
-export { TokensClassProvider } from "./TokensClassProvider.js";
-
-//# sourceMappingURL=index.js.map

package/dist/lib/tokens/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/lib/tokens/index.ts"],"sourcesContent":["export type {\n  TokensClassNamesByAppearances,\n  TokensClassNamesByPlatforms,\n  TokensClassNames,\n} from './types';\n\nexport { DEFAULT_TOKENS_CLASS_NAMES } from './constants';\n\nexport { useTokensClassName } from './useTokenClassName';\n\nexport { TokensClassProvider, type TokensClassProviderProps } from './TokensClassProvider';\n"],"names":["DEFAULT_TOKENS_CLASS_NAMES","useTokensClassName","TokensClassProvider"],"mappings":"AAMA,SAASA,0BAA0B,QAAQ,iBAAc;AAEzD,SAASC,kBAAkB,QAAQ,yBAAsB;AAEzD,SAASC,mBAAmB,QAAuC,2BAAwB"}

package/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { usePlatform } from '../../hooks/usePlatform';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
-import styles from './ModalCardBase.module.css';
-
-interface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' | 'onClose'> {
-  onClose?: VoidFunction;
-  testId?: string;
-  mode?: 'inside' | 'outside';
-}
-
-export function ModalCardBaseCloseButton({
-  children = 'Закрыть',
-  testId,
-  mode,
-  onClose,
-}: ModalCardBaseCloseButtonProps): React.ReactNode {
-  const platform = usePlatform();
-  const { isDesktop } = useAdaptivityWithJSMediaQueries();
-
-  if (isDesktop && mode === 'outside') {
-    return (
-      <ModalDismissButton data-testid={testId} onClick={onClose}>
-        {children}
-      </ModalDismissButton>
-    );
-  }
-
-  if (mode === 'inside' || (platform === 'ios' && !isDesktop)) {
-    return (
-      <Tappable
-        className={styles.dismiss}
-        onClick={onClose}
-        hoverMode="opacity"
-        activeMode="opacity"
-        data-testid={testId}
-      >
-        <VisuallyHidden>{children}</VisuallyHidden>
-        {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}
-      </Tappable>
-    );
-  }
-
-  return null;
-}

package/src/hooks/useDirection.ts

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
-
-export type Direction = 'ltr' | 'rtl';
-type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
-
-/**
- * Определяет направление текста элемента.
- *
- * ## Ограничения
- *
- * - Не следит за изменением направлением.
- * - Определяется только на второй рендер.
- *
- * ## Пример
- *
- * ```jsx
- * import { strict as assert } from 'node:assert';
- *
- * const Component = () => {
- *   const [ref, direction, writingMode] = useDirection();
- *
- *   React.useEffect(()=>{
- *     if (!direction || !writingMode) {
- *       return
- *     }
- *
- *     assert.equal(direction, 'ltr')
- *     assert.equal(writingMode, 'vertical-rl')
- *   }, [direction, writingMode])
- *
- *   return <div ref={ref} style={{writingMode: 'vertical-rl'}}>我家没有电脑。</div>
- * }
- * ```
- */
-export function useDirection<T extends HTMLElement>(): [
-  React.RefObject<T | null>,
-  Direction | undefined,
-  WritingMode | undefined,
-] {
-  const ref = React.useRef<T | null>(null);
-
-  const [direction, setDirection] = React.useState<Direction | undefined>(undefined);
-  const [writingMode, setWritingMode] = React.useState<WritingMode | undefined>(undefined);
-
-  const { window } = useDOM();
-
-  const update = () => {
-    if (!window || !ref.current) {
-      return;
-    }
-
-    const styleDeclaration = window.getComputedStyle(ref.current);
-
-    setDirection(styleDeclaration.direction as Direction);
-    setWritingMode(styleDeclaration.writingMode as WritingMode);
-  };
-
-  useIsomorphicLayoutEffect(update, [window]);
-
-  return [ref, direction, writingMode];
-}

package/src/lib/tokens/index.ts

@@ -1,11 +0,0 @@
-export type {
-  TokensClassNamesByAppearances,
-  TokensClassNamesByPlatforms,
-  TokensClassNames,
-} from './types';
-
-export { DEFAULT_TOKENS_CLASS_NAMES } from './constants';
-
-export { useTokensClassName } from './useTokenClassName';
-
-export { TokensClassProvider, type TokensClassProviderProps } from './TokensClassProvider';