Add travel calendar text input placeholder when not in focus

packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx

@@ -168,3 +168,18 @@ export const ParseDate = () => {
     </div>
   );
 };
+
+export const WithBlurPlaceholders = () => {
+  const [value, setValue] = useState<string>("");
+
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        placeholderWhenBlurred={"Gimme date"}
+      />
+    </div>
+  );
+};

packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx

@@ -25,6 +25,7 @@ export interface TravelDateCalendarProps
   dateTestId?: (date: Date) => string | undefined;
   previousMonthButtonTestId?: string;
   nextMonthButtonTestId?: string;
+  placeholderWhenBlurred?: string;
 }
 
 export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
@@ -35,6 +36,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
   initialMonthInFocus,
   previousMonthButtonAriaLabel = "Previous month",
   nextMonthButtonAriaLabel = "Next month",
+  placeholderWhenBlurred,
   heading,
   headingLevel,
   numMonthsInMonthPicker = 12,
@@ -74,6 +76,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
         localeCode={localeCode}
         label={label}
         calendarSize={size}
+        placeholderWhenBlurred={placeholderWhenBlurred}
       />
 
       <MonthHeader

packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx

@@ -186,3 +186,21 @@ export const ParseDate = () => {
     </div>
   );
 };
+
+export const WithBlurPlaceholders = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateRangeCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        placeholderWhenBlurredStartDate={"Gimme start"}
+        placeholderWhenBlurredEndDate={"Gimme end"}
+      />
+    </div>
+  );
+};

packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx

@@ -27,6 +27,8 @@ export interface TravelDateRangeCalendarProps
   dateTestId?: (date: Date) => string | undefined;
   previousMonthButtonTestId?: string;
   nextMonthButtonTestId?: string;
+  placeholderWhenBlurredStartDate?: string;
+  placeholderWhenBlurredEndDate?: string;
 }
 
 export const TravelDateRangeCalendar: React.FC<
@@ -48,6 +50,8 @@ export const TravelDateRangeCalendar: React.FC<
   dateTestId,
   previousMonthButtonTestId,
   nextMonthButtonTestId,
+  placeholderWhenBlurredStartDate,
+  placeholderWhenBlurredEndDate,
 }) => {
   const inputProps = useTravelDateRangeInput(
     value,
@@ -79,6 +83,8 @@ export const TravelDateRangeCalendar: React.FC<
         startDateLabel={startDateLabel}
         endDateLabel={endDateLabel}
         calendarSize={size}
+        placeholderWhenBlurredStartDate={placeholderWhenBlurredStartDate}
+        placeholderWhenBlurredEndDate={placeholderWhenBlurredEndDate}
       />
 
       <MonthHeader

packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.stories.tsx

@@ -237,3 +237,18 @@ export const WithPresets = () => {
     </div>
   );
 };
+
+export const WithBlurPlaceholders = () => {
+  const [value, setValue] = useState<string>("");
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        placeholderWhenBlurred={"Gimme date"}
+      />
+    </div>
+  );
+};

packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx

@@ -49,6 +49,7 @@ export interface TravelDateInputProps
   dateTestId?: (date: Date) => string | undefined;
   previousMonthButtonTestId?: string;
   nextMonthButtonTestId?: string;
+  placeholderWhenBlurred?: string;
 }
 
 export const TravelDateInput: React.FC<TravelDateInputProps> = ({
@@ -59,6 +60,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
   initialMonthInFocus,
   previousMonthButtonAriaLabel = "Previous month",
   nextMonthButtonAriaLabel = "Next month",
+  placeholderWhenBlurred,
   heading,
   headingLevel,
   numMonthsInMonthPicker = 12,
@@ -170,6 +172,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
           label={label}
           onFocus={showCalendar}
           calendarSize={size}
+          placeholderWhenBlurred={placeholderWhenBlurred}
         />
       </Box>
 

packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx

@@ -260,3 +260,21 @@ export const WithPresets = () => {
     </div>
   );
 };
+
+export const WithBlurPlaceholders = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateRangeInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        placeholderWhenBlurredStartDate={"Gimme start"}
+        placeholderWhenBlurredEndDate={"Gimme end"}
+      />
+    </div>
+  );
+};

packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx

@@ -51,6 +51,8 @@ export interface TravelDateRangeInputProps
   dateTestId?: (date: Date) => string | undefined;
   previousMonthButtonTestId?: string;
   nextMonthButtonTestId?: string;
+  placeholderWhenBlurredStartDate?: string;
+  placeholderWhenBlurredEndDate?: string;
 }
 
 export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
@@ -62,6 +64,8 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
   initialMonthInFocus,
   previousMonthButtonAriaLabel = "Previous month",
   nextMonthButtonAriaLabel = "Next month",
+  placeholderWhenBlurredStartDate,
+  placeholderWhenBlurredEndDate,
   heading,
   headingLevel,
   numMonthsInMonthPicker = 12,
