@vkontakte/vkui 5.3.2 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "5.3.2",
+  "version": "5.4.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -34,26 +34,31 @@
     "package:version": "echo $npm_package_version",
     "size": "yarn clear && yarn build:no-types && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
-    "build": "yarn build:types && yarn build:no-types",
-    "build:types": "yarn tsc && yarn tsc-cjs && yarn tsc-cssm",
-    "build:no-types": "concurrently 'yarn:swc-es6' 'yarn:swc-cjs' 'yarn:swc-cssm' 'yarn:postcss'",
+    "build": "concurrently 'yarn:build:*'",
+    "build:types": "concurrently 'yarn:tsc:*'",
+    "build:no-types": "concurrently 'yarn:swc:*' 'yarn:postcss'",
     "clear": "shx rm -rf dist/*",
-    "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss-bundle' 'yarn:postcss-modules'",
-    "postcss-bundle": "webpack --config webpack.styles.config.js",
-    "postcss-modules": "postcss './src/**/*.css' --base ./src --dir ./dist/cssm",
+    "docker:clear-playwright-cache": "docker compose rm -f && docker volume rm vkui_package_vkui_playwright_cache",
+    "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
+    "postcss:bundle": "IS_VKUI_PACKAGE_BUILD=1 webpack --config webpack.styles.config.js",
+    "postcss:modules": "IS_VKUI_PACKAGE_BUILD=1 postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
     "swc-base": "cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js",
-    "swc-es6": "yarn swc-base -d dist -s",
-    "swc-cjs": "yarn swc-base -d dist/cjs -s -C module.type=commonjs",
-    "swc-cssm": "yarn swc-base -d dist/cssm -s --config-file cssm.swcrc",
-    "tsc": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
-    "tsc-cssm": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cssm/ -p tsconfig.dist.json",
-    "tsc-cjs": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
+    "swc:es6": "yarn swc-base -d dist -s",
+    "swc:cjs": "yarn swc-base -d dist/cjs -s -C module.type=commonjs",
+    "swc:cssm": "yarn swc-base -d dist/cssm -s --config-file ./cssm/cssm.swcrc",
+    "tsc:es6": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
+    "tsc:cssm": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cssm/ -p tsconfig.dist.json",
+    "tsc:cjs": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
     "test": "jest",
     "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
+    "test:e2e": "docker compose up --abort-on-container-exit",
+    "test:e2e-update": "docker compose --env-file=./.env.docker up --abort-on-container-exit",
+    "test:e2e:ci": "playwright test --config playwright-ct.config.ts",
+    "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
     "test:a11y": "jest -c jest.config.a11y.js",
     "test:a11y:ci": "yarn test:a11y --ci --silent --outputFile ../../a11y-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_a11y_output'",
