@vkontakte/vkui 4.25.0 → 4.27.0

package/src/components/CardScroll/CardScroll.tsx

@@ -1,25 +1,32 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll from "../HorizontalScroll/HorizontalScroll";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+} from "../HorizontalScroll/HorizontalScroll";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
 
-export interface CardScrollProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
-  size?: "s" | "m" | "l";
+export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
+   */
+  size?: "s" | "m" | "l" | false;
+  showArrows?: HorizontalScrollProps["showArrows"];
+  withSpaces?: boolean;
 }
 
-const CardScroll: React.FC<CardScrollProps> = ({
+export const CardScroll: React.FC<CardScrollProps> = ({
   children,
-  size,
-  sizeX,
+  size = "s",
+  showArrows = true,
+  withSpaces = true,
   ...restProps
 }: CardScrollProps) => {
   const platform = usePlatform();
+  const { sizeX } = useAdaptivity();
 
   const refContainer = React.useRef<HTMLDivElement>(null);
   const gapRef = React.useRef<HTMLDivElement>(null);
@@ -88,14 +95,15 @@ const CardScroll: React.FC<CardScrollProps> = ({
       {...restProps}
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
+        `CardScroll--sizeX-${sizeX}`,
         `CardScroll--${size}`,
-        `CardScroll--sizeX-${sizeX}`
+        { ["CardScroll--withSpaces"]: withSpaces }
       )}
     >
       <HorizontalScroll
         getScrollToLeft={getScrollToLeft}
         getScrollToRight={getScrollToRight}
-        showArrows={true}
+        showArrows={showArrows}
       >
         <div vkuiClass="CardScroll__in" ref={refContainer}>
           <span vkuiClass="CardScroll__gap" ref={gapRef} />
@@ -106,10 +114,3 @@ const CardScroll: React.FC<CardScrollProps> = ({
     </div>
   );
 };
-
-CardScroll.defaultProps = {
-  size: "s",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/CardScroll/Readme.md

@@ -1,5 +1,6 @@
-Горизонтальный скролл для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины.  
-В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+Горизонтальный скролл для [Card](#!/Card).
+
+Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
 
 - `size="s"`: высота равна 66% ширины;
 - `size="m"`: высота равна 42% ширины;

package/src/components/Chip/Chip.tsx

@@ -18,7 +18,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
-const Chip: React.FC<ChipProps> = ({
+export const Chip: React.FC<ChipProps> = ({
   value = "",
   option,
   removable = true,
@@ -73,6 +73,3 @@ const Chip: React.FC<ChipProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Chip;

package/src/components/ChipsInput/ChipsInput.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { classNames } from "../../lib/classNames";
-import Chip, { ChipProps } from "../Chip/Chip";
+import { Chip, ChipProps } from "../Chip/Chip";
 import { noop } from "../../lib/utils";
 import { useChipsInput } from "./useChipsInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -15,9 +15,13 @@ import {
   AppearanceScheme,
   Scheme,
 } from "../../helpers/scheme";
-import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import {
+  AppearanceProvider,
+  generateVKUITokensClassName,
+} from "../AppearanceProvider/AppearanceProvider";
 
-export interface ConfigProviderProps extends ConfigProviderContextInterface {
+export interface ConfigProviderProps
+  extends Partial<ConfigProviderContextInterface> {
   /**
    * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
@@ -60,19 +64,17 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
-  schemeTarget,
   ...props
-}: React.PropsWithChildren<ConfigProviderProps> & {
-  schemeTarget?: HTMLElement;
 }) => {
   const config = { ...defaultConfigProviderProps, ...props };
+  const { platform, appearance } = config;
   const scheme = normalizeScheme({
     scheme: config.scheme,
-    platform: config.platform,
-    appearance: config.appearance,
+    platform: platform,
+    appearance: appearance,
   });
   const { document } = useDOM();
-  const target = schemeTarget || document?.body;
+  const target = document?.body;
 
   useIsomorphicLayoutEffect(() => {
     if (scheme === "inherit") {
@@ -91,8 +93,23 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   }, [scheme]);
 
   const realScheme = useSchemeDetector(target, scheme);
+  const derivedAppearance = deriveAppearance(realScheme);
+
+  useIsomorphicLayoutEffect(() => {
+    const VKUITokensClassName = generateVKUITokensClassName(
+      platform,
+      derivedAppearance
+    );
+
+    target?.classList.add(VKUITokensClassName);
+
+    return () => {
+      target?.classList.remove(VKUITokensClassName);
+    };
+  }, [platform, derivedAppearance]);
+
   const configContext = useObjectMemo({
-    appearance: deriveAppearance(realScheme),
+    appearance: derivedAppearance,
     ...config,
   });
 

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -11,12 +11,12 @@ export interface ConfigProviderContextInterface {
   /**
    * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
    */
-  isWebView?: boolean;
+  isWebView: boolean;
   /**
    * Тип вебвью.<br>
    * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
    */
-  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;
+  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
   /**
    * Тип приложения
    */
@@ -28,12 +28,12 @@ export interface ConfigProviderContextInterface {
   /**
    * Включена ли анимация переходов между экранами в `Root` и `View`
    */
-  transitionMotionEnabled?: boolean;
+  transitionMotionEnabled: boolean;
   /**
    * Платформа
    */
-  platform?: PlatformType;
-  hasNewTokens?: boolean;
+  platform: PlatformType;
+  hasNewTokens: boolean;
 }
 
 export const defaultConfigProviderProps = {

package/src/components/ContentCard/ContentCard.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Card, { CardProps } from "../Card/Card";
+import { Card, CardProps } from "../Card/Card";
 import Caption from "../Typography/Caption/Caption";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
@@ -7,6 +7,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
 import { HasRef, HasRootRef } from "../../types";
 import { classNames } from "../../lib/classNames";
 import "./ContentCard.css";
@@ -46,6 +47,7 @@ export interface ContentCardProps
   mode?: CardProps["mode"];
 }
 
+const warn = warnOnce("ContentCard");
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   const {
     subtitle,
@@ -78,6 +80,10 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
 
   const source = image || src;
 
+  if (image && process.env.NODE_ENV === "development") {
+    warn("Свойство image устарело и будет удалено в 5.0.0. Используйте src");
+  }
+
   return (
     <Card
       mode={mode}
@@ -125,7 +131,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Caption>
           )}
           {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="semibold" level="3">
+            <Title vkuiClass="ContentCard__text" weight="3" level="1">
               {header}
             </Title>
           )}

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -39,7 +39,7 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   const { sizeY } = useAdaptivity();
 
   if (!!option && process.env.NODE_ENV === "development") {
-    warn("Свойство option было добавлено по ошибке будет и удалено в 5.0.0");
+    warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
   return (

package/src/components/Epic/Epic.tsx

@@ -5,19 +5,24 @@ import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import { ScrollSaver } from "./ScrollSaver";
 import { getNavId } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Epic.css";
 
 export interface EpicProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityContextInterface {
+    AdaptivityProps {
   tabbar?: React.ReactNode;
   activeStory: string;
 }
 
 const warn = warnOnce("Epic");
 
-export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
+export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
+  props
+) => {
   const platform = usePlatform();
   const scroll = React.useRef<{ [key: string]: number }>({}).current;
   const { activeStory, tabbar, children, viewWidth, ...restProps } = props;

package/src/components/FocusVisible/FocusVisible.css

@@ -1,5 +1,4 @@
-.Switch--focus-visible > .FocusVisible,
-.Tappable--focus-visible > .FocusVisible {
+[class$="--focus-visible"] > .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -13,8 +12,7 @@
   z-index: 0;
 }
 
-.Switch--focus-visible > .FocusVisible--outside,
-.Tappable--focus-visible > .FocusVisible--outside {
+[class$="--focus-visible"] > .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -28,8 +26,7 @@
  * navigating accessible vkui apps via keyboard
  */
 @media (prefers-reduced-motion: no-preference) {
-  .Tappable--focus-visible > .FocusVisible,
-  .Switch--focus-visible > .FocusVisible {
+  [class$="--focus-visible"] > .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
@@ -39,8 +36,7 @@
     will-change: top, left, bottom, right;
   }
 
-  .Tappable--focus-visible > .FocusVisible--outside,
-  .Switch--focus-visible > .FocusVisible--outside {
+  [class$="--focus-visible"] > .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;

package/src/components/FormItem/Readme.md

@@ -113,8 +113,20 @@ class Example extends React.Component {
               </FormItem>
 
               <FormItem top="Тип документа">
-                <Radio name="type">Паспорт</Radio>
-                <Radio name="type">Загран</Radio>
+                <SegmentedControl
+                  size="m"
+                  name="type"
+                  options={[
+                    {
+                      label: "Паспорт РФ",
+                      value: "russian",
+                    },
+                    {
+                      label: "Заграничный",
+                      value: "international",
+                    },
+                  ]}
+                />
               </FormItem>
 
               {this.addressItems.map(({ label, name }) => (

package/src/components/Gradient/Gradient.tsx

@@ -7,12 +7,12 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
   to?: "top" | "bottom";
 }
 
-const Gradient: React.FunctionComponent<GradientProps> = ({
-  mode,
+export const Gradient: React.FC<GradientProps> = ({
+  mode = "tint",
   children,
-  to,
+  to = "top",
   ...restProps
-}: GradientProps) => {
+}) => {
   return (
     <div
       role="presentation"
@@ -27,11 +27,3 @@ const Gradient: React.FunctionComponent<GradientProps> = ({
     </div>
   );
 };
-
-Gradient.defaultProps = {
-  mode: "tint",
-  to: "top",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Gradient;

package/src/components/Gradient/Readme.md

@@ -20,7 +20,7 @@ const Example = ({ sizeX }) => {
             <Title
               style={{ marginBottom: 8, marginTop: 20 }}
               level="2"
-              weight="medium"
+              weight="2"
             >
               Алексей Мазелюк
             </Title>

package/src/components/Header/Header.tsx

@@ -41,7 +41,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     switch (mode) {
       case "primary":
       case "tertiary":
-        return <Title weight="semibold" level="3" {...restProps} />;
+        return <Title weight="1" level="3" {...restProps} />;
       case "secondary":
         return <Caption level="1" weight="semibold" caps {...restProps} />;
     }

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -7,6 +7,7 @@ import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
 import { HasRef } from "../../types";
+import { classNames } from "../../lib/classNames";
 import "./HorizontalScroll.css";
 
 interface ScrollContext {
@@ -38,7 +39,7 @@ export interface HorizontalScrollProps
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
-  showArrows?: boolean;
+  showArrows?: boolean | "always";
   scrollAnimationDuration?: number;
 }
 
@@ -181,7 +182,12 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   React.useEffect(onscroll, [scrollerRef, children, onscroll]);
 
   return (
-    <div {...restProps} vkuiClass={getClassName("HorizontalScroll", platform)}>
+    <div
+      {...restProps}
+      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
+        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
+      })}
+    >
       {showArrows && hasMouse && canScrollLeft && (
         <HorizontalScrollArrow
           direction="left"
@@ -196,8 +202,8 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
         <HorizontalScrollArrow
           direction="right"
           onClick={() => {
-            if (getScrollToLeft) {
-              scrollTo(getScrollToLeft);
+            if (getScrollToRight) {
+              scrollTo(getScrollToRight);
             }
           }}
         />

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -22,7 +22,9 @@
 }
 
 .HorizontalScroll:hover .HorizontalScrollArrow:hover,
-.Gallery:hover .HorizontalScrollArrow:hover {
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
   opacity: 1;
 }
 

package/src/components/IconButton/IconButton.tsx

@@ -5,6 +5,7 @@ import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
 import "./IconButton.css";
 
 export interface IconButtonProps extends TappableProps {
@@ -14,6 +15,7 @@ export interface IconButtonProps extends TappableProps {
   icon?: React.ReactNode;
 }
 
+const warn = warnOnce("IconButton");
 const IconButton: React.FC<IconButtonProps> = ({
   icon,
   sizeY,
@@ -23,6 +25,12 @@ const IconButton: React.FC<IconButtonProps> = ({
 }: IconButtonProps) => {
   const platform = usePlatform();
 
+  if (icon && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство icon устарело и будет удалено в 5.0.0. Используйте children"
+    );
+  }
+
   return (
     <Tappable
       {...restProps}

package/src/components/ModalCard/ModalCard.tsx

@@ -18,18 +18,23 @@ import {
   ModalCardBase,
   ModalCardBaseProps,
 } from "../ModalCardBase/ModalCardBase";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalCard.css";
 
 export interface ModalCardProps
   extends HasPlatform,
-    AdaptivityContextInterface,
+    AdaptivityProps,
     NavIdProps,
     ModalCardBaseProps {}
 
 const warn = warnOnce("ModalCard");
 
-const ModalCard: React.FC<ModalCardProps> = (props: ModalCardProps) => {
+const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
+  props
+) => {
   const {
     icon,
     header,

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -12,7 +12,7 @@ import {
 } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { IOS } from "../../lib/platform";
+import { ANDROID, IOS } from "../../lib/platform";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
@@ -99,7 +99,7 @@ export const ModalCardBase = withAdaptivity<
           {hasReactNode(header) && (
             <Title
               level="2"
-              weight="semibold"
+              weight={platform === ANDROID ? "2" : "1"}
               vkuiClass="ModalCardBase__header"
             >
               {header}

package/src/components/ModalPage/ModalPage.tsx

@@ -11,7 +11,10 @@ import {
   ViewHeight,
   ViewWidth,
 } from "../../hoc/withAdaptivity";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { multiRef } from "../../lib/utils";
 import { ModalType } from "../ModalRoot/types";
@@ -21,7 +24,7 @@ import "./ModalPage.css";
 
 export interface ModalPageProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityContextInterface,
+    AdaptivityProps,
     NavIdProps {
   /**
    * Шапка модальной страницы, `<ModalPageHeader />`
@@ -40,7 +43,9 @@ export interface ModalPageProps
 }
 
 const warn = warnOnce("ModalPage");
-const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
+const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
+  props
+) => {
   const platform = usePlatform();
   const { updateModalHeight } = React.useContext(ModalRootContext);
   const {

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -6,9 +6,12 @@ import {
 } from "../../hoc/withAdaptivity";
 import { ModalRootTouch } from "./ModalRoot";
 import { ModalRootDesktop } from "./ModalRootDesktop";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 
-export interface ModalRootProps extends AdaptivityContextInterface {
+export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
 
   /**
@@ -17,7 +20,9 @@ export interface ModalRootProps extends AdaptivityContextInterface {
   onClose?: (modalId: string) => void;
 }
 
-const ModalRootComponent: React.FC<ModalRootProps> = (props) => {
+const ModalRootComponent: React.FC<
+  ModalRootProps & AdaptivityContextInterface
+> = (props) => {
   const { viewWidth, viewHeight, hasMouse } = props;
   const isDesktop =
     viewWidth >= ViewWidth.SMALL_TABLET &&

package/src/components/ModalRoot/Readme.md

@@ -189,7 +189,7 @@ const App = withPlatform(
                 <Title
                   style={{ marginBottom: 8, marginTop: 20 }}
                   level="2"
-                  weight="medium"
+                  weight="2"
                 >
                   {this.randomUser.first_name + " " + this.randomUser.last_name}
                 </Title>

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -7,7 +7,7 @@ type PickedProps = Pick<ModalRootContextInterface, "updateModalHeight">;
 
 export function withModalRootContext<P extends PickedProps>(
   Component: React.ComponentType<P>
-): React.ComponentType<P> {
+): React.ComponentType<Omit<P, keyof PickedProps>> {
   function WithModalRootContext(props: Omit<P, keyof PickedProps>) {
     const { updateModalHeight } = React.useContext(ModalRootContext);
 

package/src/components/NativeSelect/NativeSelect.tsx

@@ -12,7 +12,10 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "../Select/Select.css";
 
 export interface NativeSelectProps
@@ -20,7 +23,7 @@ export interface NativeSelectProps
     HasRef<HTMLSelectElement>,
     HasRootRef<HTMLLabelElement>,
     HasAlign,
-    AdaptivityContextInterface {
+    AdaptivityProps {
   placeholder?: string;
   multiline?: boolean;
 }
@@ -31,7 +34,9 @@ export interface SelectState {
   notSelected?: boolean;
 }
 
-const NativeSelect: React.FC<NativeSelectProps> = ({
+const NativeSelect: React.FC<
+  NativeSelectProps & AdaptivityContextInterface
+> = ({
   style,
   defaultValue = "",
   align,

package/src/components/Panel/Panel.tsx

@@ -8,18 +8,21 @@ import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { NavIdProps } from "../../lib/getNavId";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Panel.css";
 
 export interface PanelProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
-    AdaptivityContextInterface,
+    AdaptivityProps,
     NavIdProps {
   centered?: boolean;
 }
 
-export const Panel = withAdaptivity<PanelProps>(
+export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
   ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
     const platform = usePlatform();