fix: Drawer and DatePicker (#106)

* fix: drawer z index * fix: date picker
tremorlabs · Jan 1, 2025 · 9b906e0 · 9b906e0
1 parent b29a84d
commit 9b906e0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-// Tremor Date Picker [v1.0.4]
+// Tremor Date Picker [v1.0.5]
 
 "use client"
 
@@ -56,7 +56,7 @@ const TimeSegment = ({ segment, state }: TimeSegmentProps) => {
   const { segmentProps } = useDateSegment(segment, state, ref)
 
   const isColon = segment.type === "literal" && segment.text === ":"
-  const isSpace = segment.type === "literal" && segment.text === " "
+  const isSpace = segment.type === "literal" && segment.text === " "
 
   const isDecorator = isColon || isSpace
 
@@ -99,7 +99,7 @@ const TimeSegment = ({ segment, state }: TimeSegmentProps) => {
       >
         {segment.placeholder}
       </span>
-      {segment.isPlaceholder ? "" : segment.text}
+      {segment.isPlaceholder ? " " : segment.text}
     </div>
   )
 }
@@ -500,7 +500,7 @@ const SingleDatePicker = ({
   )
   const [month, setMonth] = React.useState<Date | undefined>(date)
 
-  const [time, setTime] = React.useState<TimeValue>(
+  const [time, setTime] = React.useState<TimeValue | null>(
     value
       ? new Time(value.getHours(), value.getMinutes())
       : defaultValue
@@ -562,7 +562,7 @@ const SingleDatePicker = ({
     setDate(newDate)
   }
 
-  const onTimeChange = (time: TimeValue) => {
+  const onTimeChange = (time: TimeValue | null) => {
     setTime(time)
 
     if (!date) {
@@ -729,14 +729,14 @@ const RangeDatePicker = ({
   )
   const [month, setMonth] = React.useState<Date | undefined>(range?.from)
 
-  const [startTime, setStartTime] = React.useState<TimeValue>(
+  const [startTime, setStartTime] = React.useState<TimeValue | null>(
     value?.from
       ? new Time(value.from.getHours(), value.from.getMinutes())
       : defaultValue?.from
         ? new Time(defaultValue.from.getHours(), defaultValue.from.getMinutes())
         : new Time(0, 0),
   )
-  const [endTime, setEndTime] = React.useState<TimeValue>(
+  const [endTime, setEndTime] = React.useState<TimeValue | null>(
     value?.to
       ? new Time(value.to.getHours(), value.to.getMinutes())
       : defaultValue?.to
@@ -814,7 +814,7 @@ const RangeDatePicker = ({
     setOpen(open)
   }
 
-  const onTimeChange = (time: TimeValue, pos: "start" | "end") => {
+  const onTimeChange = (time: TimeValue | null, pos: "start" | "end") => {
     switch (pos) {
       case "start":
         setStartTime(time)

diff --git a/src/components/DatePicker/changelog.md b/src/components/DatePicker/changelog.md
@@ -1,5 +1,12 @@
 # Tremor Date Picker Changelog
 
+## 1.0.5
+
+### Changes
+
+- Fix: State types
+- Fix: TimeInput visibility
+
 ## 1.0.4
 
 ### Changes

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-// Tremor Drawer [v0.0.1]
+// Tremor Drawer [v0.0.2]
 
 import * as React from "react"
 import * as DrawerPrimitives from "@radix-ui/react-dialog"
@@ -77,7 +77,7 @@ const DrawerContent = React.forwardRef<
           ref={forwardedRef}
           className={cx(
             // base
-            "fixed inset-y-2 mx-auto flex w-[95vw] flex-1 flex-col overflow-y-auto rounded-md border p-4 shadow-lg focus:outline-none max-sm:inset-x-2 sm:inset-y-2 sm:right-2 sm:max-w-lg sm:p-6",
+            "fixed inset-y-2 z-50 mx-auto flex w-[95vw] flex-1 flex-col overflow-y-auto rounded-md border p-4 shadow-lg focus:outline-none max-sm:inset-x-2 sm:inset-y-2 sm:right-2 sm:max-w-lg sm:p-6",
             // border color
             "border-gray-200 dark:border-gray-900",
             // background color

diff --git a/src/components/Drawer/changelog.md b/src/components/Drawer/changelog.md
@@ -4,4 +4,10 @@
 
 ### Changes
 
+- Fix: `z-index` content
+
+## 0.0.1
+
+### Changes
+
 - Chore: Add `tremor-id`