diff --git a/packages/vkui/src/components/FixedLayout/SplitColWidthWrapper.tsx b/packages/vkui/src/components/FixedLayout/SplitColWidthWrapper.tsx new file mode 100644 index 0000000000..908c9cc589 --- /dev/null +++ b/packages/vkui/src/components/FixedLayout/SplitColWidthWrapper.tsx @@ -0,0 +1,47 @@ +'use client'; + +import * as React from 'react'; +import { usePlatform } from '../../hooks/usePlatform'; +import { useResizeObserver } from '../../hooks/useResizeObserver'; +import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames'; +import type { HasComponent } from '../../types'; +import { SplitColContext } from '../SplitCol/SplitColContext'; + +type SplitColWidthWrapperProps = React.HTMLAttributes & HasComponent; + +export const SplitColWidthWrapper: React.ForwardRefExoticComponent< + React.PropsWithoutRef & React.RefAttributes + // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames +> = React.forwardRef( + ({ Component = 'div', style, ...restProps }, forwardedRef) => { + const platform = usePlatform(); + const { colRef } = React.useContext(SplitColContext); + const [width, setWidth] = React.useState(undefined); + + const doResize = React.useCallback(() => { + if (!colRef?.current) { + setWidth(undefined); + return; + } + + const computedStyle = getComputedStyle(colRef.current); + + setWidth( + `${ + colRef.current.clientWidth - + parseFloat(computedStyle.paddingLeft || '0') - + parseFloat(computedStyle.paddingRight || '0') + }px`, + ); + }, [colRef]); + + React.useEffect(doResize, [doResize, platform]); + useResizeObserver(colRef, doResize); + + return ; + }, +); + +if (process.env.NODE_ENV !== 'production') { + defineComponentDisplayNames(SplitColWidthWrapper, 'SplitColWidthWrapper'); +} diff --git a/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltipFixedContainer.tsx b/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltipFixedContainer.tsx new file mode 100644 index 0000000000..7a160cd287 --- /dev/null +++ b/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltipFixedContainer.tsx @@ -0,0 +1,19 @@ +'use client'; + +import * as React from 'react'; +import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames'; +import type { HasComponent } from '../../types'; +import { OnboardingTooltipContainer } from './OnboardingTooltipContainer'; + +type OnboardingTooltipFixedContainerProps = React.HTMLAttributes & HasComponent; + +export const OnboardingTooltipFixedContainer: React.ForwardRefExoticComponent< + React.PropsWithoutRef & React.RefAttributes + // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames +> = React.forwardRef((props, ref) => ( + +)); + +if (process.env.NODE_ENV !== 'production') { + defineComponentDisplayNames(OnboardingTooltipFixedContainer, 'OnboardingTooltipFixedContainer'); +} diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx index cb1f3b9fe1..adb0ad60ee 100644 --- a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx +++ b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx @@ -16,8 +16,9 @@ import type { HasRef, HTMLAttributesWithRootRef, } from '../../types'; +import { Box } from '../Box/Box'; import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext'; -import { FixedLayout } from '../FixedLayout/FixedLayout'; +import { SplitColWidthWrapper } from '../FixedLayout/SplitColWidthWrapper'; import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer'; import { RootComponent } from '../RootComponent/RootComponent'; import { Separator } from '../Separator/Separator'; @@ -201,15 +202,18 @@ export const PanelHeader = ({ getRootRef={isFixed ? getRootRef : getRef} > {isFixed ? ( - {children} - + ) : ( {children} diff --git a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css index ba8ddf16ee..3da3a8f9e4 100644 --- a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css +++ b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css @@ -2,8 +2,6 @@ --vkui_internal--PanelHeaderContext__fade_display: none; z-index: var(--vkui_internal--z_index_panel_header_context); - inline-size: 100%; - block-size: auto; } .viewWidthSmallTabletMinus { @@ -171,3 +169,13 @@ opacity: 0; } } + +/* stylelint-disable selector-max-universal, selector-pseudo-class-disallowed-list */ +:global(.vkuiInternalPanelHeader) ~ .host, +:global(.vkuiInternalPanelHeader) ~ * .host { + inset-block-start: calc( + var(--vkui_internal--panel_header_height) + + var(--vkui_internal--safe_area_inset_top) + ); +} +/* stylelint-enable selector-max-universal, selector-pseudo-class-disallowed-list */ diff --git a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.tsx b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.tsx index d6b2eab4dd..8efdb87b5c 100644 --- a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.tsx +++ b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.tsx @@ -9,7 +9,9 @@ import { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/ad import { useCSSKeyframesAnimationController } from '../../lib/animation'; import type { HTMLAttributesWithRootRef } from '../../types'; import { useScrollLock } from '../AppRoot/ScrollContext'; -import { FixedLayout } from '../FixedLayout/FixedLayout'; +import { Box } from '../Box/Box'; +import { SplitColWidthWrapper } from '../FixedLayout/SplitColWidthWrapper'; +import { OnboardingTooltipFixedContainer } from '../OnboardingTooltip/OnboardingTooltipFixedContainer'; import styles from './PanelHeaderContext.module.css'; function getViewWidthClassName( @@ -43,6 +45,14 @@ export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef +>((props, ref) => ( + +)); + /** * @see https://vkui.io/components/panel-header-context */ @@ -82,8 +92,8 @@ export const PanelHeaderContext = ({ } return ( -
{ @@ -108,6 +121,6 @@ export const PanelHeaderContext = ({ >
{children}
-
+ ); };