@patternfly/react-core 5.0.0-alpha.107 → 5.0.0-alpha.109

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -2903,13 +2903,35 @@ exports[`tree view renders search successfully 1`] = `
   <div
     class="pf-v5-c-tree-view__search"
   >
-    <input
-      aria-label="Search input example"
-      class="pf-v5-c-form-control pf-m-search"
-      id="input-search"
-      name="search-input"
-      type="search"
-    />
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        aria-label="Search input example"
+        id="input-search"
+        name="search-input"
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -32,36 +32,43 @@ Custom menus can be constructed using a composable approach by combining the [Me
 ### Composable simple dropdown
 
 ```ts file="./examples/ComposableSimpleDropdown.tsx"
+
 ```
 
 ### Composable actions menu
 
 ```ts file="./examples/ComposableActionsMenu.tsx"
+
 ```
 
 ### Composable simple select
 
 ```ts file="./examples/ComposableSimpleSelect.tsx"
+
 ```
 
 ### Composable simple checkbox select
 
 ```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
+
 ```
 
 ### Composable typeahead select
 
 ```ts file="./examples/ComposableTypeaheadSelect.tsx"
+
 ```
 
 ### Composable multiple typeahead select
 
 ```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+
 ```
 
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
+
 ```
 
 ### Composable tree view menu
