@vkontakte/vkui 8.2.0 → 8.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.2.0",
+  "version": "8.2.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/ActionSheet/ActionSheet.module.css

@@ -5,7 +5,8 @@
   box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: var(--vkui--size_popup_small--regular);
-  padding: 10px;
+  padding-block: 10px calc(10px + var(--vkui_internal--safe_area_inset_bottom));
+  padding-inline: 10px;
 }
 
 @media (--reduce-motion) {
@@ -49,7 +50,8 @@
  * iOS
  */
 .ios {
-  padding: 8px;
+  padding-block: 8px calc(8px + var(--vkui_internal--safe_area_inset_bottom));
+  padding-inline: 8px;
   background: transparent;
 }
 
@@ -59,7 +61,7 @@
 }
 
 .closeItemWrapperIos {
-  margin-block: 8px var(--vkui_internal--safe_area_inset_bottom);
+  margin-block-start: 8px;
   overflow: hidden;
   background: var(--vkui--color_background_modal);
   border-radius: 14px;

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

@@ -1 +1 @@
-{"version":3,"sources":["./ActionSheet.module.css"],"names":["host","contentWrapper","header","opening","closing","title","description","ios","closeItemWrapperIos","densityCompact","menu"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAWEA,M,WAXF;AAAA,E,aAiBAC,gB,WAjBA;AAAA,E,aA0BAC,Q,WA1BA;AAAA,E,aAgCAC,S,WAhCA;AAAA,E,aAqCAC,S,WArCA;AAAA,E,aA2CAC,O,WA3CA;AAAA,E,aA2CSC,a,WA3CT;AAAA,E,aAkDAC,K,WAlDA;AAAA,E,aAuDAA,K,WAvDA;AAAA,E,aAuDKN,gB,WAvDL;AAAA,E,aA4DAO,qB,WA5DA;AAAA,E,aAoEAD,K,WApEA;AAAA,E,aAoEIH,S,WApEJ;AAAA,E,aAwEAG,K,WAxEA;AAAA,E,aAwEKL,Q,WAxEL;AAAA,E,aA6EAK,K,WA7EA;AAAA,E,aA6EKF,O,WA7EL;AAAA,E,aAiFAE,K,WAjFA;AAAA,E,aAiFKD,a,WAjFL;AAAA,E,aAqFAC,K,WArFA;AAAA,E,aAqFKL,Q,WArFL;AAAA,E,aAmGAO,gB,WAnGA;AAAA,E,aAmGgBP,Q,WAnGhB;AAAA,E,aA2GAQ,M,WA3GA;AAAA,E,aAqHAA,M,WArHA;AAAA,E,aAqHKH,K,WArHL;AAAA,E,aAqHUN,gB,WArHV;AAAA,E,aA2HES,M,WA3HF;AAAA;AAAA","file":"ActionSheet.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ActionSheet.module.css"],"names":["host","contentWrapper","header","opening","closing","title","description","ios","closeItemWrapperIos","densityCompact","menu"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAYEA,M,WAZF;AAAA,E,aAkBAC,gB,WAlBA;AAAA,E,aA2BAC,Q,WA3BA;AAAA,E,aAiCAC,S,WAjCA;AAAA,E,aAsCAC,S,WAtCA;AAAA,E,aA4CAC,O,WA5CA;AAAA,E,aA4CSC,a,WA5CT;AAAA,E,aAmDAC,K,WAnDA;AAAA,E,aAyDAA,K,WAzDA;AAAA,E,aAyDKN,gB,WAzDL;AAAA,E,aA8DAO,qB,WA9DA;AAAA,E,aAsEAD,K,WAtEA;AAAA,E,aAsEIH,S,WAtEJ;AAAA,E,aA0EAG,K,WA1EA;AAAA,E,aA0EKL,Q,WA1EL;AAAA,E,aA+EAK,K,WA/EA;AAAA,E,aA+EKF,O,WA/EL;AAAA,E,aAmFAE,K,WAnFA;AAAA,E,aAmFKD,a,WAnFL;AAAA,E,aAuFAC,K,WAvFA;AAAA,E,aAuFKL,Q,WAvFL;AAAA,E,aAqGAO,gB,WArGA;AAAA,E,aAqGgBP,Q,WArGhB;AAAA,E,aA6GAQ,M,WA7GA;AAAA,E,aAuHAA,M,WAvHA;AAAA,E,aAuHKH,K,WAvHL;AAAA,E,aAuHUN,gB,WAvHV;AAAA,E,aA6HES,M,WA7HF;AAAA;AAAA","file":"ActionSheet.module.css.d.ts","sourceRoot":""}

package/src/components/Banner/Banner.tsx

@@ -162,11 +162,14 @@ export const Banner = ({
     ),
   };
 
-  const after = afterProp && (
-    <div className={styles.after}>
-      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}
-    </div>
-  );
+  const getAfterContent = () => {
+    if (typeof afterProp === 'string') {
+      return afterMap[afterProp] || afterProp;
+    }
+    return afterProp;
+  };
+
+  const after = afterProp && <div className={styles.after}>{getAfterContent()}</div>;
 
   const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;
 

package/src/components/DateInput/DateInput.tsx

@@ -441,7 +441,7 @@ export const DateInput = ({
     }
   }, [handleFieldEnter, openCalendar, accessible]);
 
