Add scroll behaviour story

stories/carousel.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Carousel, CarouselItem, CarouselRef } from './carousel';
 import { Button } from './lib/button';
+import { Select } from './lib/select';
 
 export default {
   title: 'Carousel',
@@ -124,6 +125,43 @@ export const DynamicItems = () => {
   );
 };
 
+export const ScrollBehavior = () => {
+  const scrollBehaviors: ScrollBehavior[] = ['smooth', 'instant', 'auto'];
+  const [scrollBehavior, setScrollBehavior] = useState(scrollBehaviors[0]);
+  const items = Array.from({ length: 18 }).map((_, index) => ({ id: index }));
+  return (
+    <>
+      <div style={{ margin: '0 0 10px' }}>
+        <Select
+          onChange={(e) => {
+            setScrollBehavior(e.target.value as ScrollBehavior);
+          }}
+          value={scrollBehavior}
+        >
+          {scrollBehaviors.map((value) => (
+            <option key={value} value={value}>
+              {value.slice(0, 1).toUpperCase() + value.slice(1)}
+            </option>
+          ))}
+        </Select>
+      </div>
+      <Carousel
+        scrollBehavior={scrollBehavior}
+        items={items}
+        renderItem={({ item, index, isSnapPoint }) => (
+          <CarouselItem
+            key={item.id}
+            isSnapPoint={isSnapPoint}
+            bgColor={getColor(index)}
+          >
+            {index + 1}
+          </CarouselItem>
+        )}
+      />
+    </>
+  );
+};
+
 /* Utils */
 
 const getColor = (i: number) => {

stories/carousel.tsx

@@ -15,6 +15,7 @@ export interface CarouselProps<T> {
     props: CarouselRenderItemProps<T>
   ) => React.ReactElement<CarouselItemProps>;
   readonly scrollMargin?: boolean;
+  readonly scrollBehavior?: ScrollBehavior;
 }
 
 export interface CarouselRenderItemProps<T> {
@@ -28,7 +29,7 @@ export interface CarouselRef {
 }
 
 export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
-  ({ axis, items, renderItem, scrollMargin = false }, ref) => {
+  ({ axis, items, renderItem, scrollMargin = false, scrollBehavior }, ref) => {
     const {
       scrollRef,
       next,
@@ -65,7 +66,7 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
         <div className={styles.controls}>
           <button
             disabled={activePageIndex <= 0}
-            onClick={() => prev()}
+            onClick={() => prev({ behavior: scrollBehavior })}
             className={styles.prevButton}
           >
             {String.fromCharCode(8592)}
@@ -80,7 +81,7 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
               >
                 <button
                   className={styles.paginationButton}
-                  onClick={() => goTo(i)}
+                  onClick={() => goTo(i, { behavior: scrollBehavior })}
                 >
                   {i + 1}
                 </button>
@@ -89,7 +90,7 @@ export const Carousel = React.forwardRef<CarouselRef, CarouselProps<unknown>>(
           </ol>
           <button
             disabled={activePageIndex === pages.length - 1}
-            onClick={() => next()}
+            onClick={() => next({ behavior: scrollBehavior })}
             className={styles.nextButton}
           >
             {String.fromCharCode(8594)}

stories/lib/select.module.css

@@ -0,0 +1,47 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.root::before,
+.root::after {
+  --size: 0.3rem;
+  position: absolute;
+  content: '';
+  right: 1rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.root::before {
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-bottom: var(--size) solid #fff;
+  top: 40%;
+}
+
+.root::after {
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-top: var(--size) solid #fff;
+  top: 55%;
+}
+
+.select {
+  appearance: none;
+  background: #04bfad;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #fff;
+  padding: 10px;
+  padding-right: 40px;
+  font-size: 16px;
+  border-radius: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.select:hover,
+.select:focus-visible {
+  opacity: 0.7;
+}

stories/lib/select.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import React from 'react';
+const styles = require('./select.module.css');
+
+interface Props {
+  readonly children?: React.ReactNode;
+  readonly value?: string;
+  readonly onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  readonly className?: string;
+}
+
+export const Select = ({ children, onChange, value, className }: Props) => {
+  return (
+    <div className={classNames(styles.root, className)}>
+      <select className={styles.select} value={value} onChange={onChange}>
+        {children}
+      </select>
+    </div>
+  );
+};