@arbor-education/design-system.components 0.25.8 → 1.0.0

package/src/components/datePicker/DatePickerCalendar.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { DayPicker } from 'react-day-picker';
+
+export type DatePickerCalendarProps = {
+  month: Date;
+  setMonth: (month: Date) => void;
+  selectedDate: Date | undefined;
+  onDayPickerSelect: (date?: Date) => void;
+  handleTodayClick: () => void;
+  className?: string;
+};
+
+export const DatePickerCalendar = (props: DatePickerCalendarProps) => {
+  const {
+    month,
+    setMonth,
+    selectedDate,
+    onDayPickerSelect,
+    handleTodayClick,
+    className,
+  } = props;
+  return (
+    <DayPicker
+      fixedWeeks
+      className={classNames('ds-date-picker__calendar', className)}
+      month={month}
+      onMonthChange={setMonth}
+      autoFocus
+      role="application"
+      mode="single"
+      selected={selectedDate}
+      onSelect={onDayPickerSelect}
+      hideNavigation
+      footer={(
+        <Button
+          variant="text-link"
+          onClick={handleTodayClick}
+          className="ds-date-picker__today-button"
+        >
+          Today
+        </Button>
+      )}
+    />
+  );
+};

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -13,12 +13,24 @@ import {
   type DateDisplayFormat,
   type DateTimePickerDisplayFormat,
 } from 'Components/datePicker/dateInputUtils';
+import { DatePickerCalendar } from 'Components/datePicker/DatePickerCalendar';
 import { DatePickerCalendarHeader } from 'Components/datePicker/DatePickerCalendarHeader';
 import { TextInput } from 'Components/formField/inputs/text/TextInput';
-import { TimeInput, type TimeGranularity, type TimeValue } from 'Components/formField/inputs/time/TimeInput';
+import {
+  TimeInput,
+  type TimeGranularity,
+  type TimeValue,
+} from 'Components/formField/inputs/time/TimeInput';
 import { Popover } from 'radix-ui';
-import { useCallback, useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
-import { DayPicker } from 'react-day-picker';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type PointerEvent,
+} from 'react';
 import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 export type DateTimePickerProps = {
@@ -62,7 +74,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     (date: Date) =>
       displayFormat === 'native'
         ? formatNativeDateTimeInputValue(date, granularity)
-        : formatDateTimeInputValue(date, displayFormat as DateDisplayFormat, granularity),
+        : formatDateTimeInputValue(
+            date,
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ),
     [displayFormat, granularity],
   );
 
@@ -70,31 +86,43 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     (raw: string) =>
       displayFormat === 'native'
         ? parseNativeDateTimeInputValue(raw, granularity)
-        : parseDateTimeInputValue(raw, displayFormat as DateDisplayFormat, granularity),
+        : parseDateTimeInputValue(
+            raw,
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ),
     [displayFormat, granularity],
   );
 
-  const resolvedPlaceholder = placeholder ?? (
-    isNative
-      ? getNativeDateTimePlaceholder(granularity)
-      : getDateTimePlaceholder(displayFormat as DateDisplayFormat, granularity)
-  );
+  const resolvedPlaceholder
+    = placeholder
+      ?? (isNative
+        ? getNativeDateTimePlaceholder(granularity)
+        : getDateTimePlaceholder(
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ));
 
   const initialValue = value ?? defaultValue;
   const isControlled = value !== undefined;
   const [month, setMonth] = useState(initialValue ?? new Date());
-  const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(initialValue);
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(
+    initialValue,
+  );
   const [inputValue, setInputValue] = useState(
     initialValue ? formatInputValue(initialValue) : '',
   );
-  const [timeInputValue, setTimeInputValue] = useState(initialValue ? formatTimeInputValue(initialValue, granularity) : '');
+  const [timeInputValue, setTimeInputValue] = useState(
+    initialValue ? formatTimeInputValue(initialValue, granularity) : '',
+  );
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const selectedDateTimeRef = useRef(selectedDateTime);
   selectedDateTimeRef.current = selectedDateTime;
 
-  const showFieldHint = isNative && selectedDateTime === undefined && inputValue === '';
+  const showFieldHint
+    = isNative && selectedDateTime === undefined && inputValue === '';
   const hasCustomEmptyHint = showFieldHint && placeholder !== undefined;
 
   /** Custom empty hint in native mode: open only on pointer (not Tab focus). */
@@ -163,7 +191,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       return;
     }
 
-    const nextDateTime = mergeDateAndTime(selectedDateTime, nextTimeValue, granularity);
+    const nextDateTime = mergeDateAndTime(
+      selectedDateTime,
+      nextTimeValue,
+      granularity,
+    );
     setSelectedDateTime(nextDateTime);
     setInputValue(formatInputValue(nextDateTime));
     onChange?.(nextDateTime);
@@ -178,7 +210,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       return;
     }
 
-    const nextDateTime = mergeDateAndTime(nextDate, timeInputValue, granularity);
+    const nextDateTime = mergeDateAndTime(
+      nextDate,
+      timeInputValue,
+      granularity,
+    );
     setSelectedDateTime(nextDateTime);
     setMonth(nextDateTime);
     setInputValue(formatInputValue(nextDateTime));
@@ -204,10 +240,9 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
   return (
     <div className={classNames('ds-date-time-picker', className)}>
       <div
-        className={classNames(
-          'ds-date-time-picker__field',
-          { 'ds-date-time-picker__field--show-hint': showFieldHint },
-        )}
+        className={classNames('ds-date-time-picker__field', {
+          'ds-date-time-picker__field--show-hint': showFieldHint,
+        })}
       >
         <TextInput
           ref={inputRef}
@@ -232,7 +267,10 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
             )
           : null}
       </div>
-      <Popover.Root open={isPickerOpen} onOpenChange={open => setIsPickerOpen(open)}>
+      <Popover.Root
+        open={isPickerOpen}
+        onOpenChange={open => setIsPickerOpen(open)}
+      >
         <Popover.Trigger asChild>
           <Button
             className="ds-date-time-picker__button"
@@ -263,26 +301,16 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
                 highlightStringMatches={highlightStringMatches}
                 hasError={hasError}
               />
-              <DatePickerCalendarHeader month={month} onMonthChange={setMonth} />
-              <DayPicker
-                className="ds-date-time-picker__calendar"
+              <DatePickerCalendarHeader
                 month={month}
                 onMonthChange={setMonth}
-                autoFocus
-                role="application"
-                mode="single"
-                selected={selectedDateTime}
-                onSelect={handleDayPickerSelect}
-                hideNavigation
-                footer={(
-                  <Button
-                    variant="text-link"
-                    onClick={handleTodayClick}
-                    className="ds-date-time-picker__today-button"
-                  >
-                    Today
-                  </Button>
-                )}
+              />
+              <DatePickerCalendar
+                month={month}
+                setMonth={setMonth}
+                selectedDate={selectedDateTime}
+                onDayPickerSelect={handleDayPickerSelect}
+                handleTodayClick={handleTodayClick}
               />
             </div>
           </Popover.Content>

package/src/components/dateTimePicker/dateTimePicker.scss

@@ -13,5 +13,3 @@
 .ds-date-time-picker__time {
   width: 100%;
 }
-
-@include shell.ds-date-picker-shell-calendar("date-time-picker");