@@ -173,6 +177,8 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
           endDateLabel={endDateLabel}
           onFocus={showCalendar}
           calendarSize={size}
+          placeholderWhenBlurredStartDate={placeholderWhenBlurredStartDate}
+          placeholderWhenBlurredEndDate={placeholderWhenBlurredEndDate}
         />
       </Box>
 

packages/calendar/src/features/travel-calendar/components/TravelDateSingleTextInputField.tsx

@@ -14,6 +14,7 @@ export interface TravelDateSingleTextInputFieldProps {
   label?: string;
   onFocus?: () => void;
   calendarSize: TravelCalendarSizeVariant;
+  placeholderWhenBlurred: string | undefined;
 }
 
 export const TravelDateSingleTextInputField: React.FC<
@@ -25,6 +26,7 @@ export const TravelDateSingleTextInputField: React.FC<
   localeCode,
   onFocus,
   calendarSize,
+  placeholderWhenBlurred,
 }) => {
   const { mask, placeholder } = useMemo(() => {
     const dateFormatForLocaleCode = getDateFormatForLocaleCode(localeCode);
@@ -50,6 +52,7 @@ export const TravelDateSingleTextInputField: React.FC<
         label={label}
         placeholder={placeholder}
         calendarSize={calendarSize}
+        placeholderWhenBlurred={placeholderWhenBlurred}
       />
     </Row>
   );

packages/calendar/src/features/travel-calendar/components/TravelDateTextInput.tsx

@@ -3,7 +3,7 @@ import {
   LabelledTextInput,
   LabelledTextInputProps,
 } from "@stenajs-webui/forms";
-import { useRef } from "react";
+import { FocusEventHandler, useCallback, useRef, useState } from "react";
 import {
   InputMask,
   InputMaskPipe,
@@ -21,6 +21,7 @@ export interface TravelDateTextInputProps extends LabelledTextInputProps {
   placeholderChar?: string;
   showMask?: boolean;
   calendarSize: TravelCalendarSizeVariant;
+  placeholderWhenBlurred: string | undefined;
 }
 
 export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
@@ -34,9 +35,15 @@ export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
   placeholderChar,
   showMask,
   calendarSize,
+  onFocus,
+  onBlur,
+  placeholderWhenBlurred,
+  placeholder,
   ...inputProps
 }) => {
   const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+
   const { onChange: maskedOnChange } = useMaskedInput(
     inputRef,
     onChange,
@@ -50,10 +57,33 @@ export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
     showMask
   );
 
+  const onFocusHandler = useCallback<FocusEventHandler<HTMLInputElement>>(
+    (ev) => {
+      onFocus?.(ev);
+      setIsFocused(true);
+    },
+    [onFocus]
+  );
+
+  const onBlurHandler = useCallback<FocusEventHandler<HTMLInputElement>>(
+    (ev) => {
+      onBlur?.(ev);
+      setIsFocused(false);
+    },
+    [onBlur]
+  );
+
+  const activePlaceholder = isFocused
+    ? placeholder
+    : placeholderWhenBlurred ?? placeholder;
+
   return (
     <LabelledTextInput
       {...inputProps}
       ref={inputRef}
+      placeholder={activePlaceholder}
+      onFocus={onFocusHandler}
+      onBlur={onBlurHandler}
       onChange={maskedOnChange}
       width={getWidth(calendarSize)}
       size={calendarSize === "large" ? "large" : "medium"}

packages/calendar/src/features/travel-calendar/components/TravelDateTextInputFields.tsx

@@ -18,6 +18,8 @@ export interface TravelDateTextInputFieldsProps {
   endDateLabel?: string;
   onFocus?: () => void;
   calendarSize: TravelCalendarSizeVariant;
+  placeholderWhenBlurredStartDate: string | undefined;
+  placeholderWhenBlurredEndDate: string | undefined;
 }
 
 export const TravelDateTextInputFields: React.FC<
@@ -30,6 +32,8 @@ export const TravelDateTextInputFields: React.FC<
   endDateLabel = "To",
   onFocus,
   calendarSize,
+  placeholderWhenBlurredStartDate,
+  placeholderWhenBlurredEndDate,
 }) => {
   const { mask, placeholder } = useMemo(() => {
     const dateFormatForLocaleCode = getDateFormatForLocaleCode(localeCode);
@@ -60,6 +64,7 @@ export const TravelDateTextInputFields: React.FC<
         label={startDateLabel}
         borderRadiusVariant={"onlyLeft"}
         placeholder={placeholder}
+        placeholderWhenBlurred={placeholderWhenBlurredStartDate}
         calendarSize={calendarSize}
       />
       <TravelDateTextInput
@@ -79,6 +84,7 @@ export const TravelDateTextInputFields: React.FC<
         label={endDateLabel}
         borderRadiusVariant={"onlyRight"}
         placeholder={placeholder}
+        placeholderWhenBlurred={placeholderWhenBlurredEndDate}
         calendarSize={calendarSize}
       />
     </Row>