fix(mantine, date-range): popover opens close to dropdown (#3959)

* fix(mantine, date-range): popover opens close to dropdown * feat(website, date range): add demo for inline and popover calendars
coveo · Nov 20, 2024 · c26776e · c26776e
1 parent 612f1dc
commit c26776e
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 17 deletions.
diff --git a/packages/components-props-analyzer/src/ComponentsList.ts b/packages/components-props-analyzer/src/ComponentsList.ts
@@ -107,6 +107,16 @@ const components: Component[] = [
         packageName: '@coveord/plasma-mantine',
         propsType: 'ChildFormProps',
     },
+    {
+        name: 'DateRangePickerPopoverCalendar',
+        packageName: '@coveord/plasma-mantine',
+        propsType: 'DateRangePickerPopoverCalendarProps',
+    },
+    {
+        name: 'DateRangePickerInlineCalendar',
+        packageName: '@coveord/plasma-mantine',
+        propsType: 'DateRangePickerInlineCalendarProps',
+    },
 ];
 
 export default components;
diff --git a/packages/mantine/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx b/packages/mantine/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx
@@ -63,23 +63,24 @@ export const DateRangePickerPopoverCalendar = ({
 
     return (
         <>
-            <Group align="center">
-                <EditableDateRangePicker
-                    value={_value}
-                    onChange={handleChange}
-                    onFocus={() => setOpened(true)}
-                    startProps={startProps}
-                    endProps={endProps}
-                />
-                {presets ? (
-                    <>
-                        <Space w="sm" />
-                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />
-                    </>
-                ) : null}
-            </Group>
-
             <Popover opened={opened} onChange={setOpened} trapFocus>
+                <Popover.Target>
+                    <Group align="center">
+                        <EditableDateRangePicker
+                            value={_value}
+                            onChange={handleChange}
+                            onFocus={() => setOpened(true)}
+                            startProps={startProps}
+                            endProps={endProps}
+                        />
+                        {presets ? (
+                            <>
+                                <Space w="sm" />
+                                <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />
+                            </>
+                        ) : null}
+                    </Group>
+                </Popover.Target>
                 <Popover.Dropdown>
                     <DatePicker
                         ref={ref}

diff --git a/packages/website/src/Navigation.tsx b/packages/website/src/Navigation.tsx
@@ -1,6 +1,7 @@
 import {AppShell, Image, NavLink, NavLinkProps, ScrollArea} from '@coveord/plasma-mantine';
 import {
     AnnouncementSize16Px,
+    CalendarSize16Px,
     ClickSize16Px,
     DiamondSize16Px,
     ExternalSize16Px,
@@ -65,6 +66,10 @@ export const Navigation = () => (
             <InternalNavLink to="/form/ChildForm" label="Child Form" />
             <InternalNavLink to="/form/InlineConfirm" label="Inline confirm" />
         </NavLink>
+        <NavLink label="Date range" leftSection={<CalendarSize16Px height={16} />} defaultOpened>
+            <InternalNavLink to="/date-range/DateRangePickerPopoverCalendar" label="Popover calendar" />
+            <InternalNavLink to="/date-range/DateRangePickerInlineCalendar" label="Inline calendar" />
+        </NavLink>
         <NavLink label="Feedback" leftSection={<AnnouncementSize16Px height={16} />} defaultOpened>
             <InternalNavLink to="/feedback/Alert" label="Alert" />
         </NavLink>

diff --git a/packages/website/src/building-blocs/PageHeader.tsx b/packages/website/src/building-blocs/PageHeader.tsx
@@ -8,7 +8,7 @@ export interface PageHeaderProps {
     title: string;
     thumbnail?: TileProps['thumbnail'];
     description?: ReactNode;
-    section: 'Foundations' | 'Layout' | 'Form' | 'Navigation' | 'Feedback' | 'Advanced' | 'Mantine';
+    section: 'Foundations' | 'Layout' | 'Form' | 'Date range' | 'Navigation' | 'Feedback' | 'Advanced' | 'Mantine';
     /**
      * Path to a relevant source file in the repo
      *

diff --git a/packages/website/src/examples/date-range/inline/DateRangePickerInlineCalendar.demo.tsx b/packages/website/src/examples/date-range/inline/DateRangePickerInlineCalendar.demo.tsx
@@ -0,0 +1,24 @@
+import {DateRangePickerInlineCalendar, DateRangePickerValue} from '@coveord/plasma-mantine';
+import dayjs from 'dayjs';
+import {useState} from 'react';
+
+const Demo = () => {
+    const [range, setRange] = useState<DateRangePickerValue>([null, null]);
+    const onCancel = () => console.log('Cancel');
+
+    return (
+        <DateRangePickerInlineCalendar
+            initialRange={range}
+            onApply={setRange}
+            onCancel={onCancel}
+            presets={{
+                year2k: {label: 'Year 2K', range: [new Date('2000/01/01'), new Date('2000/12/31')]},
+                currentMonth: {
+                    label: 'Month',
+                    range: [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()],
+                },
+            }}
+        />
+    );
+};
+export default Demo;
diff --git a/packages/website/src/examples/date-range/popover/DateRangePickerPopoverCalendar.demo.tsx b/packages/website/src/examples/date-range/popover/DateRangePickerPopoverCalendar.demo.tsx
@@ -0,0 +1,12 @@
+import {DateRangePickerPopoverCalendar} from '@coveord/plasma-mantine';
+import dayjs from 'dayjs';
+
+const Demo = () => (
+    <DateRangePickerPopoverCalendar
+        presets={{
+            year2k: {label: 'Year 2K', range: [new Date('2000/01/01'), new Date('2000/12/31')]},
+            currentMonth: {label: 'Month', range: [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()]},
+        }}
+    />
+);
+export default Demo;
diff --git a/packages/website/src/pages/date-range/DateRangePickerInlineCalendar.tsx b/packages/website/src/pages/date-range/DateRangePickerInlineCalendar.tsx
@@ -0,0 +1,17 @@
+import {DateRangePickerInlineCalendarMetadata} from '@coveord/plasma-components-props-analyzer';
+import DateRangePickerInlineDemo from '@examples/date-range/inline/DateRangePickerInlineCalendar.demo?demo';
+
+import {PageLayout} from '../../building-blocs/PageLayout';
+
+const Page = () => (
+    <PageLayout
+        section="Date range"
+        title="Date Range Picker Inline Calendar"
+        propsMetadata={DateRangePickerInlineCalendarMetadata}
+        description="."
+        id="DateRangePickerInlineCalendar"
+        demo={<DateRangePickerInlineDemo layout="vertical" center />}
+    />
+);
+
+export default Page;
diff --git a/packages/website/src/pages/date-range/DateRangePickerPopoverCalendar.tsx b/packages/website/src/pages/date-range/DateRangePickerPopoverCalendar.tsx
@@ -0,0 +1,17 @@
+import {DateRangePickerPopoverCalendarMetadata} from '@coveord/plasma-components-props-analyzer';
+import DateRangePickerDemo from '@examples/date-range/popover/DateRangePickerPopoverCalendar.demo?demo';
+
+import {PageLayout} from '../../building-blocs/PageLayout';
+
+const Page = () => (
+    <PageLayout
+        section="Date range"
+        title="Date Range Picker Popover Calendar"
+        propsMetadata={DateRangePickerPopoverCalendarMetadata}
+        description="."
+        id="DateRangePickerPopoverCalendar"
+        demo={<DateRangePickerDemo layout="vertical" center />}
+    />
+);
+
+export default Page;