@flightctl/ui-components 0.10.0-rc5 → 1.0.0-rc1

package/src/components/form/FormSelectTypeahead.tsx

@@ -46,6 +46,9 @@ const FormSelectTypeahead = ({
 
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string | undefined>(undefined);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
 
   const currentValue = field.value;
 
@@ -79,6 +82,79 @@ const FormSelectTypeahead = ({
     return getItemLabel(items[key]).toLowerCase().includes(inputValue.toLowerCase());
   });
 
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = itemKeysFiltered[itemIndex];
+    setActiveItemId(`${fieldId}-${focusedItem}`);
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (itemKeysFiltered.length === 0) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = itemKeysFiltered.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === itemKeysFiltered.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? itemKeysFiltered[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (isOpen && focusedItem) {
+          event.preventDefault();
+          setTouched(true);
+          setValue(focusedItem, true);
+          setInputValue(undefined);
+          setIsOpen(false);
+          resetActiveAndFocusedItem();
+        } else if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+      case 'Escape':
+        if (isOpen) {
+          setIsOpen(false);
+          resetActiveAndFocusedItem();
+        }
+        break;
+    }
+  };
+
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
       <Select
@@ -90,6 +166,7 @@ const FormSelectTypeahead = ({
           setValue(value as string, true);
           setInputValue(undefined);
           setIsOpen(false);
+          resetActiveAndFocusedItem();
         }}
         toggle={(toggleRef) => (
           <MenuToggle
@@ -99,6 +176,7 @@ const FormSelectTypeahead = ({
                 setTouched(true);
               }
               setIsOpen(!isOpen);
+              textInputRef?.current?.focus();
             }}
             isExpanded={isOpen}
             className="fctl-form-select__toggle"
@@ -113,9 +191,11 @@ const FormSelectTypeahead = ({
                     setTouched(true);
                   }
                   setIsOpen(!isOpen);
+                  textInputRef?.current?.focus();
                 }}
                 onChange={(_, value) => {
                   setInputValue(value || undefined);
+                  resetActiveAndFocusedItem();
                   if (!isOpen) {
                     setIsOpen(true);
                   }
@@ -146,8 +226,11 @@ const FormSelectTypeahead = ({
                 autoComplete="off"
                 role="combobox"
                 isExpanded={isOpen}
-                aria-controls="select-create-typeahead-listbox"
+                aria-controls={`${fieldId}-listbox`}
                 placeholder={placeholderText}
+                onKeyDown={onInputKeyDown}
+                innerRef={textInputRef}
+                {...(activeItemId && { 'aria-activedescendant': activeItemId })}
               />
             </TextInputGroup>
           </MenuToggle>
@@ -158,16 +241,26 @@ const FormSelectTypeahead = ({
             if (!meta.touched) {
               setTouched(true);
             }
+            resetActiveAndFocusedItem();
+          } else {
+            textInputRef?.current?.focus();
           }
           setIsOpen(open);
         }}
       >
-        <SelectList className="fctl-form-select__menu">
-          {itemKeysFiltered.map((key) => {
+        <SelectList className="fctl-form-select__menu" id={`${fieldId}-listbox`}>
+          {itemKeysFiltered.map((key, index) => {
             const item = items[key];
             const desc = isItemObject(item) ? item.description : undefined;
             return (
-              <SelectOption className="fctl-form-select__item" key={key} value={key} description={desc}>
+              <SelectOption
+                className="fctl-form-select__item"
+                key={key}
+                value={key}
+                description={desc}
+                isFocused={focusedItemIndex === index}
+                id={`${fieldId}-${key}`}
+              >
                 {getItemLabel(item)}
               </SelectOption>
             );

package/src/components/form/ListItemField.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Label, LabelGroup, Text, TextVariants } from '@patternfly/react-core';
+
+import EditableLabelControl from '../common/EditableLabelControl';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+import { useTranslation } from '../../hooks/useTranslation';
+
+type ListItemFieldProps = {
+  name: string;
+  isLoading?: boolean;
+  helperText?: React.ReactNode;
+  addButtonText?: string;
+  resolvedValue?: string | ((items: string[]) => string);
+  resolvedLabel?: string;
+};
+
+const maxWidthLabel = '18ch';
+
+const ListItemField = ({
+  name,
+  helperText,
+  isLoading,
+  addButtonText,
+  resolvedValue,
+  resolvedLabel,
+}: ListItemFieldProps) => {
+  const { t } = useTranslation();
+  const [{ value: items }, meta, { setValue: setItems }] = useField<string[]>(name);
+
+  const updateItems = async (newItems: string[]) => {
+    await setItems(newItems, true);
+  };
+
+  const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    if (isLoading) {
+      return;
+    }
+    const newItems = [...items];
+    newItems.splice(index, 1);
+    await updateItems(newItems);
+  };
+
+  const onAdd = async (text: string) => {
+    if (!text || !text.trim()) {
+      return;
+    }
+    const trimmedText = text.trim();
+    const newItems = [...items, trimmedText];
+    await updateItems(newItems);
+  };
+
+  const onEdit = async (index: number, nextText: string) => {
+    const trimmedText = nextText.trim();
+    if (!trimmedText) {
+      return;
+    }
+
+    const newItems = [...items];
+    newItems.splice(index, 1, trimmedText);
+    await updateItems(newItems);
+  };
+
+  const getResolvedValue = () => {
+    if (!resolvedValue || items.length === 0) {
+      return null;
+    }
+    if (typeof resolvedValue === 'function') {
+      return resolvedValue(items);
+    }
+    return resolvedValue;
+  };
+
+  const displayedResolvedValue = getResolvedValue();
+
+  return (
+    <>
+      <DefaultHelperText helperText={helperText} />
+
+      <LabelGroup
+        numLabels={5}
+        isEditable={!isLoading}
+        addLabelControl={
+          <EditableLabelControl
+            defaultLabel=""
+            addButtonText={addButtonText || t('Add item')}
+            onAddLabel={onAdd}
+            isEditable={!isLoading}
+          />
+        }
+      >
+        {items.map((item, index) => {
+          const elKey = `${item}__${index}`;
+          const closeButtonProps = isLoading ? { isDisabled: true } : undefined;
+          const isItemEditable = !isLoading;
+
+          return (
+            <Label
+              key={elKey}
+              textMaxWidth={maxWidthLabel}
+              closeBtnProps={closeButtonProps}
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              title={isItemEditable ? item : undefined}
+              isEditable={isItemEditable}
+            >
+              {item}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      {displayedResolvedValue && (
+        <Text component={TextVariants.small} style={{ marginTop: '0.5rem', color: 'var(--pf-v5-global--Color--200)' }}>
+          {resolvedLabel || t('Resolved')}: <strong>{displayedResolvedValue}</strong>
+        </Text>
+      )}
+      <ErrorHelperText meta={meta} touchRequired={false} />
+    </>
+  );
+};
+
+export default ListItemField;

package/src/components/form/NameField.tsx

@@ -7,6 +7,7 @@ import { useFetch } from '../../hooks/useFetch';
 import { useTranslation } from '../../hooks/useTranslation';
 import RichValidationTextField, { RichValidationTextFieldProps } from './RichValidationTextField';
 import { TextFieldProps } from './TextField';
+import { DefaultHelperText } from './FieldHelperText';
 
 type NameFieldProps = TextFieldProps & {
   resourceType: string;
@@ -71,13 +72,14 @@ const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps)
   return <RichValidationTextField fieldName={name} validations={allValidations} {...rest} />;
 };
 
-const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest }: NameFieldProps) => {
+const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, helperText, ...rest }: NameFieldProps) => {
   const [{ value }] = useField<string>(name);
 
   if (isDisabled) {
     return (
       <FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
         <TextInput value={value} {...rest} isDisabled />
+        {helperText && <DefaultHelperText helperText={helperText} />}
       </FormGroup>
     );
   }

package/src/components/form/SwitchField.tsx

@@ -5,10 +5,11 @@ import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 export interface SwitchFieldProps extends Omit<SwitchProps, 'onChange' | 'ref' | 'checked' | 'id'> {
   name: string;
+  labelIcon?: React.ReactElement;
   helperText?: React.ReactNode;
 }
 
-const SwitchField = ({ helperText, name, ...props }: SwitchFieldProps) => {
+const SwitchField = ({ label, labelIcon, helperText, name, ...props }: SwitchFieldProps) => {
   const [field, meta, { setValue, setTouched }] = useField({
     name,
   });
@@ -21,7 +22,7 @@ const SwitchField = ({ helperText, name, ...props }: SwitchFieldProps) => {
   const fieldId = `switchfield-${name}`;
 
   return (
-    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={label} labelIcon={labelIcon}>
       <Switch {...field} {...props} id={fieldId} onChange={onChange} isChecked={!!field.value} />
       <DefaultHelperText helperText={helperText} />
       <ErrorHelperText meta={meta} />