-  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
+  const showCalendarButton = !disableCalendar && (accessible || !value);
   const showClearButton = value && !readOnly;
 
   useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -415,7 +415,7 @@ export const DateRangeInput = ({
     }
   }, [handleFieldEnter, openCalendar, accessible]);
 
-  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
+  const showCalendarButton = !disableCalendar && (accessible || !value);
   const showClearButton = value && !readOnly;
 
   useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {

package/src/components/PullToRefresh/PullToRefresh.module.css

@@ -75,6 +75,8 @@
   flex-grow: 1;
   flex-direction: column;
   overflow: hidden;
+  /* TODO [>=9]: использовать clip чтобы не создовать контекст контейнера прокрутки и не мешать sticky элементам */
+  overflow: clip;
   transition: transform 400ms var(--vkui--animation_easing_platform);
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["./PullToRefresh.module.css"],"names":["host","refreshing","controls","ios","spinner","watching","spinnerSelf","spinnerPath","spinnerOn","content"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAWAC,U,WAXA;AAAA,E,aAgBAF,M,WAhBA;AAAA,E,aAgBUG,K,WAhBV;AAAA,E,aAgBgBD,U,WAhBhB;AAAA,E,aAoBAE,S,WApBA;AAAA,E,aAsCAD,K,WAtCA;AAAA,E,aAsCKC,S,WAtCL;AAAA,E,aA6CAC,U,WA7CA;AAAA,E,aA6CUD,S,WA7CV;AAAA,E,aAiDAE,a,WAjDA;AAAA,E,aAqDAH,K,WArDA;AAAA,E,aAqDIF,Y,WArDJ;AAAA,E,aAqDgBK,a,WArDhB;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aA+DAF,U,WA/DA;AAAA,E,aA+DUE,a,WA/DV;AAAA,E,aAgEAN,Y,WAhEA;AAAA,E,aAgEYM,a,WAhEZ;AAAA,E,aAoEAC,W,WApEA;AAAA,E,aAoEWD,a,WApEX;AAAA,E,aAwEAE,S,WAxEA;AAAA,E,aAgFAJ,U,WAhFA;AAAA,E,aAgFUI,S,WAhFV;AAAA;AAAA","file":"PullToRefresh.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./PullToRefresh.module.css"],"names":["host","refreshing","controls","ios","spinner","watching","spinnerSelf","spinnerPath","spinnerOn","content"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAWAC,U,WAXA;AAAA,E,aAgBAF,M,WAhBA;AAAA,E,aAgBUG,K,WAhBV;AAAA,E,aAgBgBD,U,WAhBhB;AAAA,E,aAoBAE,S,WApBA;AAAA,E,aAsCAD,K,WAtCA;AAAA,E,aAsCKC,S,WAtCL;AAAA,E,aA6CAC,U,WA7CA;AAAA,E,aA6CUD,S,WA7CV;AAAA,E,aAiDAE,a,WAjDA;AAAA,E,aAqDAH,K,WArDA;AAAA,E,aAqDIF,Y,WArDJ;AAAA,E,aAqDgBK,a,WArDhB;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aA+DAF,U,WA/DA;AAAA,E,aA+DUE,a,WA/DV;AAAA,E,aAgEAN,Y,WAhEA;AAAA,E,aAgEYM,a,WAhEZ;AAAA,E,aAoEAC,W,WApEA;AAAA,E,aAoEWD,a,WApEX;AAAA,E,aAwEAE,S,WAxEA;AAAA,E,aAkFAJ,U,WAlFA;AAAA,E,aAkFUI,S,WAlFV;AAAA;AAAA","file":"PullToRefresh.module.css.d.ts","sourceRoot":""}

package/src/components/Search/Search.module.css

@@ -17,6 +17,10 @@
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.hasAfter.withPadding {
+  padding-inline-end: 0;
+}
+
 /*
   density-compact
  */
@@ -182,6 +186,10 @@
   transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
 }
 
