feat: add CustomScrollView.Tint

packages/vkui/src/components/CustomScrollView/CustomScrollView.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { PartialStoryFn } from 'storybook/internal/types';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
-import { Div } from '../Div/Div';
+import { Box } from '../Box/Box';
 import { CustomScrollView, type CustomScrollViewProps } from './CustomScrollView';
 
 const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
@@ -36,7 +36,9 @@ export const Playground: Story = {
   args: {
     enableHorizontalScroll: true,
     children: (
-      <Div
+      <Box
+        paddingInline="var(--vkui--size_base_padding_horizontal--regular)"
+        paddingBlock="var(--vkui--size_base_padding_vertical--regular)"
         style={{
           width: 1440,
           boxSizing: 'content-box',
@@ -89,7 +91,7 @@ export const Playground: Story = {
         in quam eget quam lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget, cursus
         tincidunt ex. In rhoncus turpis turpis, et viverra ex malesuada vel. Donec nisi tellus,
         mollis et posuere vel, dictum eget neque.
-      </Div>
+      </Box>
     ),
   },
   decorators: [Wrapper],

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,8 +1,9 @@
-'use client';
-
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HasRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { CustomScrollViewTint } from './Tint/CustomScrollViewTint';
 import styles from './CustomScrollView.module.css';
 
 const overscrollBehaviorClassNames = {
@@ -19,18 +20,6 @@ const scrollBehaviorClassNames = {
 export interface CustomScrollViewProps
   extends React.AllHTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
-  /**
-   * `className` для компонента.
-   */
-  className?: HTMLDivElement['className'];
-  /**
-   * Обработчик события `scroll`.
-   */
-  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
-  /**
-   * Содержимое.
-   */
-  children: React.ReactNode;
   /**
    * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
    */
@@ -55,31 +44,28 @@ export interface CustomScrollViewProps
  * @see https://vkui.io/components/custom-scroll-view
  */
 export const CustomScrollView = ({
-  className,
-  children,
   enableHorizontalScroll = false,
-  onScroll,
-  getRootRef,
   overscrollBehavior = 'auto',
   scrollBehavior = 'auto',
   scrollbarHidden = false,
   ...restProps
 }: CustomScrollViewProps): React.ReactNode => {
   return (
-    <div
-      className={classNames(
-        className,
+    <RootComponent
+      baseClassName={classNames(
         styles.host,
         enableHorizontalScroll && styles.horizontalScrollEnabled,
         overscrollBehaviorClassNames[overscrollBehavior],
         scrollBehaviorClassNames[scrollBehavior],
         scrollbarHidden && styles.scrollbarHidden,
       )}
-      ref={getRootRef}
-      onScroll={onScroll}
       {...restProps}
-    >
-      {children}
-    </div>
+    />
   );
 };
+
+CustomScrollView.Tint = CustomScrollViewTint;
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(CustomScrollView.Tint, 'CustomScrollView.Tint');
+}

packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.module.css

@@ -0,0 +1,5 @@
+.host {
+  inline-size: 100%;
+  block-size: 100%;
+  mask-composite: intersect;
+}

packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
+import type { PartialStoryFn } from 'storybook/internal/types';
+import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
+import { createStoryParameters } from '../../../testing/storybook/createStoryParameters';
+import { Box } from '../../Box/Box';
+import { CustomScrollView } from '../CustomScrollView';
+import { CustomScrollViewTint, type CustomScrollViewTintProps } from './CustomScrollViewTint';
+
+const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
+  <div
+    style={{
+      borderRadius: 10,
+      border: '1px solid #000',
+      height: '100%',
+      width: '100%',
+      maxWidth: '600px',
+      maxHeight: '300px',
+      boxSizing: 'content-box',
+      overflow: 'hidden',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const story: Meta<CustomScrollViewTintProps> = {
+  title: 'Utils/CustomScrollView/Tint',
+  component: CustomScrollViewTint,
+  parameters: createStoryParameters(
+    'CustomScrollViewTint',
+    CanvasFullLayout,
+    DisableCartesianParam,
+  ),
+  tags: ['Утилиты'],
+};
+
+export default story;
+
+type Story = StoryObj<CustomScrollViewTintProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (props) => (
+      <CustomScrollView {...props}>
+        <Box
+          paddingInline="var(--vkui--size_base_padding_horizontal--regular)"
+          paddingBlock="var(--vkui--size_base_padding_vertical--regular)"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
+          commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum
+          diam bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor,
+          sit amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et.
+          Vestibulum a ex non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus.
+          Mauris blandit porta egestas. Curabitur eget justo elementum, malesuada lacus ut, congue
+          mauris. Integer orci nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean
+          ultricies lacus eros, sit amet condimentum urna malesuada et. Sed quis dolor tempus orci
+          fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
+          <br />
+          <br />
+          Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus
+          convallis lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed
+          odio a neque venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue
+          vitae, ultricies scelerisque ante. Phasellus pharetra risus eget imperdiet sodales.
+          Integer dignissim auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed
+          massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis, eget lobortis
+          lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis auctor nec.
+          <br />
+          <br />
+          Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis. Pellentesque
+          pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida commodo eros.
+          Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit
+          amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor pulvinar diam.
+          Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut tristique
+          massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam rutrum
+          dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at
+          sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
+          <br />
+          <br />
+          In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur quam vulputate
+          quis. Duis ultricies non mauris condimentum molestie. Maecenas sollicitudin ex sem, quis
+          ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit
+          magna. Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus.
+          Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales ut diam.
+          <br />
+          <br />
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+          Nam aliquet tempor laoreet. Maecenas eu pulvinar diam. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et elit eros.
+          Quisque ullamcorper sodales nisi, eleifend aliquet metus venenatis in. Aliquam ornare a
+          lacus in tincidunt. Cras vel tristique metus. Sed vitae nisl at nisl imperdiet
+          sollicitudin. Sed sit amet enim in lectus imperdiet interdum condimentum et diam. Proin
+          venenatis sit amet diam ac vulputate. Donec mauris orci, semper volutpat nunc ut,
+          efficitur condimentum dolor. Vivamus in quam eget quam lacinia pharetra. Phasellus ipsum
+          magna, aliquet id elit eget, cursus tincidunt ex. In rhoncus turpis turpis, et viverra ex
+          malesuada vel. Donec nisi tellus, mollis et posuere vel, dictum eget neque.
+        </Box>
+      </CustomScrollView>
+    ),
+  },
+  decorators: [Wrapper],
+};