feat: added new portal prop to date-input and date-range-input compon…

…ents
saas-js · Sep 17, 2023 · ec2bf22 · ec2bf22
1 parent db24523
commit ec2bf22
Show file tree

Hide file tree

Showing 8 changed files with 450 additions and 65 deletions.
diff --git a/.changeset/old-penguins-judge.md b/.changeset/old-penguins-judge.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/date-picker': minor
+'website': minor
+---
+
+Added new portal prop to DateInput and DateRangePicker components to conditionally open the dialog in a portal.
diff --git a/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx b/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx
@@ -111,6 +111,8 @@ const reactIcons = {
 import { KanbanItems } from '@saas-ui-pro/kanban'
 import * as SaasUIKanban from '@saas-ui-pro/kanban'
 
+import { now, getLocalTimeZone } from '@internationalized/date'
+
 const StarIcon = (props) => (
   <chakra.svg m="2px" fill="current" boxSize="3" viewBox="0 0 24 24" {...props}>
     <path d="M23.555 8.729a1.505 1.505 0 0 0-1.406-.98h-6.087a.5.5 0 0 1-.472-.334l-2.185-6.193a1.5 1.5 0 0 0-2.81 0l-.005.016-2.18 6.177a.5.5 0 0 1-.471.334H1.85A1.5 1.5 0 0 0 .887 10.4l5.184 4.3a.5.5 0 0 1 .155.543l-2.178 6.531a1.5 1.5 0 0 0 2.31 1.684l5.346-3.92a.5.5 0 0 1 .591 0l5.344 3.919a1.5 1.5 0 0 0 2.312-1.683l-2.178-6.535a.5.5 0 0 1 .155-.543l5.194-4.306a1.5 1.5 0 0 0 .433-1.661z" />
@@ -190,6 +192,7 @@ const ReactLiveScope = {
     'react-icons/fi': reactIcons,
     '@hookform/resolvers/yup': { yupResolver },
     '@hookform/resolvers/zod': { zodResolver },
+    '@internationalized/date': { now, getLocalTimeZone },
     zod: z,
     yup: yup,
   },

diff --git a/apps/website/src/pages/docs/components/date-time/date-input/usage.mdx b/apps/website/src/pages/docs/components/date-time/date-input/usage.mdx
@@ -12,17 +12,33 @@ description: Allow users to enter or select a Date and Time value.
 />
 
 <Info>
-  The DateInput is currently in beta, we'd love to hear your feedback while we
+  The DatePicker is currently in beta, we'd love to hear your feedback while we
   finalize the API.
 </Info>
 
 ## Import
 
-- `DateInput`: A date form input.
-- `DateTimeInput`: A date time form input.
+- `DatePicker`: The container component that manages state and context.
+- `DatePickerInput`: A date form input.
+- `DatePickerDialog`: A dialog that contains a calendar and time picker.
+- `DatePickerCalendar`: A calendar that allows users to select a date.
+- `DatePickerTimeField`: A time picker that allows users to select a time.
+
+#
+
+- `DateInput`: A composite component that contains a date form input and a
+  calendar dialog.
+- `DateTimeInput`: A composite component that contains a date form input and a
+  calendar and time picker dialog.
 
 ```ts
-import { DateInput, DateTimeInput } from '@saas-ui/date-picker'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+  DatePickerTimeField,
+} from '@saas-ui/date-picker'
 ```
 
 ## Usage
@@ -38,65 +54,292 @@ import { DateInput, DateTimeInput } from '@saas-ui/date-picker'
 ### Basic
 
 ```jsx center=true
-<FormControl>
-  <FormLabel>Date</FormLabel>
-  <DateInput />
-</FormControl>
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import { DateInput } from '@saas-ui/date-picker'
+
+export default function Basic() {
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DateInput />
+    </FormControl>
+  )
+}
 ```
 
-### DateTime
+### Basic with time
 
 ```jsx center=true
-<FormControl>
-  <FormLabel>Date and time</FormLabel>
-  <DateTimeInput />
-</FormControl>
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import { DateTimeInput } from '@saas-ui/date-picker'
+
+export default function BasicWithTime() {
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DateTimeInput />
+    </FormControl>
+  )
+}
 ```
 
-### With 24 hour time
+### Composed
+
+Composing the `DatePicker` components gives you more control over the layout and
+props of the child components.
 
 ```jsx center=true
-<FormControl>
-  <FormLabel>Date and time</FormLabel>
-  <DateTimeInput hourCycle="24" />
-</FormControl>
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+} from '@saas-ui/date-picker'
+
+export default function Composed() {
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DatePicker placement="bottom-end" granularity="day">
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
+  )
+}
+```
+
+### Custom calendar icon
+
+```jsx center=true
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+} from '@saas-ui/date-picker'
+import { CalendarIcon } from '@chakra-ui/icons'
+
+export default function CustomCalendarIcon() {
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DatePicker placement="bottom-end" granularity="day">
+        <DatePickerInput calendarIcon={<CalendarIcon />} />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
+  )
+}
+```
+
+### Using Portal
+
+When the `DatePicker` is rendered inside an overflow container, you can use the
+`Portal` to render the dialog in a portal outside of the overflow
+container.
+
+```jsx center=true
+import { FormControl, FormLabel, Portal } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+} from '@saas-ui/date-picker'
+import { CalendarIcon } from '@chakra-ui/icons'
+
+export default function UsingPortal() {
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DatePicker placement="bottom-end" granularity="day">
+        <DatePickerInput calendarIcon={<CalendarIcon />} />
+        <Portal>
+          <DatePickerDialog>
+            <DatePickerCalendar />
+          </DatePickerDialog>
+        </Portal>
+      </DatePicker>
+    </FormControl>
+  )
+}
+```
+
+### DateTime
+
+Changing the granularity to `minute` and adding a `DatePickerTimeField` will
+allow users to select a time as well.
+
+```jsx center=true
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+  DatePickerTimeField,
+} from '@saas-ui/date-picker'
+
+export default function DateTime() {
+  return (
+    <FormControl>
+      <FormLabel>Date and time</FormLabel>
+      <DatePicker placement="bottom-end" granularity="minute">
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+          <DatePickerTimeField />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
+  )
+}
 ```
 
 ### Controlled
 
 ```jsx center=true
-function ControlledPicker() {
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+} from '@saas-ui/date-picker'
+
+export default function ControlledPicker() {
   const [value, setValue] = React.useState(today(getLocalTimeZone()))
 
-  return <DateInput value={value} onChange={setValue} />
+  return (
+    <FormControl>
+      <FormLabel>Date</FormLabel>
+      <DatePicker
+        placement="bottom-end"
+        granularity="day"
+        value={value}
+        onChange={setValue}
+      >
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
+  )
+}
+```
+
+### With 24 hour time
+
+To use 24 hour time, set the `hourCycle` prop to `24`.
+
+```jsx center=true
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+  DatePickerTimeField,
+} from '@saas-ui/date-picker'
+
+export default function HourCycle() {
+  return (
+    <FormControl>
+      <FormLabel>Date and time</FormLabel>
+      <DatePicker placement="bottom-end" granularity="minute" hourCycle="24">
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+          <DatePickerTimeField />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
+  )
 }
 ```
 
 ### Time zone
 
+When using a local date, the `DatePicker` will show the time zone of the user's
+browser.
+
 ```jsx center=true
-function ControlledPicker() {
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+  DatePickerTimeField,
+} from '@saas-ui/date-picker'
+import { now, getLocalTimeZone } from '@internationalized/date'
+
+export default function TimeZone() {
   const [value, setValue] = React.useState(now(getLocalTimeZone()))
 
   return (
-    <DateTimeInput value={value} onChange={setValue} granularity="minute" />
+    <FormControl>
+      <FormLabel>Date and time</FormLabel>
+      <DatePicker
+        placement="bottom-end"
+        granularity="minute"
+        value={value}
+        onChange={setValue}
+      >
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+          <DatePickerTimeField />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
   )
 }
 ```
 
 ### Hide time zone
 
+To hide the time zone, add the `hideTimeZone` prop.
+
 ```jsx center=true
-function ControlledPicker() {
+import { FormControl, FormLabel } from '@chakra-ui/react'
+import {
+  DatePicker,
+  DatePickerInput,
+  DatePickerDialog,
+  DatePickerCalendar,
+  DatePickerTimeField,
+} from '@saas-ui/date-picker'
+import { now, getLocalTimeZone } from '@internationalized/date'
+
+export default function HideTimeZone() {
   const [value, setValue] = React.useState(now(getLocalTimeZone()))
 
   return (
-    <DateTimeInput
-      value={value}
-      onChange={setValue}
-      granularity="minute"
-      hideTimeZone
-    />
+    <FormControl>
+      <FormLabel>Date and time</FormLabel>
+      <DatePicker
+        placement="bottom-end"
+        granularity="minute"
+        value={value}
+        onChange={setValue}
+        hideTimeZone
+      >
+        <DatePickerInput />
+        <DatePickerDialog>
+          <DatePickerCalendar />
+          <DatePickerTimeField />
+        </DatePickerDialog>
+      </DatePicker>
+    </FormControl>
   )
 }
 ```