@ponti-studios/ui 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/forms/calendar.tsx

@@ -16,7 +16,12 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         months: "flex flex-col gap-4 sm:flex-row",
         month: "flex flex-col gap-4",
         month_caption: "relative flex h-8 items-center justify-center",
-        caption_label: "text-sm font-medium",
+        caption_label: "flex items-center gap-1 text-sm font-medium",
+        dropdowns: "flex items-center gap-1",
+        dropdown_root: "relative",
+        dropdown: "absolute inset-0 z-10 cursor-pointer opacity-0",
+        months_dropdown: "",
+        years_dropdown: "",
         nav: "absolute inset-x-4 top-4 z-10 flex items-center justify-between",
         button_previous:
           "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",

package/src/components/forms/date-field.stories.tsx

@@ -102,6 +102,44 @@ export const Disabled: Story = {
   },
 };
 
+// No play function — this one is for manually driving the interaction
+// (e.g. screen recordings), not automated assertions.
+export const DropdownEmpty: Story = {
+  args: {
+    name: "startDate",
+    label: "Start date",
+    captionLayout: "dropdown",
+  },
+};
+
+export const WithDropdownCaption: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    defaultValue: { from: "2018-03-01" },
+    label: "Employment period",
+    captionLayout: "dropdown",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Jumping back to a date years ago is a month/year select, not repeated
+    // prev-month clicks.
+    const trigger = canvas.getByRole("button", { name: "Employment period" });
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+
+    const yearSelect = within(dialog).getByRole("combobox", { name: /year/i });
+    await userEvent.selectOptions(yearSelect, "2009");
+    const monthSelect = within(dialog).getByRole("combobox", { name: /month/i });
+    await userEvent.selectOptions(monthSelect, "May");
+
+    await userEvent.click(within(dialog).getByText("12"));
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2009-05-12");
+  },
+};
+
 export const WithRangeDefaultValue: Story = {
   args: {
     mode: "range",

package/src/components/forms/date-field.tsx

@@ -23,6 +23,7 @@ interface DateFieldCommonProps {
   containerClassName?: string;
   popoverAlign?: DatePickerProps["popoverAlign"];
   variant?: DatePickerProps["variant"];
+  captionLayout?: DatePickerProps["captionLayout"];
 }
 
 export interface SingleDateFieldProps extends DateFieldCommonProps {
@@ -55,6 +56,7 @@ function SingleDateField({
   containerClassName,
   popoverAlign,
   variant,
+  captionLayout,
 }: SingleDateFieldProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
@@ -72,6 +74,7 @@ function SingleDateField({
         containerClassName={containerClassName}
         popoverAlign={popoverAlign}
         variant={variant}
+        captionLayout={captionLayout}
         value={value}
         onSelect={setValue}
       />
@@ -93,6 +96,7 @@ function RangeDateField({
   containerClassName = "flex-1 min-w-0",
   popoverAlign = "start",
   variant = "outline",
+  captionLayout = "label",
 }: RangeDateFieldProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
@@ -140,6 +144,7 @@ function RangeDateField({
             defaultMonth={range.from ?? range.to}
             resetOnSelect
             onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
+            captionLayout={captionLayout}
           />
         </PopoverContent>
       </Popover>

package/src/components/forms/date-picker.tsx

@@ -17,6 +17,12 @@ export interface DatePickerProps {
   containerClassName?: string;
   popoverAlign?: "start" | "center" | "end";
   variant?: "outline" | "default" | "destructive" | "secondary" | "ghost" | "link";
+  /**
+   * Calendar caption style. `"dropdown"` swaps the month/year label for
+   * select dropdowns, which is much faster for picking dates years in the
+   * past (e.g. a job start date) than clicking prev/next repeatedly.
+   */
+  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
 }
 
 export function DatePicker({
@@ -31,6 +37,7 @@ export function DatePicker({
   containerClassName = "flex-1 min-w-0",
   popoverAlign = "start",
   variant = "outline",
+  captionLayout = "label",
 }: DatePickerProps) {
   return (
     <div className={containerClassName}>
@@ -60,7 +67,13 @@ export function DatePicker({
           align={popoverAlign}
           aria-label={label ?? "Choose a date"}
         >
-          <Calendar mode="single" selected={value} defaultMonth={value} onSelect={onSelect} />
+          <Calendar
+            mode="single"
+            selected={value}
+            defaultMonth={value}
+            onSelect={onSelect}
+            captionLayout={captionLayout}
+          />
         </PopoverContent>
       </Popover>
     </div>