@vkontakte/vkui 4.32.0 → 4.33.0

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { Text } from "../Typography/Text/Text";
-import Tappable from "../../components/Tappable/Tappable";
+import { Tappable } from "../../components/Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
 

package/src/components/ModalCard/ModalCard.tsx

@@ -4,7 +4,8 @@ import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
 import { HasPlatform } from "../../types";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   useModalRegistry,
 } from "../ModalRoot/ModalRootContext";
 import { ModalType } from "../ModalRoot/types";
@@ -29,36 +30,36 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalCard
- */
-const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
-  props
-) => {
-  const {
-    icon,
-    header,
-    subheader,
-    children,
-    actions,
-    actionsLayout,
-    onClose,
-    platform,
-    viewWidth,
-    viewHeight,
-    hasMouse,
-    nav,
-    ...restProps
-  } = props;
-
+const ModalCardComponent: React.FC<
+  ModalCardProps & AdaptivityContextInterface
+> = ({
+  icon,
+  header,
+  subheader,
+  children,
+  actions,
+  actionsLayout = "horizontal",
+  onClose,
+  platform,
+  viewWidth,
+  viewHeight,
+  hasMouse,
+  nav,
+  id,
+  ...restProps
+}) => {
   const isDesktop = useAdaptivityIsDesktop();
 
   const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.CARD);
+  const { refs } = useModalRegistry(
+    getNavId({ nav, id }, warn),
+    ModalType.CARD
+  );
 
   return (
     <div
       {...restProps}
+      id={id}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalCard", platform), {
         "ModalCard--desktop": isDesktop,
@@ -80,13 +81,13 @@ const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   );
 };
 
