@patternfly/react-core 4.250.3 → 4.250.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.250.3",
+  "version": "4.250.5",
   "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": "5daeed558b92f13887c4ae278c2356abe2d22bae"
+  "gitHead": "8cea2e5427953062a640877854086934b93ce1f7"
 }

package/src/components/Select/Select.tsx

@@ -69,6 +69,8 @@ export interface SelectProps
   isDisabled?: boolean;
   /** Flag to indicate if the typeahead select allows new items */
   isCreatable?: boolean;
+  /** Flag to indicate if create option should be at top of typeahead */
+  isCreateOptionOnTop?: boolean;
   /** Flag indicating if placeholder styles should be applied */
   hasPlaceholderStyle?: boolean;
   /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
@@ -226,6 +228,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isDisabled: false,
     hasPlaceholderStyle: false,
     isCreatable: false,
+    isCreateOptionOnTop: false,
     validated: 'default',
     'aria-label': '',
     'aria-labelledby': '',
@@ -433,6 +436,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const {
       onFilter,
       isCreatable,
+      isCreateOptionOnTop,
       onCreateOption,
       createText,
       noResultsFoundText,
@@ -542,7 +546,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             } as SelectOptionObject)
           : newValue;
 
-        typeaheadFilteredChildren.push(
+        const createSelectOption = (
           <SelectOption
             key={`create ${newValue}`}
             value={newOptionValue}
@@ -551,6 +555,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             {createText} "{newValue}"
           </SelectOption>
         );
+
+        if (isCreateOptionOnTop) {
+          typeaheadFilteredChildren.unshift(createSelectOption);
+        } else {
+          typeaheadFilteredChildren.push(createSelectOption);
+        }
       }
     }
 
@@ -1020,6 +1030,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       footer,
       loadingVariant,
       isCreateSelectOptionObject,
+      isCreateOptionOnTop,
       shouldResetOnSelect,
       isFlipEnabled,
       removeFindDomNode,

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

@@ -560,3 +560,35 @@ test('applies focus styling to the create option when reached via keyboard navig
 
   expect(createOption.parentElement).toHaveClass('pf-m-focus');
 });
+
+test('appends create option to list of options', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  await user.type(input, `m`);
+
+  const createOption = screen.getAllByRole('option')[3];
+  expect(createOption).toHaveTextContent('Create "m"');
+});
+
+test('prepends create option to list of options if isCreateOptionOnTop flag is set', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreateOptionOnTop isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  await user.type(input, `m`);
+
+  const createOption = screen.getAllByRole('option')[0];
+  expect(createOption).toHaveTextContent('Create "m"');
+});

package/src/components/Select/examples/Select.md

@@ -1209,6 +1209,7 @@ class TypeaheadSelectInput extends React.Component {
       selected: null,
       isDisabled: false,
       isCreatable: false,
+      isCreateOptionOnTop: false,
       isInputValuePersisted: false,
       isInputFilterPersisted: false,
       hasOnCreateOption: false,
@@ -1258,6 +1259,12 @@ class TypeaheadSelectInput extends React.Component {
       });
     };
 
+    this.toggleCreateOptionOnTop = checked => {
+      this.setState({
+        isCreateOptionOnTop: checked
+      });
+    };
+
     this.toggleCreateNew = checked => {
       this.setState({
         hasOnCreateOption: checked
@@ -1289,6 +1296,7 @@ class TypeaheadSelectInput extends React.Component {
       selected,
       isDisabled,
       isCreatable,
+      isCreateOptionOnTop,
       hasOnCreateOption,
       isInputValuePersisted,
       isInputFilterPersisted,
@@ -1315,6 +1323,7 @@ class TypeaheadSelectInput extends React.Component {
           placeholderText="Select a state"
           isDisabled={isDisabled}
           isCreatable={isCreatable}
+          isCreateOptionOnTop={isCreateOptionOnTop}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
           shouldResetOnSelect={resetOnSelect}
         >
@@ -1343,6 +1352,14 @@ class TypeaheadSelectInput extends React.Component {
           id="toggle-creatable-typeahead"
           name="toggle-creatable-typeahead"
         />
+        <Checkbox
+          label="isCreateOptionOnTop"
+          isChecked={this.state.isCreateOptionOnTop}
+          onChange={this.toggleCreateOptionOnTop}
+          aria-label="toggle createOptionOnTop checkbox"
+          id="toggle-create-option-on-top-typeahead"
+          name="toggle-create-option-on-top-typeahead"
+        />
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}

package/src/next/components/Dropdown/Dropdown.tsx

@@ -23,9 +23,11 @@ export interface DropdownProps extends MenuProps {
   isScrollable?: boolean;
   /** Min width of the menu. */
   minWidth?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   children,
   className,
   onSelect,
@@ -35,13 +37,14 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   isPlain,
   isScrollable,
   minWidth,
+  innerRef,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
   const containerRef = React.useRef<HTMLDivElement>();
 
-  const menuRef = (props.innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       if (!isOpen && toggleRef.current?.contains(event.target as Node)) {
@@ -112,4 +115,8 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
     </div>
   );
 };
+
+export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
+  <DropdownBase innerRef={ref} {...props} />
+));
 Dropdown.displayName = 'Dropdown';

package/src/next/components/Dropdown/examples/DropdownBasic.tsx

@@ -4,7 +4,6 @@ import { Divider, MenuToggle } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownBasic: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}

package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -4,7 +4,6 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       minWidth="150px"

package/src/next/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -4,7 +4,6 @@ import { MenuToggle, Divider } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}

package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -5,7 +5,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -19,7 +18,6 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       minWidth="150px"