@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/components/ConfigProvider/ConfigProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n  useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const mergeProps = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n\n  const configContext = useConfigProviderContextMemo({\n    ...mergeProps,\n    colorScheme,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <IconAppearanceProvider value={colorScheme}>\n        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","configContext","Provider","value","children"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,mBAAmB,QAAQ,4BAAmB;AACvD,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa,mBACdD,cACAD;IAGL,MAAMG,cAAcX,yBAAyBU,WAAWC,WAAW;IAEnE,MAAMC,gBAAgBP,6BAA6B,wCAC9CK;QACHC;;IAGF,qBACE,KAACR,sBAAsBU,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACb;YAAuBe,OAAOH;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWK,QAAQ;;;;AAIjD,EAAE"}
+{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n  useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const mergeProps = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n  const direction = useAutoDetectDirection(mergeProps.direction);\n\n  const configContext = useConfigProviderContextMemo({\n    ...mergeProps,\n    colorScheme,\n    direction,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <IconAppearanceProvider value={colorScheme}>\n        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa,mBACdD,cACAD;IAGL,MAAMG,cAAcZ,yBAAyBW,WAAWC,WAAW;IACnE,MAAMC,YAAYZ,uBAAuBU,WAAWE,SAAS;IAE7D,MAAMC,gBAAgBR,6BAA6B,wCAC9CK;QACHC;QACAC;;IAGF,qBACE,KAACT,sBAAsBW,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACf;YAAuBiB,OAAOJ;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWM,QAAQ;;;;AAIjD,EAAE"}

package/dist/components/ConfigProvider/ConfigProviderContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { ColorSchemeType } from '../../lib/colorScheme';
+import { type Direction } from '../../lib/direction';
 import { type PlatformType } from '../../lib/platform';
-import { type TokensClassNames } from '../../lib/tokens';
+import { type TokensClassNames } from '../../lib/tokens/types';
 export interface ConfigProviderContextInterface {
     /**
      * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.
@@ -69,6 +70,15 @@ export interface ConfigProviderContextInterface {
      * Строка с языковой меткой BCP 47
      */
     locale: string;
+    /**
+     * Направление контента.
+     *
+     * При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,
+     * либо на все страницу в целом.
+     *
+     * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы
+     */
+    direction: Direction | undefined;
 }
 export declare const ConfigProviderContext: React.Context<ConfigProviderContextInterface>;
 export declare const useConfigProvider: () => ConfigProviderContextInterface;

package/dist/components/ConfigProvider/ConfigProviderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProviderContext.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAA8B,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAErF,MAAM,WAAW,8BAA8B;IAC7C;;;;;;;;OAQG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,yBAAyB,EAAE,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,8BAA8B,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,uBAAuB,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,OAAO,CAAC,8BAA8B,CAU5E,CAAC;AAEL,eAAO,MAAM,iBAAiB,QAAO,8BACI,CAAC;AAE1C,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,8BAA8B,kCAkClF"}
+{"version":3,"file":"ConfigProviderContext.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,MAAM,WAAW,8BAA8B;IAC7C;;;;;;;;OAQG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,yBAAyB,EAAE,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,8BAA8B,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,uBAAuB,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,OAAO,CAAC,8BAA8B,CAW5E,CAAC;AAEL,eAAO,MAAM,iBAAiB,QAAO,8BACI,CAAC;AAE1C,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,8BAA8B,kCAoClF"}

package/dist/components/ConfigProvider/ConfigProviderContext.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { platform } from "../../lib/platform.js";
-import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/index.js";
+import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/constants.js";
 export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     hasCustomPanelHeaderAfter: false,
     customPanelHeaderAfterMinWidth: 90,
@@ -10,12 +10,14 @@ export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     platform: platform(),
     colorScheme: undefined,
     tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
-    locale: 'ru'
+    locale: 'ru',
+    direction: undefined
 });
 export const useConfigProvider = ()=>React.useContext(ConfigProviderContext);
 export function useConfigProviderContextMemo(config) {
-    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale } = config;
-    return React.useMemo(()=>({
+    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale, direction } = config;
+    return React.useMemo(()=>{
+        return {
             isWebView,
             hasCustomPanelHeaderAfter,
             customPanelHeaderAfterMinWidth,
@@ -23,8 +25,10 @@ export function useConfigProviderContextMemo(config) {
             transitionMotionEnabled,
             platform,
             tokensClassNames,
-            locale
-        }), [
+            locale,
+            direction
+        };
+    }, [
         isWebView,
         hasCustomPanelHeaderAfter,
         customPanelHeaderAfterMinWidth,
@@ -32,7 +36,8 @@ export function useConfigProviderContextMemo(config) {
         transitionMotionEnabled,
         platform,
         tokensClassNames,
-        locale
+        locale,
+        direction
     ]);
 }
 

package/dist/components/ConfigProvider/ConfigProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  colorScheme: ColorSchemeType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n  React.createContext<ConfigProviderContextInterface>({\n    hasCustomPanelHeaderAfter: false,\n    customPanelHeaderAfterMinWidth: 90,\n    isWebView: false,\n    transitionMotionEnabled: true,\n    platform: platform(),\n    colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n    tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n    locale: 'ru',\n  });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n  React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n  const {\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n  } = config;\n\n  return React.useMemo<ConfigProviderContextInterface>(\n    () => ({\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n    }),\n    [\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n    ],\n  );\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAA+B,4BAAmB;AAuErF,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;AACV,GAAG;AAEL,OAAO,MAAMC,oBAAoB,IAC/Bb,MAAMc,UAAU,CAACX,uBAAuB;AAE1C,OAAO,SAASY,6BAA6BC,MAAsC;IACjF,MAAM,EACJT,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACP,GAAGI;IAEJ,OAAOhB,MAAMiB,OAAO,CAClB,IAAO,CAAA;YACLV;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;QACF,CAAA,GACA;QACEL;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { type Direction } from '../../lib/direction';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';\nimport { type TokensClassNames } from '../../lib/tokens/types';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  colorScheme: ColorSchemeType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n  /**\n   * Направление контента.\n   *\n   * При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,\n   * либо на все страницу в целом.\n   *\n   * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы\n   */\n  direction: Direction | undefined;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n  React.createContext<ConfigProviderContextInterface>({\n    hasCustomPanelHeaderAfter: false,\n    customPanelHeaderAfterMinWidth: 90,\n    isWebView: false,\n    transitionMotionEnabled: true,\n    platform: platform(),\n    colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n    tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n    locale: 'ru',\n    direction: undefined,\n  });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n  React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n  const {\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n    direction,\n  } = config;\n\n  return React.useMemo<ConfigProviderContextInterface>(() => {\n    return {\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n      direction,\n    };\n  }, [\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n    direction,\n  ]);\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","direction","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAAQ,gCAA6B;AAiFxE,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;IACRC,WAAWH;AACb,GAAG;AAEL,OAAO,MAAMI,oBAAoB,IAC/Bd,MAAMe,UAAU,CAACZ,uBAAuB;AAE1C,OAAO,SAASa,6BAA6BC,MAAsC;IACjF,MAAM,EACJV,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACV,GAAGI;IAEJ,OAAOjB,MAAMkB,OAAO,CAAiC;QACnD,OAAO;YACLX;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;YACAC;QACF;IACF,GAAG;QACDN;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;QACAC;KACD;AACH"}

package/dist/components/ContentCard/ContentCard.d.ts

@@ -28,9 +28,14 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, HasCompone
      */
     maxHeight?: number;
     mode?: CardProps['mode'];
+    /**
+     * Пользовательское значения стиля `object-fit` для картинки
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+     */
+    imageObjectFit?: React.CSSProperties['objectFit'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */
-export declare const ContentCard: ({ overTitle, title, titleComponent, description, caption, className, mode, style, getRootRef, getRef, maxHeight, src, srcSet, alt, width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, hasHover, hasActive, Component, ...restProps }: ContentCardProps) => React.ReactNode;
+export declare const ContentCard: ({ overTitle, title, titleComponent, description, caption, className, mode, style, getRootRef, getRef, maxHeight, src, srcSet, alt, width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, imageObjectFit, hasHover, hasActive, Component, ...restProps }: ContentCardProps) => React.ReactNode;
 //# sourceMappingURL=ContentCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,mRA8BrB,gBAAgB,KAAG,KAAK,CAAC,SA0D3B,CAAC"}
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,gSA+BzB,gBAAgB,KAAG,KAAK,CAAC,SA0D3B,CAAC"}

package/dist/components/ContentCard/ContentCard.js

@@ -16,7 +16,7 @@ import { Text } from "../Typography/Text/Text.js";
  */ export const ContentCard = (_param)=>{
     var { overTitle, title, titleComponent = 'span', description, caption, // card props
     className, mode = 'shadow', style, getRootRef, // img props
-    getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, hasHover = false, hasActive = false, Component = 'li' } = _param, restProps = _object_without_properties(_param, [
+    getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, imageObjectFit, hasHover = false, hasActive = false, Component = 'li' } = _param, restProps = _object_without_properties(_param, [
         "overTitle",
         "title",
         "titleComponent",
@@ -40,6 +40,7 @@ import { Text } from "../Typography/Text/Text.js";
         "sizes",
         "useMap",
         "fetchPriority",
+        "imageObjectFit",
         "hasHover",
         "hasActive",
         "Component"
@@ -69,10 +70,11 @@ import { Text } from "../Typography/Text/Text.js";
                     useMap: useMap
                 }, getFetchPriorityProp(fetchPriority)), {
                     height: height,
+                    width: width,
                     style: {
-                        maxHeight
-                    },
-                    width: "100%"
+                        maxHeight,
+                        objectFit: imageObjectFit
+                    }
                 })),
                 /*#__PURE__*/ _jsxs("div", {
                     className: "vkuiContentCard__body",

package/dist/components/ContentCard/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","hasHover","hasActive","Component","restProps","disabled","img","ref","div","weight","level","caps"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAoC/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAEC,WADdC;QA5BH1B;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAChC;QACCa,MAAMA;QACNE,YAAYA;QACZiB,WAAWA;QACXlB,OAAOA;QACPF,WAAWf,WAAWoC,UAAUC,QAAQ,iCAAqBtB;kBAE7D,cAAA,MAACX,kDACKgC;YACJH,UAAUA;YACVC,WAAWA;YACXnB,SAAS;;gBAEPM,CAAAA,OAAOC,MAAK,mBACZ,KAACgB;oBACCC,KAAKpB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;mBACJ7B,qBAAqB8B;oBACzBP,QAAQA;oBACRR,OAAO;wBAAEG;oBAAU;oBACnBI,OAAM;;8BAGV,MAACgB;oBAAIzB,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACXyC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHjC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe0B,QAAO;4BAAIC,OAAM;4BAAIP,WAAWvB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","img","ref","objectFit","div","weight","level","caps"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAyC/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAEC,WADdC;QA7BH3B;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACjC;QACCa,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWf,WAAWqC,UAAUC,QAAQ,iCAAqBvB;kBAE7D,cAAA,MAACX,kDACKiC;YACJH,UAAUA;YACVC,WAAWA;YACXpB,SAAS;;gBAEPM,CAAAA,OAAOC,MAAK,mBACZ,KAACiB;oBACCC,KAAKrB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;mBACJ7B,qBAAqB8B;oBACzBP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWqB,WAAWR;oBAAe;;8BAGlD,MAACS;oBAAI3B,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACX2C,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHnC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe4B,QAAO;4BAAIC,OAAM;4BAAIR,WAAWxB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyBvF,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;IAE7E;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2GASjB,YAAY,KAAG,KAAK,CAAC,SAsDvB,CAAC"}
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyBvF,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;IAE7E;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,wGASrB,YAAY,KAAG,KAAK,CAAC,SAsDvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAc9C,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,6IAU1B,qBAAqB,KAAG,KAAK,CAAC,SAkBhC,CAAC"}
+{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAc9C,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,0IAU9B,qBAAqB,KAAG,KAAK,CAAC,SAkBhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/CustomSelect/CustomSelect.js

@@ -8,6 +8,7 @@ import { classNames, debounce } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useFocusWithin } from "../../hooks/useFocusWithin.js";
+import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { useDOM } from "../../lib/dom.js";
 import { defaultFilterFn } from "../../lib/select.js";
@@ -81,6 +82,9 @@ function findSelectedIndex(options = [], value) {
 const filter = (options, inputValue, filterFn)=>{
     return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
+function isMousePositionChanged(event, prevPosition) {
+    return Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1;
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */ export function CustomSelect(props) {
@@ -131,10 +135,11 @@ const filter = (options, inputValue, filterFn)=>{
     const scrollBoxRef = React.useRef(null);
     const selectElRef = useExternRef(getRef);
     const optionsWrapperRef = React.useRef(null);
+    const scrollPerformedRef = React.useRef(false);
     const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
     const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
     const [inputValue, setInputValue] = React.useState('');
-    const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>{
+    const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] = useStateWithPrev(()=>{
         if (props.value !== undefined) {
             return remapFromSelectValueToNativeValue(props.value);
         }
@@ -144,24 +149,43 @@ const filter = (options, inputValue, filterFn)=>{
         return NOT_SELECTED.NATIVE;
     });
     const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
-    const [options, setOptions] = React.useState(optionsProp);
+    const options = React.useMemo(()=>{
+        return filter(optionsProp, inputValue, filterFn);
+    }, [
+        filterFn,
+        inputValue,
+        optionsProp
+    ]);
     var _props_value, _ref;
-    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(optionsProp, (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : null));
-    React.useEffect(()=>{
+    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(options, (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : null));
+    React.useEffect(function updateOptionsIndexes() {
+        const value = props.value !== undefined ? props.value : remapFromNativeValueToSelectValue(nativeSelectValue);
+        const selectedIndex = findSelectedIndex(options, value);
+        setSelectedOptionIndex(selectedIndex);
+        setFocusedOptionIndex(selectedIndex);
+    }, [
+        props.value,
+        nativeSelectValue,
+        options,
+        filterFn
+    ]);
+    React.useEffect(function syncIsControlledState() {
         setIsControlledOutside((oldIsControlled)=>{
             const newIsControlled = props.value !== undefined;
             checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
             return newIsControlled;
         });
-        setNativeSelectValue((nativeSelectValue)=>{
-            if (props.value !== undefined) {
-                return remapFromSelectValueToNativeValue(props.value);
-            }
-            return nativeSelectValue;
-        });
     }, [
         props.value
     ]);
+    React.useEffect(function syncNativeSelectValueWithPropValue() {
+        if (props.value !== undefined) {
+            setNativeSelectValue(remapFromSelectValueToNativeValue(props.value));
+        }
+    }, [
+        props.value,
+        setNativeSelectValue
+    ]);
     useIsomorphicLayoutEffect(()=>{
         if (options.some(({ value })=>nativeSelectValue === value) || allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE) {
             var _selectElRef_current;
@@ -218,8 +242,7 @@ const filter = (options, inputValue, filterFn)=>{
         if (scrollTo) {
             scrollToElement(index);
         }
-        // Это оптимизация, прежде всего, под `onMouseMove`
-        setFocusedOptionIndex((focusedOptionIndex)=>focusedOptionIndex !== index ? index : focusedOptionIndex);
+        setFocusedOptionIndex(index);
     }, [
         options,
         scrollToElement
@@ -230,17 +253,24 @@ const filter = (options, inputValue, filterFn)=>{
     }, [
         options.length
     ]);
-    const setScrollBoxRef = React.useCallback((ref)=>{
-        scrollBoxRef.current = ref;
-        if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {
-            {
-                scrollToElement(selectedOptionIndex, true);
-            }
+    useIsomorphicLayoutEffect(()=>{
+        if (!opened) {
+            scrollPerformedRef.current = false;
+            return;
+        }
+        if (scrollPerformedRef.current) {
+            return;
+        }
+        const isIndexValid = selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex);
+        if (scrollBoxRef.current && isIndexValid) {
+            scrollPerformedRef.current = true;
+            scrollToElement(selectedOptionIndex, true);
         }
     }, [
-        isValidIndex,
+        opened,
+        selectedOptionIndex,
         scrollToElement,
-        selectedOptionIndex
+        isValidIndex
     ]);
     const [keyboardInput, setKeyboardInput] = React.useState('');
     const resetKeyboardInput = React.useCallback(()=>{
@@ -261,10 +291,7 @@ const filter = (options, inputValue, filterFn)=>{
         opened,
         resetFocusedOption
     ]);
-    /**
-   * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.
-   *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
-   */ const close = React.useCallback(()=>{
+    const close = React.useCallback(()=>{
         resetKeyboardInput();
         setInputValue('');
         setOpened(false);
@@ -294,7 +321,8 @@ const filter = (options, inputValue, filterFn)=>{
         selectElRef,
         isControlledOutside,
         props.value,
-        nativeSelectValue
+        nativeSelectValue,
+        setNativeSelectValue
     ]);
     const selectFocused = React.useCallback(()=>{
         if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {
@@ -365,49 +393,41 @@ const filter = (options, inputValue, filterFn)=>{
         focusedOptionIndex,
         options
     ]);
-    React.useEffect(function updateOptionsAndSelectedOptionIndex() {
-        const value = props.value !== undefined ? props.value : remapFromNativeValueToSelectValue(nativeSelectValue);
-        const options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
-        setOptions(options);
-        const selectedIndex = findSelectedIndex(options, value);
-        setSelectedOptionIndex(selectedIndex);
-        setFocusedOptionIndex(selectedIndex);
-    }, [
-        filterFn,
-        inputValue,
-        nativeSelectValue,
-        optionsProp,
-        defaultValue,
-        props.value,
-        searchable
-    ]);
     const onNativeSelectChange = (e)=>{
+        // для ситуаций, когда в опциях value это string а value/defaultValue это number
+        // и наоборот, приводим значение nativeSelectValue из стейта к строке.
+        // ведь nativeSelect всегда возвращает string в onChange, а пользователь
+        // может использовать number для опций
+        //
+        // native select всегда возвращает string в качестве value в onChange
+        // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя
+        // в качестве value опции может использовать число (3),
+        // тогда строчное значение value ('3') из стейта пользователя
+        // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),
+        // когда nativeSelectValue обновится на значение опции (число 3),
+        // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.
+        const convertedNativeSelectValue = typeof nativeSelectValue === 'number' && (typeof props.value === 'string' || typeof prevNativeSelectValue === 'string') ? String(nativeSelectValue) : nativeSelectValue;
+        const isCalledWithSameControlledOptionValue = isControlledOutside && props.value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);
+        const isNativeValueChanged = convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;
+        const isTriggeredByClearButton = allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE;
+        const shouldCallOnChange = !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);
+        if (!shouldCallOnChange) {
+            return;
+        }
         const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
-        const newSelectedOptionIndex = findSelectedIndex(options, remappedNativeValue);
-        if (selectedOptionIndex !== newSelectedOptionIndex) {
-            if (!isControlledOutside) {
-                setSelectedOptionIndex(newSelectedOptionIndex);
-            }
-            if (e.target.value === NOT_SELECTED.NATIVE) {
-                e.target.value = '';
-            }
-            if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
-                e.currentTarget.value = '';
-            }
-            onChange === null || onChange === void 0 ? void 0 : onChange(e, remappedNativeValue);
+        if (e.target.value === NOT_SELECTED.NATIVE) {
+            e.target.value = '';
+        }
+        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+            e.currentTarget.value = '';
         }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, remappedNativeValue);
     };
     const onInputChange = React.useCallback((e)=>{
         onInputChangeProp && onInputChangeProp(e);
-        const options = filter(optionsProp, e.target.value, filterFn);
-        setOptions(options);
-        setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue));
         setInputValue(e.target.value);
     }, [
-        filterFn,
-        nativeSelectValue,
-        onInputChangeProp,
-        optionsProp
+        onInputChangeProp
     ]);
     const areOptionsShown = React.useCallback(()=>{
         return scrollBoxRef.current !== null;
@@ -481,19 +501,14 @@ const filter = (options, inputValue, filterFn)=>{
         options,
         selectOption
     ]);
-    const prevMousePositionRef = React.useRef({
+    const lastMousePositionRef = React.useRef({
         x: 0,
         y: 0
     });
     const focusOptionOnMouseMove = React.useCallback((e, index)=>{
-        const isMouseChangedPosition = Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 || Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;
-        if (isMouseChangedPosition) {
+        if (isMousePositionChanged(e, lastMousePositionRef.current)) {
             focusOptionByIndex(index, false);
         }
-        prevMousePositionRef.current = {
-            x: e.clientX,
-            y: e.clientY
-        };
     }, [
         focusOptionByIndex
     ]);
@@ -502,7 +517,7 @@ const filter = (options, inputValue, filterFn)=>{
         const hovered = index === focusedOptionIndex;
         const selected = index === selectedOptionIndex;
         return /*#__PURE__*/ _jsx(React.Fragment, {
-            children: renderOptionProp({
+            children: renderOptionProp(_object_spread({
                 option,
                 hovered,
                 children: option.label,
@@ -519,7 +534,7 @@ const filter = (options, inputValue, filterFn)=>{
                 // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
                 onMouseMove: (e)=>focusOptionOnMouseMove(e, index),
                 id: `${popupAriaId}-${option.value}`
-            })
+            }, option))
         }, `${typeof option.value}-${option.value}`);
     }, [
         focusedOptionIndex,
@@ -574,6 +589,7 @@ const filter = (options, inputValue, filterFn)=>{
         iconProp,
         restProps.disabled,
         clearButtonTestId,
+        setNativeSelectValue,
         selectInputRef
     ]);
     const icon = React.useMemo(()=>{
@@ -642,12 +658,32 @@ const filter = (options, inputValue, filterFn)=>{
         'aria-autocomplete': 'none'
     };
     const focusWithin = useFocusWithin(handleRootRef);
+    const resetOptionFocusOnMouseLeave = React.useCallback((event)=>{
+        // В Хроме eсли мышка пользователя находится над инпутом селекта,
+        // и он с клавиатуры открывает опции, причём одна из опций
+        // уже выбрана, то видно, как выбранная опция получает фокус,
+        // но потом сразу же его теряет.
+        // Связано это с тем, что в этот момент вызывается onMouseLeave, на который у нас
+        // завязан сброс состония фокуса у опции. По хорошему фокус должен оставаться.
+        // Нам не интересен вызов onMouseLeave если мышка при этом не двигалась.
+        if (isMousePositionChanged(event, lastMousePositionRef.current)) {
+            resetFocusedOption();
+        }
+    }, [
+        resetFocusedOption
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCustomSelect__host", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
         ref: handleRootRef,
         onClick: passClickAndFocusToInputOnClick,
         onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
+        onMouseMove: function updateLastMousePosition(e) {
+            lastMousePositionRef.current = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        },
         children: [
             focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 "aria-live": "polite",
@@ -676,6 +712,7 @@ const filter = (options, inputValue, filterFn)=>{
                 children: selected === null || selected === void 0 ? void 0 : selected.label
             })),
             /*#__PURE__*/ _jsxs("select", {
+                tabIndex: -1,
                 ref: selectElRef,
                 name: name,
                 onChange: onNativeSelectChange,
@@ -699,9 +736,9 @@ const filter = (options, inputValue, filterFn)=>{
             opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
                 targetRef: containerRef,
                 placement: popperPlacement,
-                scrollBoxRef: setScrollBoxRef,
+                scrollBoxRef: scrollBoxRef,
                 onPlacementChange: setPopperPlacement,
-                onMouseLeave: resetFocusedOption,
+                onMouseLeave: resetOptionFocusOnMouseLeave,
                 fetching: fetching,
                 overscrollBehavior: overscrollBehavior,
                 offsetDistance: dropdownOffsetDistance,