@vkontakte/vkui 7.5.3 → 7.6.0

package/src/components/SelectionControl/SelectionControl.module.css

@@ -3,9 +3,12 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  font-family: var(--vkui--font_family_base);
+}
+
+.withPadding {
   min-block-size: var(--vkui--size_field_height--regular);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  font-family: var(--vkui--font_family_base);
 }
 
 /**
@@ -22,12 +25,12 @@
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.sizeYCompact {
+.withPadding.sizeYCompact {
   min-block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (--sizeY-compact) {
-  .sizeYNone {
+  .withPadding.sizeYNone {
     min-block-size: var(--vkui--size_field_height--compact);
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./SelectionControl.module.css"],"names":["host","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAe+BA,M,WAf/B;AAAA,E,aAoBAA,M,WApBA;AAAA,E,aAwBAC,c,WAxBA;AAAA,E,aA6BEC,W,WA7BF;AAAA;AAAA","file":"SelectionControl.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SelectionControl.module.css"],"names":["host","withPadding","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,a,WARA;AAAA,E,aAkB+BD,M,WAlB/B;AAAA,E,aAuBAA,M,WAvBA;AAAA,E,aA2BAC,a,WA3BA;AAAA,E,aA2BYC,c,WA3BZ;AAAA,E,aAgCED,a,WAhCF;AAAA,E,aAgCcE,W,WAhCd;AAAA;AAAA","file":"SelectionControl.module.css.d.ts","sourceRoot":""}

package/src/components/SelectionControl/SelectionControl.tsx

@@ -7,6 +7,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRootRef } from '../../types';
 import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
 import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
+import { SelectionControlContext } from './SelectionControlContext';
 import { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';
 import styles from './SelectionControl.module.css';
 
@@ -21,22 +22,43 @@ export interface SelectionControlProps
     Pick<
       TappableOmitProps,
       'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'
-    > {}
+    > {
+  /**
+   * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
+   */
+  noPadding?: boolean;
+}
 
 /**
  * @see https://vkui.io/components/selection-control
  */
-export const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {
+export const SelectionControl = ({
+  noPadding = false,
+  hoverMode: hoverModeProp,
+  activeMode: activeModeProp,
+  ...restProps
+}: SelectionControlProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const platform = usePlatform();
 
+  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');
+  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');
+
   return (
-    <Tappable
-      Component="label"
-      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}
-      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
-      {...restProps}
-    />
+    <SelectionControlContext.Provider value={{ noPadding }}>
+      <Tappable
+        Component="label"
+        baseClassName={classNames(
+          styles.host,
+          sizeY !== 'regular' && sizeYClassNames[sizeY],
+          !noPadding && styles.withPadding,
+        )}
+        activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
+        hoverMode={hoverMode}
+        activeMode={activeMode}
+        {...restProps}
+      />
+    </SelectionControlContext.Provider>
   );
 };
 

package/src/components/SelectionControl/SelectionControlContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const SelectionControlContext = createContext<{ noPadding: boolean }>({
+  noPadding: false,
+});
+
+export const useSelectionControlContext = () => useContext(SelectionControlContext);

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css

@@ -1,12 +1,15 @@
 .host {
   flex-grow: 1;
   min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  margin-block: var(--vkui--spacing_size_xl);
   margin-inline-start: 12px;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
 }
 
+.withPadding {
+  margin-block: var(--vkui--spacing_size_xl);
+}
+
 .host:first-child {
   margin-inline-start: 0;
 }
@@ -33,12 +36,12 @@
   color: var(--vkui--color_icon_tertiary);
 }
 
