fix(date-picker): resolve width clipping issue on 90/110% zoom (#3416)

* fix(date-picker): resolve width clipping issue on 90/110% zoom * fix(date-picker): resolve width clipping issue on 90/110% zoom * Delete .changeset/metal-bats-reflect.md * Update weak-dingos-chew.md * chore: add storybook --------- Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
nextui-org · Jul 6, 2024 · 5652e7b · 5652e7b
1 parent 93f1787
commit 5652e7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/.changeset/weak-dingos-chew.md b/.changeset/weak-dingos-chew.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/calendar": patch
+---
+
+Fixed calendar clipping issue on zoom (#2978)
diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
@@ -280,7 +280,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
     style: {
       // @ts-ignore
       "--visible-months": visibleMonths,
-      "--calendar-width": calendarWidth,
+      "--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth,
     } as React.CSSProperties,
   };
 

diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx
@@ -237,6 +237,26 @@ const PresetsTemplate = (args: CalendarProps) => {
   );
 };
 
+const CalendarWidthTemplate = (args: CalendarProps) => {
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col items-center gap-4">
+        <p>calendarWidth: 300</p>
+        <p className="text-small text-default-600">calendarWidth: 300</p>
+        <Calendar {...args} calendarWidth={300} />
+      </div>
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-small text-default-600">calendarWidth: 300px</p>
+        <Calendar {...args} calendarWidth="300px" />
+      </div>
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-small text-default-600">calendarWidth: 30em</p>
+        <Calendar {...args} calendarWidth="30em" />
+      </div>
+    </div>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -348,3 +368,10 @@ export const Presets = {
     ...defaultProps,
   },
 };
+
+export const CalendarWidth = {
+  render: CalendarWidthTemplate,
+  args: {
+    ...defaultProps,
+  },
+};