fix: scrolling long panels (#401)

.changeset/grumpy-horses-wash.md

@@ -0,0 +1,6 @@
+---
+'leva': patch
+'@leva-ui/plugin-dates': patch
+---
+
+fix: scrolling long panels

packages/leva/src/components/Folder/StyledFolder.ts

@@ -33,7 +33,7 @@ export const StyledWrapper = styled('div', {
       fill: false,
       css: {
         // TODO: fix for calendar popup
-        // overflowY: 'auto',
+        overflowY: 'auto',
         // 20px accounts for top margin
         maxHeight: 'calc(100vh - 20px - $$titleBarHeight)',
       },

packages/leva/stories/panel-options.stories.tsx

@@ -100,3 +100,14 @@ export const NeverHide: Story<any> = () => {
     </div>
   )
 }
+
+export const ReallyLongPanel = () => {
+  useControls({
+    ...Object.fromEntries(
+      Array(50)
+        .fill(0)
+        .map((_, i) => [i, i])
+    ),
+  })
+  return <></>
+}

packages/plugin-dates/src/Date.stories.tsx

@@ -25,3 +25,18 @@ CustomLocale.args = { date: new Date(), locale: 'en-US' }
 
 export const CustomInputFormat = Template.bind({})
 CustomInputFormat.args = { date: new Date(), inputFormat: 'yyyy-MM-dd' }
+
+export const WithOtherFields = () => {
+  const { birthday, ...values } = useControls({
+    text: 'text',
+    birthday: date({ date: new Date() }),
+    number: 0,
+  })
+  return (
+    <div>
+      {birthday.formattedDate}
+      <br />
+      {JSON.stringify(values)}
+    </div>
+  )
+}

packages/plugin-dates/src/Date.tsx

@@ -1,5 +1,5 @@
 import { Components, useInputContext } from 'leva/plugin'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useState } from 'react'
 import DatePicker, { CalendarContainer } from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import { DateCalendarContainerProps, DateInputProps, DateProps } from './date-types'
@@ -22,8 +22,10 @@ const DateInput = forwardRef<HTMLInputElement, Partial<DateInputProps>>(({ value
 export function Date() {
   const { label, value, onUpdate, settings } = useInputContext<DateProps>()
 
+  const [isOpen, setIsOpen] = useState(false)
+
   return (
-    <Row input>
+    <Row input style={{ height: isOpen ? 300 : 'auto' }}>
       <Label>{label}</Label>
       <InputContainer>
         <DatePicker
@@ -32,6 +34,8 @@ export function Date() {
           dateFormat={settings.inputFormat}
           calendarContainer={DateCalendarContainer}
           customInput={<DateInput />}
+          onCalendarOpen={() => setIsOpen(true)}
+          onCalendarClose={() => setIsOpen(false)}
         />
       </InputContainer>
     </Row>