-.sizeYCompact {
+.withPadding.sizeYCompact {
   margin-block: var(--vkui--spacing_size_m);
 }
 
 @media (--sizeY-compact) {
-  .sizeYNone {
+  .withPadding.sizeYNone {
     margin-block: var(--vkui--spacing_size_m);
   }
 }

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./SelectionControlLabel.module.css"],"names":["host","description","titleLayout","title","titleAfter","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAA,M,WATA;AAAA,E,aAaAC,a,WAbA;AAAA,E,aAmBAC,a,WAnBA;AAAA,E,aAyBAC,O,WAzBA;AAAA,E,aA6BAC,Y,WA7BA;AAAA,E,aAmCAC,c,WAnCA;AAAA,E,aAwCEC,W,WAxCF;AAAA;AAAA","file":"SelectionControlLabel.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SelectionControlLabel.module.css"],"names":["host","withPadding","description","titleLayout","title","titleAfter","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,a,WARA;AAAA,E,aAYAD,M,WAZA;AAAA,E,aAgBAE,a,WAhBA;AAAA,E,aAsBAC,a,WAtBA;AAAA,E,aA4BAC,O,WA5BA;AAAA,E,aAgCAC,Y,WAhCA;AAAA,E,aAsCAJ,a,WAtCA;AAAA,E,aAsCYK,c,WAtCZ;AAAA,E,aA2CEL,a,WA3CF;AAAA,E,aA2CcM,W,WA3Cd;AAAA;AAAA","file":"SelectionControlLabel.module.css.d.ts","sourceRoot":""}

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx

@@ -6,6 +6,7 @@ import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { Footnote } from '../../Typography/Footnote/Footnote';
 import { Text } from '../../Typography/Text/Text';
+import { useSelectionControlContext } from '../SelectionControlContext';
 import styles from './SelectionControlLabel.module.css';
 
 const sizeYClassNames = {
@@ -24,11 +25,16 @@ export function SelectionControlLabel({
   description,
   ...restProps
 }: SelectionControlLabelProps) {
+  const { noPadding } = useSelectionControlContext();
   const { sizeY = 'none' } = useAdaptivity();
 
   return (
     <RootComponent
-      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}
+      baseClassName={classNames(
+        styles.host,
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        !noPadding && styles.withPadding,
+      )}
       {...restProps}
     >
       <div className={styles.titleLayout}>

package/src/components/SimpleCell/SimpleCell.tsx

@@ -9,6 +9,7 @@ import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { Chevron } from './Chevron/Chevron';
 import styles from './SimpleCell.module.css';
 
@@ -125,12 +126,14 @@ export const SimpleCell = ({
         {overTitle && (
           <Subhead Component="span" className={classNames(styles.text, styles.overTitle)}>
             {overTitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Subhead>
         )}
         <div className={styles.content}>
           {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}
           <Headline Component="span" className={styles.children} weight="3">
             {children}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Headline>
           {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}
         </div>
@@ -139,6 +142,7 @@ export const SimpleCell = ({
             {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}
             <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>
               {subtitle}
+              <VisuallyHidden>&nbsp;</VisuallyHidden>
             </Footnote>
             {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}
           </div>
@@ -146,6 +150,7 @@ export const SimpleCell = ({
         {extraSubtitle && (
           <Footnote className={classNames(styles.text, styles.extraSubtitle)}>
             {extraSubtitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Footnote>
         )}
       </div>

package/src/components/Skeleton/Skeleton.tsx

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { millisecondsInSecond } from 'date-fns/constants';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useStateWithPrev } from '../../hooks/useStateWithPrev';
+import { millisecondsInSecond } from '../../lib/date';
 import { useDOM } from '../../lib/dom';
 import { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';
 import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';

package/src/components/Slider/SliderThumb/SliderThumb.module.css

@@ -37,6 +37,6 @@
   overflow: hidden;
   white-space: nowrap;
   border: 0 none;
-  clip: rect(0, 0, 0, 0);
+  clip-path: rect(0 0 0 0);
   direction: ltr;
 }

package/src/components/Tabs/Tabs.tsx

@@ -8,9 +8,9 @@ import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { useTabsController } from './TabsController';
+import { TabsControllerContext } from './TabsControllerContext';
 import { TabsModeContext } from './TabsModeContext';
 import styles from './Tabs.module.css';
-
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Режим отображения компонента.
@@ -76,6 +76,17 @@ export const Tabs = ({
 
   const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');
 
+  const tabsModeContext = React.useMemo(
+    () => ({
+      mode,
+      withGaps,
+      layoutFillMode,
+      withScrollToSelectedTab,
+      scrollBehaviorToSelectedTab,
+    }),
+    [mode, withGaps, layoutFillMode, withScrollToSelectedTab, scrollBehaviorToSelectedTab],
+  );
+
   return (
     <RootComponent
       {...restProps}
@@ -89,17 +100,10 @@ export const Tabs = ({
       role={role}
     >
       <div className={styles.in} ref={tabsRef}>
-        <TabsModeContext.Provider
-          value={{
-            mode,
-            withGaps,
-            layoutFillMode,
-            withScrollToSelectedTab,
-            scrollBehaviorToSelectedTab,
-            controller,
-          }}
-        >
-          {children}
+        <TabsModeContext.Provider value={tabsModeContext}>
+          <TabsControllerContext.Provider value={controller}>
+            {children}
+          </TabsControllerContext.Provider>
         </TabsModeContext.Provider>
       </div>
     </RootComponent>

package/src/components/Tabs/TabsController.ts

@@ -3,7 +3,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { type TabsProps } from './Tabs';
 
 /* eslint-disable jsdoc/require-jsdoc */
-export type TabsController = {
+export type TabsControllerProps = {
   onChange: (id: string) => void;
   selectedTab: string;
 };
@@ -16,7 +16,7 @@ export const useTabsController = ({
 }: Pick<
   TabsProps,
   'selectedId' | 'defaultSelectedId' | 'onSelectedIdChange'
->): TabsController | null => {
+>): TabsControllerProps | null => {
   const onSelectedIdChange = useStableCallback(
     (id: string | undefined) => id && onSelectedIdChangeProp?.(id),
   );

package/src/components/Tabs/TabsControllerContext.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type TabsControllerProps } from './TabsController';
+
+export type TabsControllerContextProps = TabsControllerProps | null;
+
+export const TabsControllerContext: React.Context<TabsControllerContextProps> =
+  React.createContext<TabsControllerContextProps>(null);

package/src/components/Tabs/TabsModeContext.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type TabsProps } from './Tabs';
-import { type TabsController } from './TabsController';
 
 /* eslint-disable jsdoc/require-jsdoc */
 export interface TabsContextProps {
@@ -9,7 +8,6 @@ export interface TabsContextProps {
   layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
   withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
   scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
-  controller: TabsController | null;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 
@@ -20,5 +18,4 @@ export const TabsModeContext: React.Context<TabsContextProps> =
     layoutFillMode: 'auto',
     withScrollToSelectedTab: false,
     scrollBehaviorToSelectedTab: 'nearest',
-    controller: null,
   });

package/src/components/TabsItem/TabsItem.tsx

@@ -8,7 +8,8 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
 import type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
-import { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';
+import { TabsControllerContext } from '../Tabs/TabsControllerContext';
+import { TabsModeContext } from '../Tabs/TabsModeContext';
 import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -99,14 +100,9 @@ export const TabsItem = ({
   ...restProps
 }: TabsItemProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
-  const {
-    mode,
-    withGaps,
-    layoutFillMode,
-    scrollBehaviorToSelectedTab,
-    withScrollToSelectedTab,
-    controller,
-  }: TabsContextProps = React.useContext(TabsModeContext);
+  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =
+    React.useContext(TabsModeContext);
+  const controller = React.useContext(TabsControllerContext);
   let statusComponent = null;
 
   const isTabFlow = role === 'tab';

package/src/components/Tooltip/Tooltip.tsx

@@ -24,6 +24,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'usePortal'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'disableShiftMiddleware'
   | 'strategy'
 >;
 

package/src/components/Tooltip/useTooltip.tsx

@@ -43,6 +43,7 @@ export const useTooltip = ({
   offsetByCrossAxis = 0,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   disableTriggerOnFocus = false,
   onReferenceHiddenChange,
 
@@ -151,6 +152,7 @@ export const useTooltip = ({
     offsetByCrossAxis,
     hideWhenReferenceHidden,
     disableFlipMiddleware,
+    disableShiftMiddleware,
 
     defaultShown,
     shown: shownProp,

package/src/components/Typography/Caption/Caption.tsx

@@ -2,6 +2,7 @@
 
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { type HasCaps, Typography, type TypographyProps } from '../Typography';
 import styles from './Caption.module.css';
 
@@ -16,6 +17,18 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export function captionClassNames(
+  sizeY: 'none' | SizeTypeValues,
+  level: '1' | '2' | '3' | undefined = '1',
+  caps = false,
+) {
+  return classNames(
+    sizeY !== 'regular' && sizeYClassNames[sizeY],
+    caps && styles.caps,
+    stylesLevel[level],
+  );
+}
+
 export interface CaptionProps extends TypographyProps, HasCaps {
   /**
    * Уровень заголовка (от 1 до 3).
@@ -44,12 +57,7 @@ export const Caption = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(
-        className,
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        caps && styles.caps,
-        stylesLevel[level],
-      )}
+      className={classNames(className, captionClassNames(sizeY, level, caps))}
       {...restProps}
     />
   );

package/src/components/Typography/Footnote/Footnote.tsx

@@ -2,6 +2,7 @@
 
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { type HasCaps, Typography, type TypographyProps } from '../Typography';
 import styles from './Footnote.module.css';
 
@@ -10,6 +11,14 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export function footnoteClassNames(sizeY: 'none' | SizeTypeValues, caps = false) {
+  return classNames(
+    styles.host,
+    sizeY !== 'regular' && sizeYClassNames[sizeY],
+    caps && styles.caps,
+  );
+}
+
 export interface FootnoteProps extends TypographyProps, HasCaps {}
 
 /**
@@ -32,12 +41,7 @@ export const Footnote = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(
-        className,
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        styles.host,
-        caps && styles.caps,
-      )}
+      className={classNames(className, footnoteClassNames(sizeY, caps))}
       {...restProps}
     />
   );

package/src/components/Typography/Typography.tsx

@@ -10,6 +10,14 @@ const stylesWeight = {
   '3': styles.weight3,
 };
 
+export function weightClassNames(weight: '1' | '2' | '3' | undefined, useAccentWeight = false) {
+  if (!weight) {
+    return '';
+  }
+
+  return classNames(stylesWeight[weight], useAccentWeight && styles.accent);
+}
+
 export interface HasCaps {
   /**
    * Отображение текста в верхнем регистре.
@@ -55,8 +63,7 @@ export const Typography = ({
       styles.host,
       normalize && styles.normalize,
       inline && styles.inline,
-      weight && stylesWeight[weight],
-      weight && useAccentWeight && styles.accent,
+      weightClassNames(weight, useAccentWeight),
     )}
     {...restProps}
   />

package/src/components/View/View.module.css

@@ -4,7 +4,7 @@
   position: relative;
   inline-size: 100%;
   block-size: 100%;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 @media (--reduce-motion) {

package/src/components/View/View.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
+import { millisecondsInSecond } from '../../lib/date';
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
@@ -275,7 +276,7 @@ export const View = ({
   const handleTouchEndForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     swipeBackPrevented.current = false;
     if (swipingBack) {
-      const speed = (swipeBackShift / event.duration) * 1000;
+      const speed = (swipeBackShift / event.duration) * millisecondsInSecond;
       if (swipeBackShift === 0) {
         onSwipeBackCancel();
       } else if (swipeBackShift >= (window!.innerWidth ?? 0)) {

package/src/components/View/ViewInfinite.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
+import { millisecondsInSecond } from '../../lib/date';
 import { canUseDOM, type DOMProps, withDOM } from '../../lib/dom';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
@@ -501,7 +502,7 @@ class ViewInfiniteComponent extends React.Component<
     this.swipeBackPrevented = false;
 
     if (this.state.swipingBack && this.window) {
-      const speed = (this.state.swipeBackShift / event.duration) * 1000;
+      const speed = (this.state.swipeBackShift / event.duration) * millisecondsInSecond;
       if (this.state.swipeBackShift === 0) {
         this.onSwipeBackCancel();
       } else if (this.state.swipeBackShift >= this.window.innerWidth) {

package/src/components/VisuallyHidden/VisuallyHidden.module.css

@@ -10,7 +10,6 @@
   user-select: none;
   border: 0 !important;
   opacity: 0;
-  clip: rect(0, 0, 0, 0) !important;
   clip-path: inset(50%);
 }
 
@@ -22,7 +21,6 @@
   inline-size: 100% !important;
   block-size: 100% !important;
   pointer-events: none;
-  clip: auto !important;
   clip-path: none !important;
 }
 /* stylelint-enable declaration-no-important */

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

@@ -1 +1 @@
-{"version":3,"sources":["./VisuallyHidden.module.css"],"names":["host","focusableInput"],"mappings":"AAAA;AAAA,E,aACAA,M,WADA;AAAA,E,aAkBAC,gB,WAlBA;AAAA;AAAA","file":"VisuallyHidden.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./VisuallyHidden.module.css"],"names":["host","focusableInput"],"mappings":"AAAA;AAAA,E,aACAA,M,WADA;AAAA,E,aAiBAC,gB,WAjBA;AAAA;AAAA","file":"VisuallyHidden.module.css.d.ts","sourceRoot":""}

package/src/hooks/useCalendar.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { addMonths, endOfDay, isAfter, isBefore, isSameDay, startOfDay, subMonths } from 'date-fns';
+import { isSameDate } from '@vkontakte/vkjs';
+import { addMonths, startOfDay, subMonths } from 'date-fns';
 import type { CalendarProps } from '../components/Calendar/Calendar';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';
+import { endOfDay } from '../lib/date';
 
 export interface UseCalendarDependencies
   extends Pick<
@@ -65,7 +67,7 @@ export function useCalendar({
   );
 
   const isDayFocused = React.useCallback(
-    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),
+    (day: Date) => Boolean(focusedDay && isSameDate(day, focusedDay)),
     [focusedDay],
   );
 
@@ -76,10 +78,10 @@ export function useCalendar({
         return shouldDisableDate(day);
       }
       if (disableFuture) {
-        return isAfter(startOfDay(day), now);
+        return startOfDay(day) > now;
       }
       if (disablePast) {
-        return isBefore(endOfDay(day), now);
+        return endOfDay(day) < now;
       }
       if (minDateTime || maxDateTime) {
         return isDayMinMaxRestricted(day, { min: minDateTime, max: maxDateTime, withTime });

package/src/hooks/useFloatingElement.tsx

@@ -69,6 +69,7 @@ export const useFloatingElement = <
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
 
   // useFloatingWithInteractions
   trigger,
@@ -108,6 +109,7 @@ export const useFloatingElement = <
     arrowPadding,
     arrowHeight,
     disableFlipMiddleware,
+    disableShiftMiddleware,
   });
 
   const {

package/src/hooks/useTodayDate.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { differenceInMilliseconds, isSameDay, startOfTomorrow } from 'date-fns';
+import { isSameDate } from '@vkontakte/vkjs';
+import { differenceInMilliseconds, startOfTomorrow } from 'date-fns';
 import { useDOM } from '../lib/dom';
 
 /**
@@ -38,7 +39,7 @@ export function useTodayDate(listenDayChangesForUpdate = false): Date {
           }, timeToDayChange);
 
           // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
-          if (!isSameDay(todayDate, now)) {
+          if (!isSameDate(todayDate, now)) {
             setTodayDate(now);
           }
         }

package/src/index.ts

@@ -309,9 +309,9 @@ export { DropZone } from './components/DropZone/DropZone';
 export type { DropZoneProps } from './components/DropZone/DropZone';
 export { Input } from './components/Input/Input';
 export type { InputProps } from './components/Input/Input';
+export type { ChipProps } from './components/ChipsInputBase/Chip/Chip';
 export { Chip } from './components/ChipsInputBase/Chip/Chip';
 export type {
-  ChipProps,
   ChipOption,
   RenderChipProps,
   ChipOptionValue,
@@ -343,10 +343,12 @@ export type { NativeSelectProps } from './components/NativeSelect/NativeSelect';
 export { CustomSelect } from './components/CustomSelect/CustomSelect';
 export type {
   SelectProps,
-  CustomSelectOptionInterface,
-  CustomSelectRenderOption,
   CustomSelectClearButtonProps,
 } from './components/CustomSelect/CustomSelect';
+export type {
+  CustomSelectOptionInterface,
+  CustomSelectRenderOption,
+} from './components/CustomSelect/types';
 export { CustomSelectOption } from './components/CustomSelectOption/CustomSelectOption';
 export type { CustomSelectOptionProps } from './components/CustomSelectOption/CustomSelectOption';
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl';