@vkontakte/vkui 7.1.3 → 7.2.0

package/src/index.ts

@@ -120,7 +120,7 @@ export type { SimpleGridProps } from './components/SimpleGrid/SimpleGrid';
 export { PopoutWrapper } from './components/PopoutWrapper/PopoutWrapper';
 export type { PopoutWrapperProps } from './components/PopoutWrapper/PopoutWrapper';
 export { Alert } from './components/Alert/Alert';
-export type { AlertProps, AlertActionInterface } from './components/Alert/Alert';
+export type { AlertProps, AlertActionProps, AlertActionInterface } from './components/Alert/Alert';
 export { ActionSheet } from './components/ActionSheet/ActionSheet';
 export type {
   ActionSheetProps,
@@ -136,6 +136,7 @@ export type { ScreenSpinnerContextProps } from './components/ScreenSpinner/conte
 export { Snackbar } from './components/Snackbar/Snackbar';
 export type { SnackbarProps } from './components/Snackbar/Snackbar';
 export { Tooltip } from './components/Tooltip/Tooltip';
+export { useTooltip } from './components/Tooltip/useTooltip';
 export type {
   TooltipProps,
   TooltipOnShownChange,
@@ -163,6 +164,8 @@ export { ModalCard } from './components/ModalCard/ModalCard';
 export type { ModalCardProps, ModalCardCloseReason } from './components/ModalCard/types';
 export { ModalDismissButton } from './components/ModalDismissButton/ModalDismissButton';
 export type { ModalDismissButtonProps } from './components/ModalDismissButton/ModalDismissButton';
+export { ModalOutsideButton } from './components/ModalOutsideButton/ModalOutsideButton';
+export type { ModalOutsideButtonProps } from './components/ModalOutsideButton/ModalOutsideButton';
 
 /**
  * Blocks
@@ -410,7 +413,9 @@ export { ColorScheme } from './lib/colorScheme';
 export type { ColorSchemeType } from './lib/colorScheme';
 export { DOMContext } from './lib/dom';
 export { LocaleProvider } from './components/LocaleProvider/LocaleProvider';
+export { DirectionProvider } from './components/DirectionProvider/DirectionProvider';
 export type { LocaleProviderProps } from './components/LocaleProvider/LocaleProvider';
+export type { DirectionProviderProps } from './components/DirectionProvider/DirectionProvider';
 export { PlatformProvider } from './components/PlatformProvider/PlatformProvider';
 export type { PlatformProviderProps } from './components/PlatformProvider/PlatformProvider';
 export { Popover } from './components/Popover/Popover';
@@ -431,6 +436,7 @@ export { withPlatform } from './hoc/withPlatform';
  * Hooks
  */
 export { usePlatform } from './hooks/usePlatform';
+export { useConfigDirection as useDirection } from './hooks/useConfigDirection';
 export { useAdaptivity } from './hooks/useAdaptivity';
 export {
   type UseAdaptivityConditionalRender,
@@ -445,12 +451,13 @@ export { usePagination } from './hooks/usePagination';
 export { type Orientation, useOrientationChange } from './hooks/useOrientationChange';
 export { usePatchChildren } from './hooks/usePatchChildren';
 export { useTodayDate } from './hooks/useTodayDate';
-export { useScrollLock } from './components/AppRoot/ScrollContext';
+export { useScrollLock, useManualScroll as useScroll } from './components/AppRoot/ScrollContext';
 export { useNavTransition } from './components/NavTransitionContext/NavTransitionContext';
 export { useNavDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
 export { useNavId } from './components/NavIdContext/useNavId';
 export type { TransitionDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
 export { useCSSKeyframesAnimationController as unstable_useCSSKeyframesAnimationController } from './lib/animation';
+export { useFocusVisible } from './hooks/useFocusVisible';
 
 /**
  * Utils

package/src/lib/SSR.tsx

@@ -3,23 +3,32 @@
 import * as React from 'react';
 import { ConfigProviderOverride } from '../components/ConfigProvider/ConfigProviderOverride';
 import { type BrowserInfo, computeBrowserInfo } from './browser';
+import { type Direction } from './direction';
 import { platform as getPlatform } from './platform';
 
 export interface SSRWrapperProps {
   userAgent?: string;
   browserInfo?: BrowserInfo;
+  direction?: Direction;
   children?: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SSR
  */
-export const SSRWrapper: React.FC<SSRWrapperProps> = ({ userAgent, browserInfo, children }) => {
+export const SSRWrapper: React.FC<SSRWrapperProps> = ({
+  userAgent,
+  browserInfo,
+  direction = 'ltr',
+  children,
+}) => {
   if (!browserInfo && userAgent) {
     browserInfo = computeBrowserInfo(userAgent);
   }
 
   return (
-    <ConfigProviderOverride platform={getPlatform(browserInfo)}>{children}</ConfigProviderOverride>
+    <ConfigProviderOverride direction={direction} platform={getPlatform(browserInfo)}>
+      {children}
+    </ConfigProviderOverride>
   );
 };

package/src/lib/date.ts

@@ -1,3 +1,4 @@
+import { TZDateMini } from '@date-fns/tz';
 import { lightFormat } from 'date-fns';
 
 export function parse(input: string, format: string, referenceDate: Date = new Date()): Date {
@@ -112,6 +113,28 @@ export function parse(input: string, format: string, referenceDate: Date = new D
   return date;
 }
 
+export const convertDateToTimeZone = (
+  date?: Date | null,
+  timezone?: string,
+): Date | undefined | null => {
+  if (!timezone) {
+    return date;
+  }
+  return date ? TZDateMini.tz(timezone, date) : undefined;
+};
+
+export const convertDateFromTimeZone = (
+  date?: Date | null,
+  timezone?: string,
+): Date | undefined | null => {
+  if (!timezone) {
+    return date;
+  }
+  // eslint-disable-next-line new-cap
+  const systemTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return date ? TZDateMini.tz(systemTimezone, date) : undefined;
+};
+
 export function format(date: Date | number, format: string): string {
   return lightFormat(date, format);
 }

package/src/lib/direction/index.ts

@@ -0,0 +1 @@
+export type Direction = 'ltr' | 'rtl';

package/src/lib/floating/adapters.ts

@@ -19,6 +19,8 @@ export {
   getOverflowAncestors,
 } from '@vkontakte/vkui-floating-ui/react-dom';
 
+export type { FlipOptions as FlipMiddlewareOptions } from '@vkontakte/vkui-floating-ui/react-dom';
+
 const defaultOptions = {
   ancestorScroll: true,
   ancestorResize: true,

package/src/lib/floating/customResizeObserver.ts

@@ -42,8 +42,9 @@ export class CustomResizeObserver {
     iframe: HTMLIFrameElement;
   }> = [];
   mutationObserverFallback: MutationObserver | null = null;
+  private readonly updateFunction: () => void;
 
-  constructor(private readonly updateFunction: () => void) {
+  constructor(updateFunction: () => void) {
     this.updateFunction = updateFunction;
   }
 

package/src/lib/floating/functions.ts

@@ -16,18 +16,26 @@ export function getAutoPlacementAlign(placement: AutoPlacementType): 'start' | '
   return align === 'start' || align === 'end' ? align : null;
 }
 
+export type ConvertFloatingDataArgs = {
+  strategy: FloatingPositionStrategy;
+  x: UseFloatingData['x'];
+  y: UseFloatingData['y'];
+  initialWidth?: React.CSSProperties['width'] | null;
+  middlewareData?: UseFloatingData['middlewareData'];
+};
+
 /**
  * Note: не используем `translate3d`, чтобы в лишний раз не выносить в отдельный слой и не занимать память в GPU.
  *
  * см. https://floating-ui.com/docs/react#positioning
  */
-export function convertFloatingDataToReactCSSProperties(
-  strategy: FloatingPositionStrategy,
-  x: UseFloatingData['x'],
-  y: UseFloatingData['y'],
-  initialWidth: React.CSSProperties['width'] | null = 'max-content',
-  middlewareData?: UseFloatingData['middlewareData'],
-): React.CSSProperties {
+export function convertFloatingDataToReactCSSProperties({
+  strategy,
+  x,
+  y,
+  initialWidth = 'max-content',
+  middlewareData,
+}: ConvertFloatingDataArgs): React.CSSProperties {
   const styles: React.CSSProperties = {
     position: strategy,
     top: y,

package/src/lib/floating/types/component.ts

@@ -59,4 +59,14 @@ export interface FloatingComponentProps
    * чтобы всплывающий элемент вместился в эту область видимости.
    */
   onPlacementChange?: OnPlacementChange;
+  /**
+   * Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`.
+   *
+   * > Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента
+   */
+  onReferenceHiddenChange?: (hidden: boolean) => void;
+  /**
+   * Позволяет отключить захват фокуса.
+   */
+  disableFocusTrap?: boolean;
 }

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -3,6 +3,7 @@ import {
   arrowMiddleware,
   autoPlacementMiddleware,
   flipMiddleware,
+  type FlipMiddlewareOptions,
   hideMiddleware,
   offsetMiddleware,
   shiftMiddleware,
@@ -26,6 +27,7 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
    * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
    */
   disableFlipMiddleware?: boolean;
+  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
   /**
    * Отступ по главной оси.
    */
@@ -73,6 +75,7 @@ export const useFloatingMiddlewaresBootstrap = ({
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  flipMiddlewareFallbackAxisSideDirection = 'start',
 }: UseFloatingMiddlewaresBootstrapOptions): {
   middlewares: UseFloatingMiddleware[];
   strictPlacement: Placement | undefined;
@@ -92,7 +95,8 @@ export const useFloatingMiddlewaresBootstrap = ({
     } else if (!disableFlipMiddleware) {
       middlewares.push(
         flipMiddleware({
-          fallbackAxisSideDirection: 'start',
+          fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
+          crossAxis: false,
         }),
       );
     }
@@ -137,6 +141,7 @@ export const useFloatingMiddlewaresBootstrap = ({
     arrowHeight,
     offsetByMainAxis,
     disableFlipMiddleware,
+    flipMiddlewareFallbackAxisSideDirection,
     sameWidth,
     customMiddlewares,
     hideWhenReferenceHidden,

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -329,13 +329,12 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   }, [triggerOnHover, triggerOnFocus, triggerOnClick]);
 
   if (shownFinalState) {
-    floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(
+    floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties({
       strategy,
       x,
       y,
-      undefined,
       middlewareData,
-    );
+    });
 
     if (disableInteractive) {
       floatingPropsRef.current.style.pointerEvents = 'none';

package/src/lib/floating/useReferenceHiddenChangeCallback.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { type UseFloatingData } from './types/common';
+import { type FloatingComponentProps } from './types/component';
+
+export function useReferenceHiddenChangeCallback(
+  hideMiddleware: UseFloatingData['middlewareData']['hide'],
+  onReferenceHiddenChange: FloatingComponentProps['onReferenceHiddenChange'],
+) {
+  const prevHiddenRef = React.useRef<boolean | undefined>(hideMiddleware?.referenceHidden);
+  React.useEffect(() => {
+    prevHiddenRef.current = hideMiddleware?.referenceHidden;
+  });
+
+  useIsomorphicLayoutEffect(
+    function checkHiddenChanged() {
+      if (!onReferenceHiddenChange) {
+        return;
+      }
+      if (hideMiddleware?.referenceHidden !== prevHiddenRef.current) {
+        onReferenceHiddenChange(hideMiddleware?.referenceHidden || false);
+      }
+    },
+    [hideMiddleware?.referenceHidden, onReferenceHiddenChange],
+  );
+}

package/src/lib/object.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function mapObject<T extends Object, R extends Record<keyof T, any>>(
+  object: T,
+  map: (value: T[keyof T], key: keyof T) => R[keyof T],
+): R {
+  return Object.entries(object).reduce(
+    (acc, [key, value]) =>
+      Object.assign(acc, {
+        [key]: map(value, key as keyof T),
+      }),
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/prefer-reduce-type-parameter
+    {} as R,
+  );
+}

package/src/lib/select.ts

@@ -16,6 +16,8 @@ export type FilterFn<O extends Option> = (
   getOptionsLabel?: GetOptionLabel<O>,
 ) => boolean;
 
+export type SortFn<O extends Option> = (optionA: O, optionB: O, inputValue: string) => number;
+
 function getOptionLabelDefault<O extends Option>(option: O): O['label'] {
   return option.label;
 }

package/src/lib/sheet/controllers/BottomSheetController.ts

@@ -26,8 +26,10 @@ export type BottomSheetControllerOptions = {
 };
 
 export class BottomSheetController {
+  private readonly sheetEl: HTMLElement;
+
   constructor(
-    private readonly sheetEl: HTMLElement,
+    sheetEl: HTMLElement,
     {
       sheetScrollEl,
       sheetTransitionController,
@@ -36,6 +38,7 @@ export class BottomSheetController {
       onDismiss,
     }: BottomSheetControllerOptions,
   ) {
+    this.sheetEl = sheetEl;
     this.onSnapPointChange = onSnapPointChange;
     this.onDismiss = onDismiss;
     this.panGestureRecognizer = new UIPanGestureRecognizer();

package/src/lib/sheet/controllers/CSSTransitionController.ts

@@ -1,10 +1,13 @@
 export type CSSTransitionControllerUnit = 'px' | '%' | '';
 
 export class CSSTransitionController<V extends number | string = number> {
-  constructor(
-    public readonly el: HTMLElement,
-    public readonly property: string,
-  ) {}
+  public readonly el: HTMLElement;
+  public readonly property: string;
+
+  constructor(el: HTMLElement, property: string) {
+    this.el = el;
+    this.property = property;
+  }
 
   set(to: V) {
     this.el.style.setProperty(this.property, `${to}`);

package/src/lib/tokens/TokensClassProvider.module.css

@@ -1,4 +1,4 @@
 .defaultColor {
-  color-scheme: var(--vkui--colors_scheme);
   color: var(--vkui--color_text_primary);
+  color-scheme: var(--vkui--colors_scheme);
 }

package/src/styles/common.css

@@ -22,9 +22,9 @@
 .vkui > body,
 .vkui,
 .vkui__root {
-  margin: 0;
-  padding: 0;
   block-size: 100%;
+  padding: 0;
+  margin: 0;
   color-scheme: var(--vkui--colors_scheme);
 }
 

package/dist/components/ModalCardBase/ModalCardBaseCloseButton.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { type TappableProps } from '../Tappable/Tappable';
-interface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' | 'onClose'> {
-    onClose?: VoidFunction;
-    testId?: string;
-    mode?: 'inside' | 'outside';
-}
-export declare function ModalCardBaseCloseButton({ children, testId, mode, onClose, }: ModalCardBaseCloseButtonProps): React.ReactNode;
-export {};
-//# sourceMappingURL=ModalCardBaseCloseButton.d.ts.map

package/dist/components/ModalCardBase/ModalCardBaseCloseButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalCardBaseCloseButton.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCardBase/ModalCardBaseCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIpE,UAAU,6BAA8B,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACrF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B;AAED,wBAAgB,wBAAwB,CAAC,EACvC,QAAoB,EACpB,MAAM,EACN,IAAI,EACJ,OAAO,GACR,EAAE,6BAA6B,GAAG,KAAK,CAAC,SAAS,CA4BjD"}

package/dist/components/ModalCardBase/ModalCardBaseCloseButton.js

@@ -1,38 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Icon20Cancel, Icon24Dismiss } from "@vkontakte/icons";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
-import { Tappable } from "../Tappable/Tappable.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
-export function ModalCardBaseCloseButton({ children = 'Закрыть', testId, mode, onClose }) {
-    const platform = usePlatform();
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    if (isDesktop && mode === 'outside') {
-        return /*#__PURE__*/ _jsx(ModalDismissButton, {
-            "data-testid": testId,
-            onClick: onClose,
-            children: children
-        });
-    }
-    if (mode === 'inside' || platform === 'ios' && !isDesktop) {
-        return /*#__PURE__*/ _jsxs(Tappable, {
-            className: "vkuiModalCardBase__dismiss",
-            onClick: onClose,
-            hoverMode: "opacity",
-            activeMode: "opacity",
-            "data-testid": testId,
-            children: [
-                /*#__PURE__*/ _jsx(VisuallyHidden, {
-                    children: children
-                }),
-                platform === 'ios' ? /*#__PURE__*/ _jsx(Icon24Dismiss, {}) : /*#__PURE__*/ _jsx(Icon20Cancel, {})
-            ]
-        });
-    }
-    return null;
-}
-
-//# sourceMappingURL=ModalCardBaseCloseButton.js.map

package/dist/components/ModalCardBase/ModalCardBaseCloseButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalCardBase/ModalCardBaseCloseButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalCardBase.module.css';\n\ninterface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' | 'onClose'> {\n  onClose?: VoidFunction;\n  testId?: string;\n  mode?: 'inside' | 'outside';\n}\n\nexport function ModalCardBaseCloseButton({\n  children = 'Закрыть',\n  testId,\n  mode,\n  onClose,\n}: ModalCardBaseCloseButtonProps): React.ReactNode {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  if (isDesktop && mode === 'outside') {\n    return (\n      <ModalDismissButton data-testid={testId} onClick={onClose}>\n        {children}\n      </ModalDismissButton>\n    );\n  }\n\n  if (mode === 'inside' || (platform === 'ios' && !isDesktop)) {\n    return (\n      <Tappable\n        className={styles.dismiss}\n        onClick={onClose}\n        hoverMode=\"opacity\"\n        activeMode=\"opacity\"\n        data-testid={testId}\n      >\n        <VisuallyHidden>{children}</VisuallyHidden>\n        {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}\n      </Tappable>\n    );\n  }\n\n  return null;\n}\n"],"names":["React","Icon20Cancel","Icon24Dismiss","useAdaptivityWithJSMediaQueries","usePlatform","ModalDismissButton","Tappable","VisuallyHidden","ModalCardBaseCloseButton","children","testId","mode","onClose","platform","isDesktop","data-testid","onClick","className","hoverMode","activeMode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,QAAQ,mBAAmB;AAC/D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AASlE,OAAO,SAASC,yBAAyB,EACvCC,WAAW,SAAS,EACpBC,MAAM,EACNC,IAAI,EACJC,OAAO,EACuB;IAC9B,MAAMC,WAAWT;IACjB,MAAM,EAAEU,SAAS,EAAE,GAAGX;IAEtB,IAAIW,aAAaH,SAAS,WAAW;QACnC,qBACE,KAACN;YAAmBU,eAAaL;YAAQM,SAASJ;sBAC/CH;;IAGP;IAEA,IAAIE,SAAS,YAAaE,aAAa,SAAS,CAACC,WAAY;QAC3D,qBACE,MAACR;YACCW,SAAS;YACTD,SAASJ;YACTM,WAAU;YACVC,YAAW;YACXJ,eAAaL;;8BAEb,KAACH;8BAAgBE;;gBAChBI,aAAa,sBAAQ,KAACX,mCAAmB,KAACD;;;IAGjD;IAEA,OAAO;AACT"}

package/dist/cssm/components/ModalCardBase/ModalCardBaseCloseButton.js

@@ -1,39 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Icon20Cancel, Icon24Dismiss } from "@vkontakte/icons";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
-import { Tappable } from "../Tappable/Tappable.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
-import styles from "./ModalCardBase.module.css";
-export function ModalCardBaseCloseButton({ children = 'Закрыть', testId, mode, onClose }) {
-    const platform = usePlatform();
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    if (isDesktop && mode === 'outside') {
-        return /*#__PURE__*/ _jsx(ModalDismissButton, {
-            "data-testid": testId,
-            onClick: onClose,
-            children: children
-        });
-    }
-    if (mode === 'inside' || platform === 'ios' && !isDesktop) {
-        return /*#__PURE__*/ _jsxs(Tappable, {
-            className: styles.dismiss,
-            onClick: onClose,
-            hoverMode: "opacity",
-            activeMode: "opacity",
-            "data-testid": testId,
-            children: [
-                /*#__PURE__*/ _jsx(VisuallyHidden, {
-                    children: children
-                }),
-                platform === 'ios' ? /*#__PURE__*/ _jsx(Icon24Dismiss, {}) : /*#__PURE__*/ _jsx(Icon20Cancel, {})
-            ]
-        });
-    }
-    return null;
-}
-
-//# sourceMappingURL=ModalCardBaseCloseButton.js.map

package/dist/cssm/components/ModalCardBase/ModalCardBaseCloseButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBaseCloseButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalCardBase.module.css';\n\ninterface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' | 'onClose'> {\n  onClose?: VoidFunction;\n  testId?: string;\n  mode?: 'inside' | 'outside';\n}\n\nexport function ModalCardBaseCloseButton({\n  children = 'Закрыть',\n  testId,\n  mode,\n  onClose,\n}: ModalCardBaseCloseButtonProps): React.ReactNode {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  if (isDesktop && mode === 'outside') {\n    return (\n      <ModalDismissButton data-testid={testId} onClick={onClose}>\n        {children}\n      </ModalDismissButton>\n    );\n  }\n\n  if (mode === 'inside' || (platform === 'ios' && !isDesktop)) {\n    return (\n      <Tappable\n        className={styles.dismiss}\n        onClick={onClose}\n        hoverMode=\"opacity\"\n        activeMode=\"opacity\"\n        data-testid={testId}\n      >\n        <VisuallyHidden>{children}</VisuallyHidden>\n        {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}\n      </Tappable>\n    );\n  }\n\n  return null;\n}\n"],"names":["React","Icon20Cancel","Icon24Dismiss","useAdaptivityWithJSMediaQueries","usePlatform","ModalDismissButton","Tappable","VisuallyHidden","styles","ModalCardBaseCloseButton","children","testId","mode","onClose","platform","isDesktop","data-testid","onClick","className","dismiss","hoverMode","activeMode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,QAAQ,mBAAmB;AAC/D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,6BAA6B;AAQhD,OAAO,SAASC,yBAAyB,EACvCC,WAAW,SAAS,EACpBC,MAAM,EACNC,IAAI,EACJC,OAAO,EACuB;IAC9B,MAAMC,WAAWV;IACjB,MAAM,EAAEW,SAAS,EAAE,GAAGZ;IAEtB,IAAIY,aAAaH,SAAS,WAAW;QACnC,qBACE,KAACP;YAAmBW,eAAaL;YAAQM,SAASJ;sBAC/CH;;IAGP;IAEA,IAAIE,SAAS,YAAaE,aAAa,SAAS,CAACC,WAAY;QAC3D,qBACE,MAACT;YACCY,WAAWV,OAAOW,OAAO;YACzBF,SAASJ;YACTO,WAAU;YACVC,YAAW;YACXL,eAAaL;;8BAEb,KAACJ;8BAAgBG;;gBAChBI,aAAa,sBAAQ,KAACZ,mCAAmB,KAACD;;;IAGjD;IAEA,OAAO;AACT"}

package/dist/cssm/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/cssm/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/cssm/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/cssm/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/dist/hooks/useDirection.d.ts

@@ -1,39 +0,0 @@
-import * as React from 'react';
-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 declare function useDirection<T extends HTMLElement>(): [
-    React.RefObject<T | null>,
-    Direction | undefined,
-    WritingMode | undefined
-];
-export {};
-//# sourceMappingURL=useDirection.d.ts.map

package/dist/hooks/useDirection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDirection.d.ts","sourceRoot":"","sources":["../../src/hooks/useDirection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AACtC,KAAK,WAAW,GAAG,eAAe,GAAG,aAAa,GAAG,aAAa,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,KAAK;IACrD,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;IACzB,SAAS,GAAG,SAAS;IACrB,WAAW,GAAG,SAAS;CACxB,CAsBA"}