@vkontakte/vkui 8.2.2 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.2.2",
+  "version": "8.3.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -87,16 +87,17 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@swc/helpers": "^0.5.21",
-    "@vkontakte/icons": "^3.0.0",
+    "@swc/helpers": "^0.5.23",
+    "@vkontakte/icons": "^3.58.0",
     "@vkontakte/vkjs": "^2.0.2",
     "@vkontakte/vkui-date-fns-tz": "^0.0.6",
     "@vkontakte/vkui-floating-ui": "^0.2.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
+    "@biomejs/biome": "^2.5.0",
     "@types/node": "*",
     "@types/postcss-import": "^14.0.3",
+    "@vkontakte/storybook-addons": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "size-limit": "^12.1.0",

package/src/components/FormField/FormField.module.css

@@ -210,7 +210,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(
     .vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-horizontal
-    .vkuiInternalFormItem
+      .vkuiInternalFormItem
   ):first-of-type
   .host {
   border-start-start-radius: var(--vkui--size_border_radius--regular);
@@ -220,7 +220,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(
     .vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-horizontal
-    .vkuiInternalFormItem
+      .vkuiInternalFormItem
   ):last-of-type
   .host {
   border-start-end-radius: var(--vkui--size_border_radius--regular);
@@ -230,7 +230,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(
     .vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-vertical
-    .vkuiInternalFormItem
+      .vkuiInternalFormItem
   ):first-of-type
   .host {
   border-start-start-radius: var(--vkui--size_border_radius--regular);
@@ -240,7 +240,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(
     .vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-vertical
-    .vkuiInternalFormItem
+      .vkuiInternalFormItem
   ):last-of-type
   .host {
   border-end-start-radius: var(--vkui--size_border_radius--regular);

package/src/components/PopoutWrapper/PopoutWrapper.module.css

@@ -32,22 +32,22 @@
   opacity: 1;
 }
 
-.opened .overlay {
+.opened > .container > .overlay {
   animation: animationPopoutWrapperFullFadeIn var(--vkui--animation_duration_m) ease both;
 }
 
-.closing .overlay {
+.closing > .container > .overlay {
   opacity: 0;
   animation: animationPopoutWrapperFullFadeOut var(--vkui--animation_duration_m)
     var(--vkui--animation_easing_default) both;
 }
 
-.masked .overlay {
+.masked > .container > .overlay {
   background: var(--vkui--color_overlay_primary);
 }
 
-.fixed .overlay,
-.absolute .overlay {
+.fixed > .container > .overlay,
+.absolute > .container > .overlay {
   position: absolute;
 }
 
@@ -72,27 +72,27 @@
   pointer-events: auto;
 }
 
-.alignYCenter .container {
+.alignYCenter > .container {
   align-items: center;
 }
 
-.alignYBottom .container {
+.alignYBottom > .container {
   align-items: flex-end;
 }
 
-.alignYTop .container {
+.alignYTop > .container {
   align-items: flex-start;
 }
 
-.alignXCenter .container {
+.alignXCenter > .container {
   justify-content: center;
 }
 
-.alignXLeft .container {
+.alignXLeft > .container {
   justify-content: flex-start;
 }
 
-.alignXRight .container {
+.alignXRight > .container {
   justify-content: flex-end;
 }
 

package/src/components/PopoutWrapper/PopoutWrapper.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./PopoutWrapper.module.css"],"names":["host","opened","closing","fixed","absolute","overlay","masked","container","content","alignYCenter","alignYBottom","alignYTop","alignXCenter","alignXLeft","alignXRight"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,S,WAbA;AAAA,E,aAiBAC,O,WAjBA;AAAA,E,aAqBAC,U,WArBA;AAAA,E,aAyBAC,S,WAzBA;AAAA,E,aAkCAJ,Q,WAlCA;AAAA,E,aAkCQI,S,WAlCR;AAAA,E,aAsCAH,S,WAtCA;AAAA,E,aAsCSG,S,WAtCT;AAAA,E,aA4CAC,Q,WA5CA;AAAA,E,aA4CQD,S,WA5CR;AAAA,E,aAgDAF,O,WAhDA;AAAA,E,aAgDOE,S,WAhDP;AAAA,E,aAiDAD,U,WAjDA;AAAA,E,aAiDUC,S,WAjDV;AAAA,E,aAqDAE,W,WArDA;AAAA,E,aA6DAC,S,WA7DA;AAAA,E,aAsEAA,S,WAtEA;AAAA,E,aA0EAC,c,WA1EA;AAAA,E,aA0EcF,W,WA1Ed;AAAA,E,aA8EAG,c,WA9EA;AAAA,E,aA8EcH,W,WA9Ed;AAAA,E,aAkFAI,W,WAlFA;AAAA,E,aAkFWJ,W,WAlFX;AAAA,E,aAsFAK,c,WAtFA;AAAA,E,aAsFcL,W,WAtFd;AAAA,E,aA0FAM,Y,WA1FA;AAAA,E,aA0FYN,W,WA1FZ;AAAA,E,aA8FAO,a,WA9FA;AAAA,E,aA8FaP,W,WA9Fb;AAAA;AAAA","file":"PopoutWrapper.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./PopoutWrapper.module.css"],"names":["host","opened","closing","fixed","absolute","overlay","container","masked","content","alignYCenter","alignYBottom","alignYTop","alignXCenter","alignXLeft","alignXRight"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,S,WAbA;AAAA,E,aAiBAC,O,WAjBA;AAAA,E,aAqBAC,U,WArBA;AAAA,E,aAyBAC,S,WAzBA;AAAA,E,aAkCAJ,Q,WAlCA;AAAA,E,aAkCUK,W,WAlCV;AAAA,E,aAkCuBD,S,WAlCvB;AAAA,E,aAsCAH,S,WAtCA;AAAA,E,aAsCWI,W,WAtCX;AAAA,E,aAsCwBD,S,WAtCxB;AAAA,E,aA4CAE,Q,WA5CA;AAAA,E,aA4CUD,W,WA5CV;AAAA,E,aA4CuBD,S,WA5CvB;AAAA,E,aAgDAF,O,WAhDA;AAAA,E,aAgDSG,W,WAhDT;AAAA,E,aAgDsBD,S,WAhDtB;AAAA,E,aAiDAD,U,WAjDA;AAAA,E,aAiDYE,W,WAjDZ;AAAA,E,aAiDyBD,S,WAjDzB;AAAA,E,aAqDAC,W,WArDA;AAAA,E,aA6DAE,S,WA7DA;AAAA,E,aAsEAA,S,WAtEA;AAAA,E,aA0EAC,c,WA1EA;AAAA,E,aA0EgBH,W,WA1EhB;AAAA,E,aA8EAI,c,WA9EA;AAAA,E,aA8EgBJ,W,WA9EhB;AAAA,E,aAkFAK,W,WAlFA;AAAA,E,aAkFaL,W,WAlFb;AAAA,E,aAsFAM,c,WAtFA;AAAA,E,aAsFgBN,W,WAtFhB;AAAA,E,aA0FAO,Y,WA1FA;AAAA,E,aA0FcP,W,WA1Fd;AAAA,E,aA8FAQ,a,WA9FA;AAAA,E,aA8FeR,W,WA9Ff;AAAA;AAAA","file":"PopoutWrapper.module.css.d.ts","sourceRoot":""}

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -26,11 +26,9 @@
   inset-inline-start: 0;
   inline-size: calc(100% / var(--vkui_internal--SegmentedControl_options));
   background-color: var(--vkui--color_segmented_control);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: inherit;
-  box-shadow:
-    inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
-    0 3px 8px rgb(0, 0, 0, 0.12),
-    0 3px 1px rgb(0, 0, 0, 0.04);
+  box-shadow: var(--vkui--elevation2);
   transform: translateX(calc(var(--vkui_internal--SegmentedControl_actual_index) * 100%));
   transform-origin: 0 0;
   transition: transform 150ms;

package/src/components/SegmentedControl/SegmentedControl.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./SegmentedControl.module.css"],"names":["host","sizeL","in","slider","rtl","densityRegular","densityNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,O,WATA;AAAA,E,aAaAC,I,WAbA;AAAA,E,aAsBAC,Q,WAtBA;AAAA,E,aAyCAC,K,WAzCA;AAAA,E,aAyCKD,Q,WAzCL;AAAA,E,aAgDAE,gB,WAhDA;AAAA,E,aAoDAA,gB,WApDA;AAAA,E,aAoDeJ,O,WApDf;AAAA,E,aAyDEK,a,WAzDF;AAAA,E,aA6DEA,a,WA7DF;AAAA,E,aA6DcL,O,WA7Dd;AAAA;AAAA","file":"SegmentedControl.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SegmentedControl.module.css"],"names":["host","sizeL","in","slider","rtl","densityRegular","densityNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,O,WATA;AAAA,E,aAaAC,I,WAbA;AAAA,E,aAsBAC,Q,WAtBA;AAAA,E,aAuCAC,K,WAvCA;AAAA,E,aAuCKD,Q,WAvCL;AAAA,E,aA8CAE,gB,WA9CA;AAAA,E,aAkDAA,gB,WAlDA;AAAA,E,aAkDeJ,O,WAlDf;AAAA,E,aAuDEK,a,WAvDF;AAAA,E,aA2DEA,a,WA3DF;AAAA,E,aA2DcL,O,WA3Dd;AAAA;AAAA","file":"SegmentedControl.module.css.d.ts","sourceRoot":""}

package/src/hooks/useSnackbarManager/components/SnackbarHolder.tsx

@@ -40,7 +40,7 @@ export const SnackbarHolder: React.FC<SnackbarHolderProps> = ({
         continue;
       }
 
-      if (placement !== undefined && !map[placement]) {
+      if (!map[placement]) {
         map[placement] = [];
         openedSnackbarsCountersByPlacement[placement] = 0;
         placements.push(placement);

package/src/index.ts

@@ -552,6 +552,7 @@ export type { PopperProps } from './components/Popper/Popper';
 /**
  * Types
  */
+export type { LayoutProps } from './lib/layouts';
 export type { AlignType, HasPlatform, HasRef, HasRootRef } from './types';
 export type { NavIdProps } from './lib/getNavId';
 export type { PlatformType } from './lib/platform';