Merge pull request #53 from KasperskyLab/feature/forward-ref-scrollbar

feat: forward ref to scrollbar & export from root

packages/kaspersky-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspersky/components",
-  "version": "6.40.5",
+  "version": "6.41.0",
   "description": "Kaspersky Design System UI Kit",
   "author": "AO Kaspersky Lab",
   "license": "Apache-2.0",

packages/kaspersky-components/src/index.ts

@@ -55,3 +55,4 @@ export * from './tree-select'
 export * from './typography'
 export * from './upload'
 export * from './weekly-schedule'
+export * from './scrollbar'

packages/kaspersky-components/src/scrollbar/component/Scrollbar.stories.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import styled from 'styled-components'
+import Scrollbars from 'react-custom-scrollbars-2'
 import { Meta, StoryObj } from '@storybook/react'
 import { badges } from '@sb/badges'
 import { useTheme } from '@design-system/theme'
 import { ThemeKey } from '@design-system/types'
 import { sbHideControls } from '@helpers/storybookHelpers'
 import { withMeta } from '@helpers/hocs/MetaComponent/withMeta'
+import { Button } from '@src/button'
 import MetaData from '../__meta__/meta.json'
 import { Scrollbar } from './Scrollbar'
 import { ScrollbarProps } from './types'
@@ -85,3 +87,28 @@ export const Both: StoryObj<ScrollbarProps> = {
     )
   }
 }
+
+export const WithRef: StoryObj<ScrollbarProps> = {
+  render: (args: ScrollbarProps) => {
+    const theme = useTheme()
+    const ref = useRef<Scrollbars | null>(null)
+
+    const scrollToBottom = () => {
+      ref.current?.scrollToBottom()
+    }
+
+    const scrollToTop = () => {
+      ref.current?.scrollToTop()
+    }
+
+    return (
+      <VerticalWrapper theme={theme.key}>
+        <Scrollbar {...args} theme={theme.key} ref={ref}>
+          <Button onClick={scrollToBottom}>Scroll to bottom</Button>
+          <p>{content}</p>
+          <Button onClick={scrollToTop}>Scroll to top</Button>
+        </Scrollbar>
+      </VerticalWrapper>
+    )
+  }
+}

packages/kaspersky-components/src/scrollbar/component/Scrollbar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { forwardRef, useCallback } from 'react'
 import styled from 'styled-components'
 import { Scrollbars } from 'react-custom-scrollbars-2'
 import { useIsThumbIncreased } from './useIsThumbIncreased'
@@ -22,12 +22,14 @@ const ThumbHorizontal = styled.div`${thumbHorizontalCss}`
 
 const View = styled.div`${viewCss}`
 
-export const Scrollbar: React.FC<ScrollbarProps> = (rawProps) => {
+export const Scrollbar = forwardRef<Scrollbars, ScrollbarProps>((rawProps, ref) => {
   const props = useThemedScrollbar(rawProps)
-  return <ScrollbarView {...props} />
-}
+  return <ScrollbarView {...props} ref={ref}/>
+})
 
-export const ScrollbarView: React.FC<ScrollbarViewProps> = (props) => {
+Scrollbar.displayName = 'Scrollbar'
+
+export const ScrollbarView = forwardRef<Scrollbars, ScrollbarViewProps>((props, ref) => {
   const { cssConfig, ...forwardedProps } = props
   const [, setIsVerticalThumbIncreased] = useIsThumbIncreased()
   const [, setIsHorizontalThumbIncreased] = useIsThumbIncreased()
@@ -73,7 +75,10 @@ export const ScrollbarView: React.FC<ScrollbarViewProps> = (props) => {
       renderThumbVertical={renderThumbVertical}
       renderThumbHorizontal={renderThumbHorizontal}
       renderView={renderView}
+      ref={ref}
       {...forwardedProps}
     />
   )
-}
+})
+
+ScrollbarView.displayName = 'ScrollbarView'

packages/kaspersky-components/src/scrollbar/component/types.ts

@@ -1,6 +1,7 @@
-import { ScrollbarProps as defaultScrollbarProps } from 'react-custom-scrollbars-2'
+import { Ref } from 'react'
+import Scrollbars, { ScrollbarProps as defaultScrollbarProps } from 'react-custom-scrollbars-2'
 import { ScrollbarThemeProps, ScrollbarToViewProps } from '../types'
 
-export type ScrollbarProps = defaultScrollbarProps & ScrollbarThemeProps
+export type ScrollbarProps = defaultScrollbarProps & ScrollbarThemeProps & { ref?: Ref<Scrollbars> }
 
 export type ScrollbarViewProps = ScrollbarToViewProps<ScrollbarProps>