-    "storybook": "cross-env SANDBOX=\\.storybook start-storybook -p 6006",
-    "build-storybook": "cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 build-storybook"
+    "storybook": "cross-env SANDBOX=\\.storybook storybook dev -p 6006",
+    "storybook:build": "cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build"
   },
   "peerDependencies": {
     "@vkontakte/icons": "^2.1.1",
@@ -64,11 +69,13 @@
   "dependencies": {
     "@floating-ui/react-dom": "1.3.0",
     "@swc/helpers": "^0.4.14",
-    "@vkontakte/vkjs": "0.32.0",
+    "@vkontakte/vkjs": "^0.32.1",
     "dayjs": "1.11.7",
     "mitt": "3.0.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.1.0"
+  },
   "size-limit": [
     {
       "name": "JS",

package/dist/cjs/components/Typography/types.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта, отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
-}
-export interface HasCaps {
-    caps?: boolean;
-}

package/dist/cjs/components/Typography/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Typography/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\n\nexport interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n}\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n"],"names":[],"mappings":";;;;;2DAAuB"}

package/dist/cjs/components/WriteBarIcon/WriteBarIconRenderer.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface WriteBarIconRendererProps {
-    IconCompact: React.ComponentType<{
-        className?: string;
-    }>;
-    IconRegular: React.ComponentType<{
-        className?: string;
-    }>;
-}
-export declare const WriteBarIconRenderer: ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => JSX.Element;

package/dist/cjs/components/WriteBarIcon/WriteBarIconRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/WriteBarIcon/WriteBarIconRenderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\n\nexport interface WriteBarIconRendererProps {\n  IconCompact: React.ComponentType<{ className?: string }>;\n  IconRegular: React.ComponentType<{ className?: string }>;\n}\n\nexport const WriteBarIconRenderer = ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && <IconCompact className={sizeY.compact.className} />}\n      {sizeY.regular && <IconRegular className={sizeY.regular.className} />}\n    </React.Fragment>\n  );\n};\n"],"names":["WriteBarIconRenderer","IconCompact","IconRegular","sizeY","useAdaptivityConditionalRender","React","Fragment","compact","className","regular"],"mappings":";;;;+BAQaA;;;eAAAA;;;;2DARU;8CACwB;AAOxC,IAAMA,uBAAuB,gBAA6D;QAA1DC,oBAAAA,aAAaC,oBAAAA;IAClD,IAAM,AAAEC,QAAUC,IAAAA,8DAA8B,IAAxCD;IAER,qBACE,qBAACE,OAAMC,QAAQ,QACZH,MAAMI,OAAO,kBAAI,qBAACN;QAAYO,WAAWL,MAAMI,OAAO,CAACC,SAAS;QAChEL,MAAMM,OAAO,kBAAI,qBAACP;QAAYM,WAAWL,MAAMM,OAAO,CAACD,SAAS;;AAGvE"}

package/dist/components/Typography/types.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта, отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
-}
-export interface HasCaps {
-    caps?: boolean;
-}

package/dist/components/Typography/types.js

@@ -1,3 +0,0 @@
-import * as React from "react";
-
-//# sourceMappingURL=types.js.map

package/dist/components/Typography/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Typography/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\n\nexport interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n}\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/dist/components/WriteBarIcon/WriteBarIconRenderer.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface WriteBarIconRendererProps {
-    IconCompact: React.ComponentType<{
-        className?: string;
-    }>;
-    IconRegular: React.ComponentType<{
-        className?: string;
-    }>;
-}
-export declare const WriteBarIconRenderer: ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => JSX.Element;

package/dist/components/WriteBarIcon/WriteBarIconRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/WriteBarIcon/WriteBarIconRenderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\n\nexport interface WriteBarIconRendererProps {\n  IconCompact: React.ComponentType<{ className?: string }>;\n  IconRegular: React.ComponentType<{ className?: string }>;\n}\n\nexport const WriteBarIconRenderer = ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && <IconCompact className={sizeY.compact.className} />}\n      {sizeY.regular && <IconRegular className={sizeY.regular.className} />}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityConditionalRender","WriteBarIconRenderer","IconCompact","IconRegular","sizeY","Fragment","compact","className","regular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,IAAMC,uBAAuB,gBAA6D;QAA1DC,oBAAAA,aAAaC,oBAAAA;IAClD,IAAM,AAAEC,QAAUJ,iCAAVI;IAER,qBACE,oBAACL,MAAMM,QAAQ,QACZD,MAAME,OAAO,kBAAI,oBAACJ;QAAYK,WAAWH,MAAME,OAAO,CAACC,SAAS;QAChEH,MAAMI,OAAO,kBAAI,oBAACL;QAAYI,WAAWH,MAAMI,OAAO,CAACD,SAAS;;AAGvE,EAAE"}

package/dist/cssm/components/Typography/types.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта, отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
-}
-export interface HasCaps {
-    caps?: boolean;
-}

package/dist/cssm/components/Typography/types.js

@@ -1,3 +0,0 @@
-import * as React from 'react';
-
-//# sourceMappingURL=types.js.map

package/dist/cssm/components/Typography/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Typography/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\n\nexport interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n}\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/dist/cssm/components/View/ViewIOS.module.css

