@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/components/DatePicker/DatePicker.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
@@ -12,6 +13,14 @@ import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
 
+/** Props that customize the requirement of a date */
+export interface DatePickerRequiredObject {
+  /** Flag indicating the date is required. */
+  isRequired?: boolean;
+  /** Error message to display when the text input is empty and the isRequired prop is also passed in. */
+  emptyDateText?: string;
+}
+
 /** The main date picker component. */
 
 export interface DatePickerProps
@@ -32,7 +41,7 @@ export interface DatePickerProps
   className?: string;
   /** How to format the date in the text input. */
   dateFormat?: (date: Date) => string;
-  /** How to format the date in the text input. */
+  /** How to parse the date in the text input. */
   dateParse?: (value: string) => Date;
   /** Helper text to display alongside the date picker. Expects a HelperText component. */
   helperText?: React.ReactNode;
@@ -40,7 +49,7 @@ export interface DatePickerProps
   inputProps?: TextInputProps;
   /** Flag indicating the date picker is disabled. */
   isDisabled?: boolean;
-  /** Error message to display when the text input cannot be parsed. */
+  /** Error message to display when the text input contains a non-empty value in an invalid format. */
   invalidFormatText?: string;
   /** Callback called every time the text input loses focus. */
   onBlur?: (event: any, value: string, date?: Date) => void;
@@ -50,6 +59,8 @@ export interface DatePickerProps
   placeholder?: string;
   /** Props to pass to the popover that contains the calendar month component. */
   popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;
+  /** Options to customize the requirement of a date */
+  requiredDateOptions?: DatePickerRequiredObject;
   /** Functions that returns an error message if a date is invalid. */
   validators?: ((date: Date) => string)[];
   /** Value of the text input. */
@@ -95,6 +106,7 @@ const DatePickerBase = (
     onChange = (): any => undefined,
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
+    requiredDateOptions,
     helperText,
     appendTo = 'inline',
     popoverProps,
@@ -117,11 +129,14 @@ const DatePickerBase = (
   const [popoverOpen, setPopoverOpen] = React.useState(false);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const [pristine, setPristine] = React.useState(true);
+  const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();
+  const dateIsRequired = requiredDateOptions?.isRequired || false;
+  const emptyDateText = requiredDateOptions?.emptyDateText || 'Date cannot be blank';
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -134,6 +149,9 @@ const DatePickerBase = (
     if (errorText && isValidDate(newValueDate)) {
       setError(newValueDate);
     }
+    if (value === '' && !pristine && !textInputFocused) {
+      dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
+    }
   }, [value]);
 
   const setError = (date: Date) => {
@@ -153,17 +171,23 @@ const DatePickerBase = (
   };
 
   const onInputBlur = (event: any) => {
-    if (pristine) {
-      return;
-    }
+    setTextInputFocused(false);
     const newValueDate = dateParse(value);
-    if (isValidDate(newValueDate)) {
-      onBlur(event, value, new Date(newValueDate));
+    const dateIsValid = isValidDate(newValueDate);
+    const onBlurDateArg = dateIsValid ? new Date(newValueDate) : undefined;
+    onBlur(event, value, onBlurDateArg);
+
+    if (dateIsValid) {
       setError(newValueDate);
-    } else {
-      onBlur(event, value);
+    }
+
+    if (!dateIsValid && !pristine) {
       setErrorText(invalidFormatText);
     }
+
+    if (!dateIsValid && pristine && requiredDateOptions?.isRequired) {
+      setErrorText(emptyDateText);
+    }
   };
 
   const onDateClick = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
@@ -197,9 +221,15 @@ const DatePickerBase = (
     [setPopoverOpen, popoverOpen, selectOpen]
   );
 
+  const createFocusSelectorString = (modifierClass: string) =>
+    `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
+  const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+  const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
+
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
+        elementToFocus={valueDate ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
         position="bottom"
         bodyContent={
           <CalendarMonth
@@ -215,7 +245,6 @@ const DatePickerBase = (
             dayFormat={dayFormat}
             weekStart={weekStart}
             rangeStart={rangeStart}
-            isDateFocused
           />
         }
         showClose={false}
@@ -236,6 +265,10 @@ const DatePickerBase = (
             event.stopPropagation();
             setPopoverOpen(false);
             hideFunction();
+            // If datepicker is required and the popover is opened without the text input
+            // first receiving focus, we want to validate that the text input is not blank upon
+            // closing the popover
+            requiredDateOptions?.isRequired && !value && setErrorText(emptyDateText);
           }
           if (event.key === KeyTypes.Escape && popoverOpen) {
             event.stopPropagation();
@@ -254,12 +287,14 @@ const DatePickerBase = (
             <InputGroupItem isFill>
               <TextInput
                 isDisabled={isDisabled}
+                isRequired={requiredDateOptions?.isRequired}
                 aria-label={ariaLabel}
                 placeholder={placeholder}
                 validated={errorText.trim() ? 'error' : 'default'}
                 value={value}
                 onChange={onTextInput}
                 onBlur={onInputBlur}
+                onFocus={() => setTextInputFocused(true)}
                 onKeyPress={onKeyPress}
                 {...inputProps}
               />

package/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -57,7 +57,7 @@ test('Error state can be cleared from outside', async () => {
 test('With popover opened', async () => {
   const user = userEvent.setup();
 
-  const { asFragment } = render(<DatePicker />);
+  const { asFragment } = render(<DatePicker value="2020-03-17" />);
 
   await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
   await screen.findByRole('button', { name: 'Previous month' });
@@ -80,7 +80,7 @@ test('Shows helperText instead of "Invalid date" when no error exists', () => {
   expect(screen.getByText('Help me')).toBeVisible();
 });
 
-test('Shows "Invalid date" instead of helperText when an error exists', async () => {
+test('Shows "Invalid date" instead of helperText when text input contains invalid date', async () => {
   const user = userEvent.setup();
 
   render(
@@ -99,3 +99,90 @@ test('Shows "Invalid date" instead of helperText when an error exists', async ()
   expect(screen.queryByText('Help me')).not.toBeInTheDocument();
   expect(screen.getByText('Invalid date')).toBeVisible();
 });
+
+test('Does not render text input as invalid when requiredDateOptions.isRequired is false', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+});
+
+test('Does not render emptyDateText when requiredDateOptions.isRequired is false', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument;
+});
+
+test('Renders text input as invalid on blur when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});
+
+test('Renders default emptyDateText on blur when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Date cannot be blank')).toBeInTheDocument();
+});
+
+test('Renders custom emptyDateText when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true, emptyDateText: 'Required in test' }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Required in test')).toBeInTheDocument();
+});
+
+test('Shows emptyDateText instead of helperText when text input is empty and requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <DatePicker
+      requiredDateOptions={{ isRequired: true }}
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText('Help me')).not.toBeInTheDocument();
+  expect(screen.getByText('Date cannot be blank')).toBeVisible();
+});
+
+test('Renders text input as invalid when requiredDateOptions.isRequired is true and popover is closed without selection', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});