+.hasAfter.withPadding .after {
+  min-inline-size: var(--vkui--size_base_padding_horizontal--regular);
+}
+
 .focused .after,
 .hasValue .after {
   flex-grow: 1;
@@ -197,17 +205,6 @@
   content: '';
 }
 
-.withPadding .after::after {
-  margin-inline-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-}
-
-.afterTextClip {
-  display: block;
-  overflow: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
 .findButton {
   inline-size: initial;
   min-inline-size: initial;

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

@@ -1 +1 @@
-{"version":3,"sources":["./Search.module.css"],"names":["host","rtl","withPadding","densityCompact","densityNone","field","label","input","nativeInput","hasAfter","disabled","controls","hasIcon","hasValue","icon","after","focused","afterTextClip","findButton"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,K,WAVA;AAAA,E,aAcAC,a,WAdA;AAAA,E,aAuBAC,gB,WAvBA;AAAA,E,aA4BEC,a,WA5BF;AAAA,E,aAiCAC,O,WAjCA;AAAA,E,aAgDAA,O,WAhDA;AAAA,E,aAoDAA,O,WApDA;AAAA,E,aAwDAC,O,WAxDA;AAAA,E,aA+DAC,O,WA/DA;AAAA,E,aA2EAC,a,WA3EA;AAAA,E,aA8FAA,a,WA9FA;AAAA,E,aA+FAA,a,WA/FA;AAAA,E,aAgGAA,a,WAhGA;AAAA,E,aAiGAA,a,WAjGA;AAAA,E,aAqGAA,a,WArGA;AAAA,E,aAyGAC,U,WAzGA;AAAA,E,aAyGUD,a,WAzGV;AAAA,E,aA8GAE,U,WA9GA;AAAA,E,aAoHAF,a,WApHA;AAAA,E,aAwHAA,a,WAxHA;AAAA,E,aA8HAA,a,WA9HA;AAAA,E,aAkIAG,U,WAlIA;AAAA,E,aA+IAC,S,WA/IA;AAAA,E,aA+ISD,U,WA/IT;AAAA,E,aA2JAE,U,WA3JA;AAAA,E,aA2JUF,U,WA3JV;AAAA,E,aA+JAG,M,WA/JA;AAAA,E,aAyKAA,M,WAzKA;AAAA,E,aA6KAC,O,WA7KA;AAAA,E,aAwLAC,S,WAxLA;AAAA,E,aAwLSD,O,WAxLT;AAAA,E,aAyLAF,U,WAzLA;AAAA,E,aAyLUE,O,WAzLV;AAAA,E,aA8LAA,O,WA9LA;AAAA,E,aA+LAA,O,WA/LA;AAAA,E,aAuMAb,a,WAvMA;AAAA,E,aAuMaa,O,WAvMb;AAAA,E,aA2MAE,e,WA3MA;AAAA,E,aAkNAC,Y,WAlNA;AAAA,E,aAyNwClB,M,WAzNxC;AAAA;AAAA","file":"Search.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./Search.module.css"],"names":["host","rtl","withPadding","hasAfter","densityCompact","densityNone","field","label","input","nativeInput","disabled","controls","hasIcon","hasValue","icon","after","focused","findButton"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,K,WAVA;AAAA,E,aAcAC,a,WAdA;AAAA,E,aAmBAC,U,WAnBA;AAAA,E,aAmBSD,a,WAnBT;AAAA,E,aA2BAE,gB,WA3BA;AAAA,E,aAgCEC,a,WAhCF;AAAA,E,aAqCAC,O,WArCA;AAAA,E,aAoDAA,O,WApDA;AAAA,E,aAwDAA,O,WAxDA;AAAA,E,aA4DAC,O,WA5DA;AAAA,E,aAmEAC,O,WAnEA;AAAA,E,aA+EAC,a,WA/EA;AAAA,E,aAkGAA,a,WAlGA;AAAA,E,aAmGAA,a,WAnGA;AAAA,E,aAoGAA,a,WApGA;AAAA,E,aAqGAA,a,WArGA;AAAA,E,aAyGAA,a,WAzGA;AAAA,E,aA6GAN,U,WA7GA;AAAA,E,aA6GUM,a,WA7GV;AAAA,E,aAkHAC,U,WAlHA;AAAA,E,aAwHAD,a,WAxHA;AAAA,E,aA4HAA,a,WA5HA;AAAA,E,aAkIAA,a,WAlIA;AAAA,E,aAsIAE,U,WAtIA;AAAA,E,aAmJAC,S,WAnJA;AAAA,E,aAmJSD,U,WAnJT;AAAA,E,aA+JAE,U,WA/JA;AAAA,E,aA+JUF,U,WA/JV;AAAA,E,aAmKAG,M,WAnKA;AAAA,E,aA6KAA,M,WA7KA;AAAA,E,aAiLAC,O,WAjLA;AAAA,E,aA4LAZ,U,WA5LA;AAAA,E,aA4LSD,a,WA5LT;AAAA,E,aA4LsBa,O,WA5LtB;AAAA,E,aAgMAC,S,WAhMA;AAAA,E,aAgMSD,O,WAhMT;AAAA,E,aAiMAF,U,WAjMA;AAAA,E,aAiMUE,O,WAjMV;AAAA,E,aAsMAA,O,WAtMA;AAAA,E,aAuMAA,O,WAvMA;AAAA,E,aA+MAE,Y,WA/MA;AAAA,E,aAsNwCjB,M,WAtNxC;AAAA;AAAA","file":"Search.module.css.d.ts","sourceRoot":""}

package/src/components/Search/Search.tsx

@@ -427,7 +427,7 @@ export const Search = ({
             onFocus={setFocusedTrue}
             onBlur={setFocusedFalse}
           >
-            <span className={styles.afterTextClip}>{after}</span>
+            {after}
           </Button>
         </div>
       )}

package/src/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -42,10 +42,6 @@
   }
 }
 
-.modeDark {
-  background: var(--vkui--color_background_contrast_inverse);
-}
-
 .before {
   margin-inline-end: 12px;
 }
@@ -76,10 +72,6 @@
   color: var(--vkui--color_text_subhead);
 }
 