@@ -1 +0,0 @@
-.vkuiView--ios .vkuiPanel__in{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding:0;padding:0 var(--vkui_internal--safe_area_inset_right) var(--vkui_internal--safe_area_inset_bottom) var(--vkui_internal--safe_area_inset_left)}.vkuiView--ios .vkuiView__panel--swipe-back-prev{box-shadow:-2px 0 12px rgba(0,0,0,.3)}.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-success{transform:translate3d(100%,0,0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success,.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed{transform:translateZ(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed{transform:translate3d(-50%,0,0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev{animation:vkui-animation-ios-prev-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-animation-ios-prev-forward .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next{animation:vkui-animation-ios-next-back .6s cubic-bezier(.4,0,.2,1);animation:vkui-animation-ios-next-back .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next{animation:vkui-animation-ios-next-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-animation-ios-next-forward .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev{animation:vkui-animation-ios-prev-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-animation-ios-prev-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiView--ios .vkuiView__panel--next .vkuiInternalPanel__fade,.vkuiView--ios .vkuiView__panel--prev .vkuiInternalPanel__fade{background:#000;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vkuiView--ios .vkuiView__panel--prev .vkuiInternalPanel__fade{animation:vkui-animation-ios-fade-in .6s cubic-bezier(.4,0,.2,1);animation:vkui-animation-ios-fade-in .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next .vkuiInternalPanel__fade{animation:vkui-animation-ios-fade-out .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-animation-ios-fade-out .6s var(--vkui--animation_easing_platform) forwards}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev .vkuiInternalPanel__fade,.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next .vkuiInternalPanel__fade{display:none}.vkuiView--ios.vkuiView--no-motion .vkuiView__panel,.vkuiView--ios.vkuiView--no-motion .vkuiView__panel .vkuiPanel__in{animation:none}.vkuiView--ios .vkuiView__panel--active .vkuiInternalPanel__fade{display:none}@keyframes vkui-animation-ios-next-forward{0%{transform:translate3d(100%,0,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-ios-next-back{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-ios-prev-forward{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes vkui-animation-ios-prev-back{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}@keyframes vkui-animation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes vkui-animation-ios-fade-out{0%{opacity:.3}to{opacity:0}}

package/dist/cssm/components/WriteBarIcon/WriteBarIconRenderer.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface WriteBarIconRendererProps {
-    IconCompact: React.ComponentType<{
-        className?: string;
-    }>;
-    IconRegular: React.ComponentType<{
-        className?: string;
-    }>;
-}
-export declare const WriteBarIconRenderer: ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => JSX.Element;

package/dist/cssm/components/WriteBarIcon/WriteBarIconRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/WriteBarIcon/WriteBarIconRenderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\n\nexport interface WriteBarIconRendererProps {\n  IconCompact: React.ComponentType<{ className?: string }>;\n  IconRegular: React.ComponentType<{ className?: string }>;\n}\n\nexport const WriteBarIconRenderer = ({ IconCompact, IconRegular }: WriteBarIconRendererProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && <IconCompact className={sizeY.compact.className} />}\n      {sizeY.regular && <IconRegular className={sizeY.regular.className} />}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityConditionalRender","WriteBarIconRenderer","IconCompact","IconRegular","sizeY","Fragment","compact","className","regular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,YAAW,EAAEC,YAAW,EAA6B,GAAK;IAC/F,MAAM,EAAEC,MAAK,EAAE,GAAGJ;IAElB,qBACE,oBAACD,MAAMM,QAAQ,QACZD,MAAME,OAAO,kBAAI,oBAACJ;QAAYK,WAAWH,MAAME,OAAO,CAACC,SAAS;QAChEH,MAAMI,OAAO,kBAAI,oBAACL;QAAYI,WAAWH,MAAMI,OAAO,CAACD,SAAS;;AAGvE,EAAE"}

package/dist/cssm/styles/animations.css

@@ -1 +0,0 @@
-@keyframes vkui-rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes vkui-popper-fadein{0%{opacity:0}to{opacity:1}}