-ModalCard.defaultProps = {
-  actionsLayout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(withPlatform(ModalCard), {
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCard
+ */
+export const ModalCard = withAdaptivity(withPlatform(ModalCardComponent), {
   viewWidth: true,
   viewHeight: true,
   hasMouse: true,
 });
+
+ModalCard.displayName = "ModalCard";

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -9,7 +9,7 @@ import { ViewWidth, withAdaptivity } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
 import { ANDROID, IOS, Platform } from "../../lib/platform";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
 import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon20Cancel } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./ModalDismissButton.css";
@@ -10,15 +10,17 @@ export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */
-const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
-  props: ModalDismissButtonProps
-) => {
+export const ModalDismissButton: React.FC<ModalDismissButtonProps> = ({
+  "aria-label": ariaLabel = "Закрыть",
+  ...restProps
+}: ModalDismissButtonProps) => {
   const platform = usePlatform();
 
   return (
     <Tappable
       vkuiClass={getClassName("ModalDismissButton", platform)}
-      {...props}
+      {...restProps}
+      aria-label={ariaLabel}
       activeMode="ModalDismissButton--active"
       hoverMode="ModalDismissButton--hover"
     >
@@ -26,10 +28,3 @@ const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
     </Tappable>
   );
 };
-
-ModalDismissButton.defaultProps = {
-  "aria-label": "Закрыть",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalDismissButton;

package/src/components/ModalPage/ModalPage.tsx

@@ -12,7 +12,7 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { multiRef } from "../../lib/utils";
 import { ModalType } from "../ModalRoot/types";
 import { getNavId, NavIdProps } from "../../lib/getNavId";
@@ -58,32 +58,28 @@ export interface ModalPageProps
 
 const warn = warnOnce("ModalPage");
 
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalPage
- */
-const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
-  props
-) => {
+const ModalPageComponent: React.FC<
+  ModalPageProps & AdaptivityContextInterface
+> = ({
+  children,
+  header,
+  viewWidth,
+  viewHeight,
+  sizeX,
+  hasMouse,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+  settlingHeight, // 75
+  dynamicContentHeight,
+  getModalContentRef,
+  nav,
+  id,
+  ...restProps
+}) => {
   const { updateModalHeight } = React.useContext(ModalRootContext);
 
-  const {
-    children,
-    header,
-    viewWidth,
-    viewHeight,
-    sizeX,
-    hasMouse,
-    onOpen,
-    onOpened,
-    onClose,
-    onClosed,
-    settlingHeight,
-    dynamicContentHeight,
-    getModalContentRef,
-    nav,
-    ...restProps
-  } = props;
-
   const platform = usePlatform();
   const orientation = useOrientationChange();
 
@@ -98,11 +94,15 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
 
   const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);
+  const { refs } = useModalRegistry(
+    getNavId({ nav, id }, warn),
+    ModalType.PAGE
+  );
 
   return (
     <div
       {...restProps}
+      id={id}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ModalPage", platform),
@@ -138,14 +138,14 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   );
 };
 
-ModalPage.defaultProps = {
-  settlingHeight: 75,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ModalPage, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPage
+ */
+export const ModalPage = withAdaptivity(ModalPageComponent, {
   viewWidth: true,
   viewHeight: true,
   sizeX: true,
   hasMouse: true,
 });
+
+ModalPage.displayName = "ModalPage";

package/src/components/ModalRoot/ModalRoot.tsx

@@ -10,7 +10,8 @@ import { transitionEvent } from "../../lib/supportEvents";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 import {

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -46,6 +46,3 @@ export function useModalRegistry(id: string | undefined, type: ModalType) {
   }).current;
   return { refs };
 }
-
-// eslint-disable-next-line import/no-default-export
-export default ModalRootContext;

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -4,7 +4,8 @@ import { transitionEvent } from "../../lib/supportEvents";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 import {

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 

package/src/components/Pagination/Pagination.tsx

@@ -11,7 +11,7 @@ import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { PaginationPageType, usePagination } from "../../hooks/usePagination";
 
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { Button } from "../Button/Button";
 
 import "./Pagination.css";

package/src/components/PanelHeader/PanelHeader.css

@@ -223,6 +223,15 @@
   content: "";
 }
 
+/* TODO: v5.0.0 новая адаптивность */
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)
+  .PanelHeader__in {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;
+  border-bottom: none;
+}
+
 .PanelHeader--vkcom .PanelHeader__content {
   text-align: center;
 }

package/src/components/PanelHeader/PanelHeader.tsx

@@ -3,7 +3,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { warnOnce } from "../../lib/warnOnce";
-import FixedLayout from "../FixedLayout/FixedLayout";
+import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { Separator } from "../Separator/Separator";
 import { Platform, VKCOM } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";
@@ -18,7 +18,7 @@ import {
 } from "../../hoc/withAdaptivity";
 import { Text } from "../Typography/Text/Text";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import ModalRootContext from "../ModalRoot/ModalRootContext";
+import { ModalRootContext } from "../ModalRoot/ModalRootContext";
 import { Spacing } from "../Spacing/Spacing";
 import "./PanelHeader.css";
 

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -27,9 +27,12 @@ export type PanelHeaderBackProps = PanelHeaderButtonProps &
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
  */
-const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
+export const PanelHeaderBackComponent: React.FunctionComponent<
+  PanelHeaderBackProps
+> = ({
   label,
   sizeX,
+  "aria-label": ariaLabel = "Назад",
   ...restProps
 }: PanelHeaderButtonProps & AdaptivityProps) => {
   const platform = usePlatform();
@@ -39,6 +42,7 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   return (
     <PanelHeaderButton
       {...restProps}
+      aria-label={ariaLabel}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
         "PanelHeaderBack--has-label": showLabel && !!label,
@@ -52,13 +56,10 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   );
 };
 
-PanelHeaderBack.defaultProps = {
-  "aria-label": "Назад",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(
-  withAdaptivity(PanelHeaderBack, {
+export const PanelHeaderBack = React.memo(
+  withAdaptivity(PanelHeaderBackComponent, {
     sizeX: true,
   })
 );
+
+PanelHeaderBack.displayName = "PanelHeaderBack";

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { warnOnce } from "../../lib/warnOnce";

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -11,10 +11,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
  */
-const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({
-  children,
-  ...restProps
-}: PanelHeaderButtonProps) => {
+export const PanelHeaderClose: React.FunctionComponent<
+  PanelHeaderButtonProps
+> = ({ children = "Отмена", ...restProps }: PanelHeaderButtonProps) => {
   const platform = usePlatform();
   return (
     <PanelHeaderButton
@@ -29,10 +28,3 @@ const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({
     </PanelHeaderButton>
   );
 };
-
-PanelHeaderClose.defaultProps = {
-  children: "Отмена",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderClose;

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
@@ -48,7 +48,9 @@ const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */
-const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
+export const PanelHeaderContent: React.FunctionComponent<
+  PanelHeaderContentProps
+> = ({
   className,
   style,
   aside,
@@ -103,6 +105,3 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderContent;

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import FixedLayout from "../FixedLayout/FixedLayout";
+import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { ViewWidth } from "../AdaptivityProvider/AdaptivityContext";

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -25,10 +25,10 @@ export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
  */
-const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
-  isActive,
-  editLabel,
-  doneLabel,
+export const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
+  isActive = false,
+  editLabel = "Редактировать",
+  doneLabel = "Готово",
   ...restProps
 }: PanelHeaderEditProps) => {
   const iOSText = isActive ? doneLabel : editLabel;
@@ -41,12 +41,3 @@ const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
     </PanelHeaderButton>
   );
 };
-
-PanelHeaderEdit.defaultProps = {
-  isActive: false,
-  editLabel: "Редактировать",
-  doneLabel: "Готово",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderEdit;

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -11,10 +11,9 @@ import { getTitleFromChildren } from "../../lib/utils";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */
-const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({
-  children,
-  ...restProps
-}: PanelHeaderButtonProps) => {
+export const PanelHeaderSubmit: React.FunctionComponent<
+  PanelHeaderButtonProps
+> = ({ children = "Готово", ...restProps }: PanelHeaderButtonProps) => {
   const platform = usePlatform();
 
   return (
@@ -31,10 +30,3 @@ const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({
     </PanelHeaderButton>
   );
 };
-
-PanelHeaderSubmit.defaultProps = {
-  children: "Готово",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderSubmit;

package/src/components/Placeholder/Placeholder.tsx

@@ -30,7 +30,9 @@ export interface PlaceholderProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
+export const Placeholder: React.FC<PlaceholderProps> = (
+  props: PlaceholderProps
+) => {
   const {
     icon,
     header,
@@ -69,6 +71,3 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Placeholder;

package/src/components/PopoutWrapper/PopoutWrapper.css

@@ -26,16 +26,17 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation: vkui-animation-full-fade-in 0.2s ease;
+  animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
   opacity: 0;
-  transition: opacity 0.2s var(--android-easing);
+  transition: opacity var(--vkui--animation_duration_m)
+    var(--vkui--animation_easing_default);
 }
 
 .PopoutWrapper--masked .PopoutWrapper__overlay {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--vkui--color_overlay_primary);
 }
 
 .PopoutWrapper--fixed .PopoutWrapper__overlay {
@@ -86,18 +87,6 @@
   justify-content: flex-end;
 }
 
-/**
- * iOS version
- */
-
-.PopoutWrapper--ios .PopoutWrapper__overlay {
-  animation-duration: 0.3s;
-}
-
-.PopoutWrapper--ios.PopoutWrapper--closing .PopoutWrapper__overlay {
-  transition: opacity 0.3s var(--ios-easing);
-}
-
 @keyframes vkui-animation-full-fade-in {
   from {
     opacity: 0;

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { IOS } from "../../lib/platform";
 import { useTimeout } from "../../hooks/useTimeout";
@@ -52,22 +51,17 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
     passive: false,
   });
 
-  const baseClassNames = getClassName("PopoutWrapper", platform);
-
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        baseClassNames,
+        "PopoutWrapper",
         `PopoutWrapper--v-${alignY}`,
         `PopoutWrapper--h-${alignX}`,
-        {
-          "PopoutWrapper--closing": closing,
-          "PopoutWrapper--opened": opened,
-          "PopoutWrapper--fixed": fixed,
-          "PopoutWrapper--masked": hasMask,
-        }
+        closing && "PopoutWrapper--closing",
+        opened && "PopoutWrapper--opened",
+        fixed && "PopoutWrapper--fixed",
+        hasMask && "PopoutWrapper--masked"
       )}
       onAnimationEnd={opened ? undefined : onFadeInEnd}
       ref={elRef}

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { Button } from "../Button/Button";
-import SimpleCell from "../SimpleCell/SimpleCell";
-import Avatar from "../Avatar/Avatar";
+import { SimpleCell } from "../SimpleCell/SimpleCell";
+import { Avatar } from "../Avatar/Avatar";
 import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
@@ -52,7 +52,7 @@ const warn = warnOnce("PromoBanner");
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
  */
-const PromoBanner = (props: PromoBannerProps) => {
+export const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;
 
@@ -134,6 +134,3 @@ const PromoBanner = (props: PromoBannerProps) => {
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default PromoBanner;

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -9,7 +9,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { ScrollContextInterface, useScroll } from "../AppRoot/ScrollContext";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
-import FixedLayout from "../FixedLayout/FixedLayout";
+import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { PullToRefreshSpinner } from "./PullToRefreshSpinner";
 import TouchRootContext from "../Touch/TouchContext";
 import { usePrevious } from "../../hooks/usePrevious";

package/src/components/Radio/Radio.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";

package/src/components/RangeSlider/RangeSlider.tsx

@@ -8,7 +8,7 @@ export type RangeSliderProps = UniversalSliderProps<Value>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
-const RangeSlider: React.FC<RangeSliderProps> = ({
+export const RangeSlider: React.FC<RangeSliderProps> = ({
   onChange,
   defaultValue,
   min = 0,
@@ -52,6 +52,3 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
     />
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default RangeSlider;