feat(ddatepicker): add view part

Author: segunadebayo

.changeset/puny-lies-take.md

@@ -0,0 +1,7 @@
+---
+"@zag-js/date-picker": patch
+"@zag-js/date-utils": patch
+---
+
+- Add support for `api.getViewProps`.
+- Add `visibleRangeText` property to `api.offset()` return value.

examples/next-ts/pages/compositions

@@ -1,17 +1,18 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
 export const anatomy = createAnatomy("date-picker").parts(
-  "root",
-  "label",
   "clearTrigger",
   "content",
   "control",
   "input",
+  "label",
   "monthSelect",
   "nextTrigger",
   "positioner",
+  "presetTrigger",
   "prevTrigger",
   "rangeText",
+  "root",
   "table",
   "tableBody",
   "tableCell",
@@ -20,10 +21,10 @@ export const anatomy = createAnatomy("date-picker").parts(
   "tableHeader",
   "tableRow",
   "trigger",
-  "viewTrigger",
+  "view",
   "viewControl",
+  "viewTrigger",
   "yearSelect",
-  "presetTrigger",
 )
 
 export const parts = anatomy.build()

packages/machines/date-picker/src/date-picker.anatomy.ts

@@ -12,10 +12,8 @@ import {
   getUnitDuration,
   getWeekDays,
   getYearsRange,
-  isDateDisabled,
   isDateEqual,
-  isDateInvalid,
-  isDateOutsideVisibleRange,
+  isDateOutsideRange,
   isDateUnavailable,
 } from "@zag-js/date-utils"
 import { ariaAttr, dataAttr, getEventKey, getNativeEvent, isComposingEvent } from "@zag-js/dom-query"
@@ -81,6 +79,7 @@ export function connect<T extends PropTypes>(
   })
 
   const separator = getLocaleSeparator(locale)