@@ -69,6 +76,7 @@ Custom menus can be constructed using a composable approach by combining the [Me
 When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
+
 ```
 
 ### Composable flyout
@@ -76,29 +84,35 @@ When rendering a menu-like element that does not contain MenuItem components, [P
 The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
 
 ```ts isBeta file="./examples/ComposableFlyout.tsx"
+
 ```
 
 ### Composable application launcher
 
 ```ts file="./examples/ComposableApplicationLauncher.tsx"
+
 ```
 
 ### Composable context selector
 
 ```ts file="./examples/ComposableContextSelector.tsx"
+
 ```
 
 ### Composable options menu variants
 
 ```ts file="./examples/ComposableOptionsMenuVariants.tsx"
+
 ```
 
 ### Composable dropdown variants
 
 ```ts file="./examples/ComposableDropdwnVariants.tsx"
+
 ```
 
 ### Composable date select
 
 ```ts file="./examples/ComposableDateSelect.tsx"
+
 ```

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -96,7 +96,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
               id="date-time"
               aria-label="date and time picker demo"
               value={valueDate + ' ' + valueTime}
-              isReadOnly
+              readOnlyVariant="default"
             />
           </InputGroupItem>
           <InputGroupItem>{calendarButton}</InputGroupItem>

package/src/deprecated/components/Select/Select.tsx

@@ -295,7 +295,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     // Move focus to top of the menu if state.focusFirstOption was updated to true and the menu does not have custom content
     if (!prevState.focusFirstOption && this.state.focusFirstOption && !this.props.customContent) {
       const firstRef = this.refCollection.find(
-        ref =>
+        (ref) =>
           // If a select option is disabled then ref[0] will be undefined, so we want to return
           // the first ref that both a) is not null and b) is not disabled.
           ref !== null && ref[0]
@@ -467,14 +467,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? React.Children.map(children, group => {
+            ? React.Children.map(children, (group) => {
                 if (
                   React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
                   group.type === SelectGroup
                 ) {
-                  const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
-                    SelectGroupProps
-                  >[]).filter(childFilter);
+                  const filteredGroupChildren = (
+                    React.Children.toArray(group.props.children) as React.ReactElement<SelectGroupProps>[]
+                  ).filter(childFilter);
                   if (filteredGroupChildren.length > 0) {
                     return React.cloneElement(group, {
                       titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
@@ -489,7 +489,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       } else {
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? childrenArray.filter(child => {
+            ? childrenArray.filter((child) => {
                 const valueToCheck = child.props.value;
                 // Dividers don't have value and should not be filtered
                 if (!valueToCheck) {
@@ -540,10 +540,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         const newOptionValue = isCreateSelectOptionObject
           ? ({
               toString: () => newValue,
-              compareTo: value =>
-                this.toString()
-                  .toLowerCase()
-                  .includes(value.toString().toLowerCase())
+              compareTo: (value) => this.toString().toLowerCase().includes(value.toString().toLowerCase())
             } as SelectOptionObject)
           : newValue;
 
@@ -665,8 +662,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
-    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
+    this.refCollection[index] = [optionRef as unknown as HTMLElement, favoriteRef as unknown as HTMLElement];
+    this.optionContainerRefCollection[index] = optionContainerRef as unknown as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {
@@ -698,7 +695,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       // !isLoad prevents the view more button text from appearing the typeahead input
       typeaheadInputValue = optionTextElm.textContent;
     }
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
       typeaheadStoredIndex: nextIndex,
       typeaheadInputValue
@@ -900,7 +897,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         this.moveFocus(nextIndex);
       } else {
         const nextIndex = this.refCollection.findIndex(
-          ref => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
+          (ref) => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
         );
         this.moveFocus(nextIndex);
       }
@@ -920,9 +917,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const item = this.props.isGrouped
       ? (React.Children.toArray(this.props.children) as React.ReactElement[])
           .reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
-          .find(child => child.props.value.toString() === value.toString())
+          .find((child) => child.props.value.toString() === value.toString())
       : React.Children.toArray(this.props.children).find(
-          child =>
+          (child) =>
             (child as React.ReactElement).props.value &&
             (child as React.ReactElement).props.value.toString() === value.toString()
         );
@@ -945,7 +942,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       return '';
     } else {
       const multi: string[] = [];
-      React.Children.toArray(item.props.children).forEach(child => multi.push(this.findText(child)));
+      React.Children.toArray(item.props.children).forEach((child) => multi.push(this.findText(child)));
       return multi.join('');
     }
   };
@@ -1084,7 +1081,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     }
 
     if (isOpen) {
-      if (renderableItems.find(item => (item as any)?.key === 'loading') === undefined) {
+      if (renderableItems.find((item) => (item as any)?.key === 'loading') === undefined) {
         if (loadingVariant === 'spinner') {
           renderableItems.push(
             <SelectOption isLoading key="loading" value="loading">
@@ -1109,7 +1106,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const clearBtn = (
       <button
         className={css(buttonStyles.button, buttonStyles.modifiers.plain, styles.selectToggleClear)}
-        onClick={e => {
+        onClick={(e) => {
           this.clearSelection(e);
           onClear(e);
           e.stopPropagation();
@@ -1118,7 +1115,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         type="button"
         disabled={isDisabled}
         ref={this.clearRef}
-        onKeyDown={event => {
+        onKeyDown={(event) => {
           if (event.key === KeyTypes.Enter) {
             this.clearRef.current.click();
           }
@@ -1135,7 +1132,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       ) : (
         <ChipGroup {...chipGroupProps}>
           {selections &&
-            (selections as string[]).map(item => (
+            (selections as string[]).map((item) => (
               <Chip
                 key={item}
                 onClick={(e: React.MouseEvent) => onSelect(e, item)}
@@ -1151,14 +1148,13 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
             <input
               key="inline-filter-input"
               type="search"
-              className={css(formStyles.formControl, formStyles.modifiers.search)}
               onChange={this.onChange}
               placeholder={inlineFilterPlaceholderText}
-              onKeyDown={event => {
+              onKeyDown={(event) => {
                 if (event.key === KeyTypes.ArrowUp) {
                   this.handleMenuKeys(0, 0, 'up');
                   event.preventDefault();
@@ -1462,7 +1458,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     return (
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <SelectContext.Provider
             value={{
               onSelect,

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1192,11 +1192,10 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search"
+          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
         >
           <input
             autocomplete="off"
-            class="pf-v5-c-form-control pf-m-search"
             type="search"
           />
         </div>

package/src/helpers/Popper/Popper.tsx

@@ -68,7 +68,7 @@ export interface PopperProps {
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
-  /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */
   minWidth?: string | 'trigger';

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  FormSelect,
-  FormSelectOption,
-  HelperText,
-  HelperTextItem,
-  ValidatedOptions
-} from '@patternfly/react-core';
-
-export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('');
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
-  const [helperText, setHelperText] = React.useState('');
-
-  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
-    if (value === '3') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.success);
-      setHelperText('You chose wisely');
-    } else if (value === '') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.warning);
-      setHelperText('You must select a value');
-    } else {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.error);
-      setHelperText('You must chose Three (thought that was obvious)');
-    }
-  };
-
-  const options = [
-    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-  ];
-
-  return (
-    <Form>
-      <FormGroup label="Selection:" type="string" fieldId="selection">
-        <FormSelect
-          validated={validated}
-          isIconSprite
-          value={formSelectValue}
-          onChange={onChange}
-          aria-label="FormSelect Input"
-        >
-          {options.map((option, index) => (
-            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-          ))}
-        </FormSelect>
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      </FormGroup>
-    </Form>
-  );
-};

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-export const TextAreaIconSprite: React.FunctionComponent = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        value={success}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        value={warning}
-        aria-label="warning icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        value={error}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};

package/src/components/TextInput/examples/TextInputIcon.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [custom, setCustom] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={calendar}
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={custom}
-        type="text"
-        customIconDimensions="24px 24px"
-        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
-        onChange={(_event, value) => setCustom(value)}
-        aria-label="text input example"
-      />
-    </>
-  );
-};

package/src/components/TextInput/examples/TextInputIconSprite.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIconSprite: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={success}
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        aria-label="success icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={warning}
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={error}
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        aria-label="error icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={calendar}
-        isIconSprite
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="calendar icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        isIconSprite
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="clock icon sprite text input example"
-      />
-    </>
-  );
-};