-.modeDark .contentText {
-  color: var(--vkui--color_text_contrast);
-}
-
 /* layout */
 .layoutHorizontal .action {
   position: relative;

package/src/components/Snackbar/subcomponents/Basic/Basic.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./Basic.module.css"],"names":["body","densityRegular","densityNone","modeDark","before","after","content","contentText","contentSubtitle","layoutHorizontal","action","layoutVertical","layoutNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAoBAC,gB,WApBA;AAAA,E,aAgCEC,a,WAhCF;AAAA,E,aA4CAC,U,WA5CA;AAAA,E,aAgDAC,Q,WAhDA;AAAA,E,aAoDAC,O,WApDA;AAAA,E,aAwDAC,S,WAxDA;AAAA,E,aA+DAC,a,WA/DA;AAAA,E,aAyEAC,iB,WAzEA;AAAA,E,aA8EAL,U,WA9EA;AAAA,E,aA8EUI,a,WA9EV;AAAA,E,aAmFAE,kB,WAnFA;AAAA,E,aAmFkBC,Q,WAnFlB;AAAA,E,aAwFAC,gB,WAxFA;AAAA,E,aAwFgBL,S,WAxFhB;AAAA,E,aA6FAK,gB,WA7FA;AAAA,E,aA6FgBD,Q,WA7FhB;AAAA,E,aAoGEE,Y,WApGF;AAAA,E,aAoGcF,Q,WApGd;AAAA,E,aA0GEE,Y,WA1GF;AAAA,E,aA0GcN,S,WA1Gd;AAAA,E,aA+GEM,Y,WA/GF;AAAA,E,aA+GcF,Q,WA/Gd;AAAA;AAAA","file":"Basic.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./Basic.module.css"],"names":["body","densityRegular","densityNone","before","after","content","contentText","contentSubtitle","layoutHorizontal","action","layoutVertical","layoutNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAoBAC,gB,WApBA;AAAA,E,aAgCEC,a,WAhCF;AAAA,E,aA4CAC,Q,WA5CA;AAAA,E,aAgDAC,O,WAhDA;AAAA,E,aAoDAC,S,WApDA;AAAA,E,aA2DAC,a,WA3DA;AAAA,E,aAqEAC,iB,WArEA;AAAA,E,aA2EAC,kB,WA3EA;AAAA,E,aA2EkBC,Q,WA3ElB;AAAA,E,aAgFAC,gB,WAhFA;AAAA,E,aAgFgBL,S,WAhFhB;AAAA,E,aAqFAK,gB,WArFA;AAAA,E,aAqFgBD,Q,WArFhB;AAAA,E,aA4FEE,Y,WA5FF;AAAA,E,aA4FcF,Q,WA5Fd;AAAA,E,aAkGEE,Y,WAlGF;AAAA,E,aAkGcN,S,WAlGd;AAAA,E,aAuGEM,Y,WAvGF;AAAA,E,aAuGcF,Q,WAvGd;AAAA;AAAA","file":"Basic.module.css.d.ts","sourceRoot":""}

package/src/components/Snackbar/subcomponents/Basic/Basic.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import type * as React from 'react';
+import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../../hooks/useAdaptivity';
 import type { HTMLAttributesWithRootRef } from '../../../../types';
+import { ColorSchemeProvider } from '../../../ColorSchemeProvider/ColorSchemeProvider';
 import { RootComponent } from '../../../RootComponent/RootComponent';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph';
 import { Subhead } from '../../../Typography/Subhead/Subhead';
@@ -74,14 +75,13 @@ export function Basic({
   const { density = 'none' } = useAdaptivity();
   const layout = after || subtitle ? 'vertical' : 'none';
 
-  return (
+  const snackbar = (
     <RootComponent
       {...restProps}
       baseClassName={classNames(
         styles.body,
         stylesLayout[layoutProps || layout],
         density !== 'compact' && densityClassNames[density],
-        mode === 'dark' && styles.modeDark,
       )}
     >
       {before && <div className={styles.before}>{before}</div>}
@@ -96,4 +96,10 @@ export function Basic({
       {after && <div className={styles.after}>{after}</div>}
     </RootComponent>
   );
+
+  if (mode === 'dark') {
+    return <ColorSchemeProvider value="dark">{snackbar}</ColorSchemeProvider>;
+  }
+
+  return snackbar;
 }

package/src/hooks/useMergeProps.ts

@@ -26,7 +26,7 @@ export const useMergeProps = <T extends BaseProps = BaseProps>(
     return filterProps(originalProps);
   }
 
-  const { className: rootSlotClassName, style: rootSlotStyle, ...rootSlotProps } = slotProps || {};
+  const { className: rootSlotClassName, style: rootSlotStyle, ...rootSlotProps } = slotProps;
 
   const {
     className: originalClassName,

package/src/lib/date.ts

@@ -304,7 +304,7 @@ export function eachDayOfInterval(
 
   while (+date <= endTime) {
     dates.push(new Date(date));
-    date.setDate(date.getDate() + 1);
+    date.setDate(date.getDate() + step);
     date.setHours(0, 0, 0, 0);
   }
 

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

@@ -310,7 +310,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
       if (shownLocalState.shown) {
         setShownFinalState(true);
         onShownChanged(true, shownLocalState.reason);
-      } else if (hasCSSAnimation.current && !willBeHide) {
+      } else if (hasCSSAnimation.current) {
         setWillBeHide(true);
       } else {
         setShownFinalState(false);