@patternfly/react-core 4.244.0 → 4.244.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.244.0",
+  "version": "4.244.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "38e7a38cfcbb11b376302e90c1ac9df3a3f00711"
+  "gitHead": "a66b0277f021bed9693f19f2ee65d11193305e9d"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -127,6 +127,10 @@ const DatePickerBase = (
 
   React.useEffect(() => {
     setPristine(!value);
+    const newValueDate = dateParse(value);
+    if (errorText && isValidDate(newValueDate)) {
+      setError(newValueDate);
+    }
   }, [value]);
 
   const setError = (date: Date) => {

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

@@ -24,6 +24,27 @@ test('Date picker with multiple validators does not show invalid icon on valid i
   await user.click(screen.getByRole('textbox'));
 
   await user.click(document.body);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
+
+test('Error state can be cleared from outside', async () => {
+  const rangeValidator = (date: Date) => {
+    if (date < new Date('2020-03-17')) {
+      return 'error';
+    }
+    return '';
+  };
+
+  const user = userEvent.setup();
+
+  const { rerender } = render(<DatePicker value="2020-03-17" validators={[rangeValidator]} />);
+
+  await user.clear(screen.getByRole('textbox'));
+  await user.type(screen.getByRole('textbox'), '2020-03-16');
+
+  await user.click(document.body);
+
+  rerender(<DatePicker value="2020-03-18" validators={[rangeValidator]} />);
 
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });

package/src/components/Select/Select.tsx

@@ -143,6 +143,8 @@ export interface SelectProps
   maxHeight?: string | number;
   /** Icon element to render inside the select toggle */
   toggleIcon?: React.ReactElement;
+  /** Custom icon for the dropdown replacing the CaretDownIcon */
+  toggleIndicator?: React.ReactElement;
   /** Custom content to render in the select menu.  If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle */
   customContent?: React.ReactNode;
   /** Flag indicating if select should have an inline text input for filtering */
@@ -239,6 +241,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     onClear: () => undefined as void,
     onCreateOption: () => undefined as void,
     toggleIcon: null as React.ReactElement,
+    toggleIndicator: null as React.ReactElement,
     onFilter: null,
     onTypeaheadInputChanged: null,
     customContent: null,
@@ -983,6 +986,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       width,
       maxHeight,
       toggleIcon,
+      toggleIndicator,
       ouiaId,
       ouiaSafe,
       hasInlineFilter,
@@ -1314,6 +1318,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           onClose={this.onClose}
           onBlur={onBlur}
           variant={variant}
+          toggleIndicator={toggleIndicator}
           aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
           aria-label={toggleAriaLabel}
           {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}

package/src/components/Select/SelectToggle.tsx

@@ -31,6 +31,8 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   moveFocusToLastMenuItem?: () => void;
   /** Element which wraps toggle */
   parentRef: React.RefObject<HTMLDivElement>;
+  /** Custom icon for the dropdown replacing the CaretDownIcon */
+  toggleIndicator?: React.ReactElement;
   /** The menu element */
   menuRef?: React.RefObject<HTMLElement>;
   /** The menu footer element */
@@ -262,6 +264,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       'aria-label': ariaLabel,
       hasFooter,
       footerRef,
+      toggleIndicator,
       ...props
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -307,9 +310,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
             disabled={isDisabled}
           >
             {children}
-            <span className={css(styles.selectToggleArrow)}>
-              <CaretDownIcon />
-            </span>
+            <span className={css(styles.selectToggleArrow)}>{toggleIndicator ?? <CaretDownIcon />}</span>
           </button>
         )}
         {isTypeahead && (
@@ -354,7 +355,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               })}
               disabled={isDisabled}
             >
-              <CaretDownIcon className={css(styles.selectToggleArrow)} />
+              {toggleIndicator ?? <CaretDownIcon className={css(styles.selectToggleArrow)} />}
             </button>
           </div>
         )}