+  const translations = { ...defaultTranslations, ...prop("translations") }
 
   function getMonthWeeks(from = startValue) {
     const numOfWeeks = prop("fixedWeeks") ? 6 : undefined
@@ -136,7 +135,7 @@ export function connect<T extends PropTypes>(
     const formatter = getMonthFormatter(locale, timeZone)
     const cellState = {
       focused: focusedValue.month === props.value,
-      selectable: !isDateInvalid(normalized, min, max),
+      selectable: !isDateOutsideRange(normalized, min, max),
       selected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year),
       valueText: formatter.format(normalized.toDate(timeZone)),
       get disabled() {
@@ -146,8 +145,6 @@ export function connect<T extends PropTypes>(
     return cellState
   }
 
-  const translations = prop("translations") || defaultTranslations
-
   function getDayTableCellState(props: DayTableCellProps): DayTableCellState {
     const { value, disabled, visibleRange = computed("visibleRange") } = props
 
@@ -157,11 +154,11 @@ export function connect<T extends PropTypes>(
     const end = visibleRange.start.add(unitDuration).subtract({ days: 1 })
 
     const cellState = {
-      invalid: isDateInvalid(value, min, max),
-      disabled: disabled || isDateDisabled(value, visibleRange.start, end, min, max),
+      invalid: isDateOutsideRange(value, min, max),
+      disabled: disabled || isDateOutsideRange(value, visibleRange.start, end) || isDateOutsideRange(value, min, max),
       selected: selectedValue.some((date) => isDateEqual(value, date)),
       unavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled,
-      outsideRange: isDateOutsideVisibleRange(value, visibleRange.start, end),
+      outsideRange: isDateOutsideRange(value, visibleRange.start, end),
       inRange:
         isRangePicker && (isDateWithinRange(value, selectedValue) || isDateWithinRange(value, hoveredRangeValue)),
       firstInRange: isRangePicker && isDateEqual(value, selectedValue[0]),
@@ -199,9 +196,15 @@ export function connect<T extends PropTypes>(
     },
     getOffset(duration) {
       const from = startValue.add(duration)
+      const end = endValue.add(duration)
+      const formatter = getMonthFormatter(locale, timeZone)
       return {
-        visibleRange: { start: from, end: endValue.add(duration) },
+        visibleRange: { start: from, end },
         weeks: getMonthWeeks(from),
+        visibleRangeText: {
+          start: formatter.format(from.toDate(timeZone)),
+          end: formatter.format(end.toDate(timeZone)),
+        },
       }
     },
     getMonthWeeks,
@@ -641,6 +644,15 @@ export function connect<T extends PropTypes>(
       })
     },
 
+    getViewProps(props = {}) {
+      const { view = "day" } = props
+      return normalize.element({
+        ...parts.view.attrs,
+        "data-view": view,
+        hidden: context.get("view") !== view,
+      })
+    },
+
     getViewTriggerProps(props = {}) {
       const { view = "day" } = props
       return normalize.button({

packages/machines/date-picker/src/date-picker.connect.ts

@@ -13,9 +13,9 @@ import {
   getPreviousSection,
   getTodayDate,
   isDateEqual,
-  isDateOutsideVisibleRange,
-  isNextVisibleRangeInvalid,
-  isPreviousVisibleRangeInvalid,
+  isDateOutsideRange,
+  isNextRangeInvalid,
+  isPreviousRangeInvalid,
   parseDateString,
   type AdjustDateReturn,
 } from "@zag-js/date-utils"
@@ -189,9 +189,9 @@ export const machine = createMachine<DatePickerSchema>({
       return { start, end, formatted }
     },
     isPrevVisibleRangeValid: ({ context, prop }) =>
-      !isPreviousVisibleRangeInvalid(context.get("startValue"), prop("min"), prop("max")),
+      !isPreviousRangeInvalid(context.get("startValue"), prop("min"), prop("max")),
     isNextVisibleRangeValid: ({ prop, computed }) =>
-      !isNextVisibleRangeInvalid(computed("endValue"), prop("min"), prop("max")),
+      !isNextRangeInvalid(computed("endValue"), prop("min"), prop("max")),
     valueAsString({ context, prop }) {
       const value = context.get("value")
       return value.map((date) => prop("format")(date, { locale: prop("locale"), timeZone: prop("timeZone") }))
@@ -1085,7 +1085,7 @@ export const machine = createMachine<DatePickerSchema>({
       setStartValue({ context, computed, prop }) {
         const focusedValue = context.get("focusedValue")
 
-        const outside = isDateOutsideVisibleRange(focusedValue, context.get("startValue"), computed("endValue"))
+        const outside = isDateOutsideRange(focusedValue, context.get("startValue"), computed("endValue"))
         if (!outside) return
 
         const startValue = alignDate(focusedValue, "start", { months: prop("numOfMonths") }, prop("locale"))

packages/machines/date-picker/src/date-picker.machine.ts

@@ -372,6 +372,7 @@ export type VisibleRange = Range<DateValue>
 export interface DateValueOffset {
   visibleRange: VisibleRange
   weeks: DateValue[][]
+  visibleRangeText: { start: string; end: string }
 }
 
 export interface TableCellProps {
@@ -656,6 +657,8 @@ export interface DatePickerApi<T extends PropTypes = PropTypes> {
   getClearTriggerProps(): T["button"]
   getTriggerProps(): T["button"]
   getPresetTriggerProps(props: PresetTriggerProps): T["button"]
+
+  getViewProps(props?: ViewProps): T["element"]
   getViewTriggerProps(props?: ViewProps): T["button"]
   getViewControlProps(props?: ViewProps): T["element"]
   getInputProps(props?: InputProps): T["input"]

packages/machines/date-picker/src/date-picker.types.ts

@@ -5,54 +5,28 @@ export function isDateEqual(dateA: DateValue, dateB?: DateValue | null) {
   return dateB != null && isSameDay(dateA, dateB)
 }
 
-export function isDateInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) {
-  return (minValue != null && date.compare(minValue) < 0) || (maxValue != null && date.compare(maxValue) > 0)
-}
-
-export function isDateDisabled(
-  date: DateValue,
-  startDate: DateValue,
-  endDate: DateValue,
-  minValue?: DateValue | null,
-  maxValue?: DateValue | null,
-) {
-  return isDateOutsideVisibleRange(date, startDate, endDate) || isDateInvalid(date, minValue, maxValue)
-}
-
 export function isDateUnavailable(
   date: DateValue | null,
   isUnavailable: DateAvailableFn | undefined,
   locale: string,
   minValue?: DateValue | null,
   maxValue?: DateValue | null,
 ) {
-  if (!date) {
-    return false
-  }
-  if (isUnavailable?.(date, locale)) {
-    return true
-  }
-  return isDateInvalid(date, minValue, maxValue)
+  if (!date) return false
+  if (isUnavailable?.(date, locale)) return true
+  return isDateOutsideRange(date, minValue, maxValue)
 }
 
-export function isDateOutsideVisibleRange(date: DateValue, startDate: DateValue, endDate: DateValue) {
-  return date.compare(startDate) < 0 || date.compare(endDate) > 0
+export function isDateOutsideRange(date: DateValue, startDate?: DateValue | null, endDate?: DateValue | null) {
+  return (startDate != null && date.compare(startDate) < 0) || (endDate != null && date.compare(endDate) > 0)
 }
 
-export function isPreviousVisibleRangeInvalid(
-  startDate: DateValue,
-  minValue?: DateValue | null,
-  maxValue?: DateValue | null,
-) {
+export function isPreviousRangeInvalid(startDate: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) {
   const prevDate = startDate.subtract({ days: 1 })
-  return isSameDay(prevDate, startDate) || isDateInvalid(prevDate, minValue, maxValue)
+  return isSameDay(prevDate, startDate) || isDateOutsideRange(prevDate, minValue, maxValue)
 }
 
-export function isNextVisibleRangeInvalid(
-  endDate: DateValue,
-  minValue?: DateValue | null,
-  maxValue?: DateValue | null,
-) {
+export function isNextRangeInvalid(endDate: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) {
   const nextDate = endDate.add({ days: 1 })
-  return isSameDay(nextDate, endDate) || isDateInvalid(nextDate, minValue, maxValue)
+  return isSameDay(nextDate, endDate) || isDateOutsideRange(nextDate, minValue, maxValue)
 }

packages/utilities/date-utils/src/assertion.ts

@@ -6,7 +6,7 @@ import {
   startOfMonth,
   startOfWeek,
 } from "@internationalized/date"
-import { isDateInvalid } from "./assertion"
+import { isDateOutsideRange } from "./assertion"
 import { alignEnd, alignStart, constrainStart, constrainValue } from "./constrain"
 import { getEndDate, getUnitDuration } from "./duration"
 
@@ -30,7 +30,7 @@ export function getAdjustedDateFn(
     const endDate = getEndDate(startDate, visibleDuration)
 
     // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
-    if (isDateInvalid(focusedDate, minValue, maxValue)) {
+    if (isDateOutsideRange(focusedDate, minValue, maxValue)) {
       return {
         startDate,
         focusedDate: constrainValue(focusedDate, minValue, maxValue),

packages/utilities/date-utils/src/pagination.ts

@@ -1,11 +1,6 @@
 import { parseDate } from "@internationalized/date"
 import { describe, expect, test } from "vitest"
-import { getEndDate, isDateDisabled, isDateEqual } from "../src"
-
-const duration = { months: 1 }
-
-const min = parseDate("2023-01-01")
-const max = parseDate("2023-12-31")
+import { isDateEqual } from "../src"
 
 describe("Date utilities / Assertion", () => {
   test("isEqual / truthy", () => {
@@ -24,22 +19,4 @@ describe("Date utilities / Assertion", () => {
     const dateA = parseDate("2024-04-15")
     expect(isDateEqual(dateA, null)).toBe(false)
   })
-
-  test("isDisabled / truthy", () => {
-    const date = parseDate("2024-04-15")
-
-    const startDate = parseDate("2024-04-01")
-    const endDate = getEndDate(startDate, duration)
-
-    expect(isDateDisabled(date, startDate, endDate, min, max)).toBe(true)
-  })
-
-  test("isDisabled / falsy", () => {
-    const date = parseDate("2023-04-15")
-
-    const startDate = parseDate("2023-04-01")
-    const endDate = getEndDate(startDate, duration)
-
-    expect(isDateDisabled(date, startDate, endDate, min, max)).toBe(false)
-  })
 })

packages/utilities/date-utils/tests/assertion.test.ts

@@ -76,3 +76,7 @@
   align-items: center;
   margin-block: 10px;
 }
+
+[data-scope="date-picker"][data-part="view"] {
+  width: 100%;
+}