@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/ModalRoot/useModalManager.tsx

@@ -6,17 +6,17 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { noop, isFunction } from "../../lib/utils";
 
 interface ModalTransitionState {
-  activeModal?: string;
-  enteringModal?: string;
-  exitingModal?: string;
+  activeModal?: string | null;
+  enteringModal?: string | null;
+  exitingModal?: string | null;
 
   history?: string[];
-  isBack?: boolean;
+  isBack?: boolean | null;
 }
 
 export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: (id: string) => void;
-  onExit: (id: string) => void;
+  onEnter: (id: string | null) => void;
+  onExit: (id: string | null) => void;
   getModalState: (id: string) => ModalsStateEntry;
   closeActiveModal: VoidFunction;
   delayEnter: boolean;
@@ -30,14 +30,17 @@ const warn = warnOnce("ModalRoot");
 
 export function modalTransitionReducer(
   state: ModalTransitionState,
-  action: { type: "setActive" | "entered" | "exited" | "inited"; id: string }
+  action: {
+    type: "setActive" | "entered" | "exited" | "inited";
+    id: string | null;
+  }
 ): ModalTransitionState {
   if (action.type === "setActive" && action.id !== state.activeModal) {
     const nextModal = action.id;
     // preserve exiting modal if switching mid-transition
     const prevModal = state.exitingModal || state.activeModal;
-    let history = [...state.history];
-    const isBack = history.includes(nextModal);
+    let history = state.history ? [...state.history] : [];
+    const isBack = Boolean(nextModal && history.includes(nextModal));
 
     if (nextModal === null) {
       history = [];
@@ -81,7 +84,7 @@ export function modalTransitionReducer(
  * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
  */
 export function useModalManager(
-  activeModal: string,
+  activeModal: string | null | undefined,
   children: React.ReactNode | React.ReactNode[],
   onClose: (id: string) => void,
   initModal: (state: ModalsStateEntry) => void = noop
@@ -90,7 +93,9 @@ export function useModalManager(
   getModals(children).forEach((Modal) => {
     const modalProps = Modal.props;
     const id = getNavId(modalProps, warn);
-    const state: ModalsStateEntry = modalsState[id] || { id };
+    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {
+      id: id ?? null,
+    };
 
     state.onClose = Modal.props.onClose;
     state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
@@ -99,7 +104,9 @@ export function useModalManager(
       state.settlingHeight = modalProps.settlingHeight;
     }
 
-    modalsState[state.id] = state;
+    if (state.id !== null) {
+      modalsState[state.id] = state;
+    }
   });
 
   const isMissing = activeModal && !modalsState[activeModal];
@@ -121,7 +128,7 @@ export function useModalManager(
     if (process.env.NODE_ENV === "development" && isMissing) {
       warn(`Can't transition - modal ${activeModal} not found`);
     }
-    dispatchTransition({ type: "setActive", id: safeActiveModal });
+    dispatchTransition({ type: "setActive", id: safeActiveModal ?? null });
   }, [activeModal]);
 
   // Init activeModal & set enteringModal
@@ -132,23 +139,28 @@ export function useModalManager(
     }
   }, [transitionState.activeModal]);
 
-  const isCard = (id: string) => modalsState[id]?.type === ModalType.CARD;
+  const isCard = (id: string | null | undefined) =>
+    id != null && modalsState[id]?.type === ModalType.CARD;
   const onEnter = React.useCallback(
-    (id: string) => dispatchTransition({ type: "entered", id }),
+    (id: string | null) => dispatchTransition({ type: "entered", id }),
     []
   );
   const onExit = React.useCallback(
-    (id: string) => dispatchTransition({ type: "exited", id }),
+    (id: string | null) => dispatchTransition({ type: "exited", id }),
     []
   );
   const delayEnter = Boolean(
     transitionState.exitingModal &&
       (isCard(activeModal) || isCard(transitionState.exitingModal))
   );
-  const getModalState = React.useCallback((id: string) => modalsState[id], []);
+  const getModalState = React.useCallback(
+    (id: string) => modalsState[id],
+    [modalsState]
+  );
 
   function closeActiveModal() {
-    const modalState = modalsState[transitionState.activeModal];
+    const modalState =
+      transitionState.activeModal && modalsState[transitionState.activeModal];
     if (modalState) {
       if (isFunction(modalState.onClose)) {
         modalState.onClose();
@@ -176,7 +188,7 @@ export function withModalManager(
   return function <Props extends ModalTransitionProps>(
     Wrapped: React.ComponentType<Props>
   ): React.FC<
-    Omit<Props, keyof ModalTransitionProps> & { activeModal: string }
+    Omit<Props, keyof ModalTransitionProps> & { activeModal?: string | null }
   > {
     return function WithModalManager(props) {
       const transitionManager = useModalManager(

package/src/components/ModalRoot/withModalRootContext.tsx

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

package/src/components/NativeSelect/NativeSelect.tsx

@@ -3,11 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  SizeType,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
 import Headline from "../Typography/Headline/Headline";
 import Text from "../Typography/Text/Text";
@@ -16,6 +12,7 @@ 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 "../Select/Select.css";
 
 export interface NativeSelectProps
@@ -23,7 +20,7 @@ export interface NativeSelectProps
     HasRef<HTMLSelectElement>,
     HasRootRef<HTMLLabelElement>,
     HasAlign,
-    AdaptivityProps {
+    AdaptivityContextInterface {
   placeholder?: string;
   multiline?: boolean;
 }
@@ -56,7 +53,7 @@ const NativeSelect: React.FC<NativeSelectProps> = ({
   const selectRef = useExternRef(getRef);
   useIsomorphicLayoutEffect(() => {
     const selectedOption =
-      selectRef.current.options[selectRef.current.selectedIndex];
+      selectRef.current?.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
       setNotSelected(selectedOption.value === "" && placeholder != null);
@@ -104,6 +101,7 @@ const NativeSelect: React.FC<NativeSelectProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(NativeSelect, {
   sizeX: true,
   sizeY: true,

package/src/components/Panel/Panel.tsx

@@ -4,29 +4,23 @@ import { classNames } from "../../lib/classNames";
 import { Touch } from "../Touch/Touch";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import { HasRootRef } from "../../types";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+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 "./Panel.css";
 
 export interface PanelProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
-    AdaptivityProps,
+    AdaptivityContextInterface,
     NavIdProps {
   centered?: boolean;
 }
 
-export const Panel = withAdaptivity(
-  ({
-    centered = false,
-    children,
-    getRootRef,
-    sizeX,
-    nav,
-    ...restProps
-  }: PanelProps) => {
+export const Panel = withAdaptivity<PanelProps>(
+  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
     const platform = usePlatform();
 
     return (

package/src/components/PanelHeader/PanelHeader.css

@@ -7,6 +7,10 @@
   content: "";
 }
 
+.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
+  height: 0;
+}
+
 .PanelHeader__fixed {
   z-index: 10;
 }
@@ -199,7 +203,7 @@
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-left
+  .PanelHeader--android.PanelHeader--no-left:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-left: 0;
 }
@@ -214,7 +218,7 @@
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-right
+  .PanelHeader--android.PanelHeader--no-right:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-right: 0;
 }
@@ -238,7 +242,7 @@
   top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
 }
 
-.PanelHeader--vkcom .PanelHeader__in {
+.PanelHeader--vkcom.PanelHeader--sep .PanelHeader__in {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;

package/src/components/PanelHeader/PanelHeader.tsx

@@ -15,9 +15,9 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { isPrimitiveReactNode } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
+import ModalRootContext from "../ModalRoot/ModalRootContext";
 import "./PanelHeader.css";
 
 export interface PanelHeaderProps
@@ -40,38 +40,27 @@ export interface PanelHeaderProps
   fixed?: boolean;
 }
 
-const PanelHeaderInTypography: React.FC<PanelHeaderProps> = ({
-  children,
-}: PanelHeaderProps) => {
-  const platform = usePlatform();
-
-  return platform === VKCOM ? (
-    <Text weight="medium">{children}</Text>
-  ) : (
-    <span vkuiClass="PanelHeader__content-in">{children}</span>
-  );
-};
-
 const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
   children,
   left,
   right,
 }) => {
   const { webviewType } = React.useContext(ConfigProviderContext);
-  const isPrimitive = isPrimitiveReactNode(children);
+  const { isInsideModal } = React.useContext(ModalRootContext);
+  const platform = usePlatform();
 
   return (
     <TooltipContainer fixed vkuiClass="PanelHeader__in">
       <div vkuiClass="PanelHeader__left">{left}</div>
       <div vkuiClass="PanelHeader__content">
-        {isPrimitive ? (
-          <PanelHeaderInTypography>{children}</PanelHeaderInTypography>
+        {platform === VKCOM ? (
+          <Text weight="medium">{children}</Text>
         ) : (
-          children
+          <span vkuiClass="PanelHeader__content-in">{children}</span>
         )}
       </div>
       <div vkuiClass="PanelHeader__right">
-        {webviewType !== WebviewType.VKAPPS && right}
+        {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
       </div>
     </TooltipContainer>
   );
@@ -95,6 +84,7 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
   } = props;
   const platform = usePlatform();
   const { webviewType } = React.useContext(ConfigProviderContext);
+  const { isInsideModal } = React.useContext(ModalRootContext);
   const needShadow = shadow && sizeX === SizeType.REGULAR;
   let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
 
@@ -108,7 +98,8 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
           "PanelHeader--shadow": needShadow,
           "PanelHeader--vis": visor,
           "PanelHeader--sep": separator && visor,
-          "PanelHeader--vkapps": webviewType === WebviewType.VKAPPS,
+          "PanelHeader--vkapps":
+            webviewType === WebviewType.VKAPPS && !isInsideModal,
           "PanelHeader--no-left": !left,
           "PanelHeader--no-right": !right,
           "PanelHeader--fixed": isFixed,
@@ -144,6 +135,7 @@ PanelHeader.defaultProps = {
   visor: true,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(PanelHeader, {
   sizeX: true,
   sizeY: true,

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -52,6 +52,7 @@ PanelHeaderBack.defaultProps = {
   "aria-label": "Назад",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(
   withAdaptivity(PanelHeaderBack, {
     sizeX: true,

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -31,4 +31,5 @@ PanelHeaderClose.defaultProps = {
   children: "Отмена",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderClose;

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  font-family: var(--font-common);
 }
 
 .PanelHeaderContent__before {
@@ -61,6 +62,10 @@
   width: 1000px;
 }
 
+/**
+ * iOS
+ */
+
 .PanelHeaderContent--ios .PanelHeaderContent__before ~ .PanelHeaderContent__in {
   align-items: flex-start;
 }
@@ -69,10 +74,6 @@
   align-items: center;
 }
 
-/**
- * iOS
- */
-
 .PanelHeaderContent--ios .PanelHeaderContent__children-in {
   font-size: 21px;
   font-family: var(--font-display);
@@ -92,5 +93,15 @@
 }
 
 /**
- * vkcom
+ * VKCOM
  */
+
+.PanelHeaderContent--vkcom
+  .PanelHeaderContent__before
+  ~ .PanelHeaderContent__in {
+  align-items: flex-start;
+}
+
+.PanelHeaderContent--vkcom .PanelHeaderContent__in {
+  align-items: center;
+}

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -97,6 +97,9 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
           >
             {children}
           </PanelHeaderChildren>
+          {hasReactNode(aside) && (
+            <div vkuiClass="PanelHeaderContent__aside">{aside}</div>
+          )}
         </div>
         {hasReactNode(before) && <div vkuiClass="PanelHeaderContent__width" />}
       </InComponent>
@@ -104,4 +107,5 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderContent;

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -29,7 +29,7 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   const closing = visible && !opened;
   const { viewWidth } = useAdaptivity();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  const elementRef = React.useRef<HTMLDivElement>();
+  const elementRef = React.useRef<HTMLDivElement>(null);
 
   useIsomorphicLayoutEffect(() => {
     opened && setVisible(true);
@@ -57,7 +57,7 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   const animationFallback = useTimeout(onAnimationEnd, 200);
   React.useEffect(
     () => (closing ? animationFallback.set() : animationFallback.clear()),
-    [closing]
+    [animationFallback, closing]
   );
 
   return (
@@ -73,7 +73,7 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
       <div
         vkuiClass="PanelHeaderContext__in"
         ref={elementRef}
-        onAnimationEnd={closing ? onAnimationEnd : null}
+        onAnimationEnd={closing ? onAnimationEnd : undefined}
       >
         <div vkuiClass="PanelHeaderContext__content">{visible && children}</div>
       </div>

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -45,4 +45,5 @@ PanelHeaderEdit.defaultProps = {
   doneLabel: "Готово",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderEdit;

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -33,4 +33,5 @@ PanelHeaderSubmit.defaultProps = {
   children: "Готово",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderSubmit;

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -17,4 +17,5 @@ PanelSpinner.defaultProps = {
   height: 96,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(PanelSpinner);

package/src/components/Placeholder/Placeholder.tsx

@@ -66,4 +66,5 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Placeholder;

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -4,15 +4,15 @@ import {
   withAdaptivity,
   ViewWidth,
   ViewHeight,
-  AdaptivityProps,
 } from "../../hoc/withAdaptivity";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
+import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
 import "./PopoutRoot.css";
 
 export interface PopoutRootProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps,
+    AdaptivityContextInterface,
     HasRootRef<HTMLDivElement> {
   popout?: React.ReactNode;
   modal?: React.ReactNode;
@@ -39,7 +39,7 @@ export const PopoutRootComponent: React.FC<PopoutRootProps> = (
 
   React.useEffect(() => {
     popout && blurActiveElement(document);
-  }, [!!popout]);
+  }, [document, popout]);
 
   return (
     <div {...restProps} vkuiClass="PopoutRoot" ref={getRootRef}>

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -29,7 +29,7 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
 }: PopoutWrapperProps) => {
   const platform = usePlatform();
   const [opened, setOpened] = React.useState(!hasMask);
-  const elRef = React.useRef<HTMLDivElement>();
+  const elRef = React.useRef<HTMLDivElement>(null);
 
   const onFadeInEnd = (e?: React.AnimationEvent) => {
     if (!e || e.animationName === "vkui-animation-full-fade-in") {
@@ -42,7 +42,7 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   );
   React.useEffect(() => {
     !opened && animationFinishFallback.set();
-  }, []);
+  }, [animationFinishFallback, opened]);
 
   const { window } = useDOM();
   useGlobalEventListener(window, "touchmove", (e) => e.preventDefault(), {
@@ -65,7 +65,7 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
           "PopoutWrapper--masked": hasMask,
         }
       )}
-      onAnimationEnd={opened ? null : onFadeInEnd}
+      onAnimationEnd={opened ? undefined : onFadeInEnd}
       ref={elRef}
     >
       <div vkuiClass="PopoutWrapper__container">

package/src/components/Popper/Popper.tsx

@@ -26,8 +26,8 @@ export type Placement =
   | "right";
 
 export interface PopperCommonProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasRef<HTMLElement> {
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
    */
@@ -51,7 +51,7 @@ export interface PopperCommonProps
 }
 
 export interface PopperProps extends PopperCommonProps {
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef: React.RefObject<HTMLElement>;
 }
 
 const ARROW_PADDING = 8;
@@ -73,12 +73,14 @@ export const Popper: React.FC<PopperProps> = ({
   style: compStyles,
   ...restProps
 }: PopperProps) => {
-  const [popperNode, setPopperNode] = React.useState(null);
+  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
+    null
+  );
   const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =
     React.useState(0);
   const platform = usePlatform();
 
-  const setExternalRef = useExternRef(getRef, setPopperNode);
+  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);
 
   const modifiers = React.useMemo(() => {
     const modifiers: Array<Modifier<string>> = [
@@ -134,8 +136,6 @@ export const Popper: React.FC<PopperProps> = ({
     smallTargetOffsetSkidding,
     offsetSkidding,
     offsetDistance,
-    ARROW_HEIGHT,
-    ARROW_PADDING,
   ]);
 
   const { styles, state, attributes } = usePopper(
@@ -156,17 +156,17 @@ export const Popper: React.FC<PopperProps> = ({
   useIsomorphicLayoutEffect(() => {
     if (arrow && isEdgePlacement) {
       const placementDirection =
-        resolvedPlacement.startsWith("bottom") ||
-        resolvedPlacement.startsWith("top")
+        resolvedPlacement?.startsWith("bottom") ||
+        resolvedPlacement?.startsWith("top")
           ? "vertical"
           : "horizontal";
 
       const arrowSize =
         placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
       const targetSize =
-        placementDirection === "vertical"
-          ? targetRef.current.offsetWidth
-          : targetRef.current.offsetHeight;
+        (placementDirection === "vertical"
+          ? targetRef.current?.offsetWidth
+          : targetRef.current?.offsetHeight) ?? 0;
 
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
@@ -180,7 +180,7 @@ export const Popper: React.FC<PopperProps> = ({
     if (resolvedPlacement) {
       onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
     }
-  }, [resolvedPlacement]);
+  }, [onPlacementChange, resolvedPlacement]);
 
   const dropdown = (
     <div
@@ -188,7 +188,11 @@ export const Popper: React.FC<PopperProps> = ({
       {...attributes.popper}
       vkuiClass={getClassName("Popper", platform)}
       ref={setExternalRef}
-      style={{ ...compStyles, ...styles.popper }}
+      style={{
+        ...compStyles,
+        ...styles.popper,
+        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,
+      }}
     >
       {arrow && (
         <div

package/src/components/Progress/Progress.tsx

@@ -14,7 +14,7 @@ const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
 const Progress: React.FC<ProgressProps> = ({
-  value,
+  value = 0,
   getRootRef,
   ...restProps
 }: ProgressProps) => {
@@ -45,8 +45,5 @@ const Progress: React.FC<ProgressProps> = ({
   );
 };
 
-Progress.defaultProps = {
-  value: 0,
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Progress;

package/src/components/PromoBanner/PromoBanner.tsx

@@ -125,4 +125,5 @@ const PromoBanner = (props: PromoBannerProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PromoBanner;