@redocly/theme 0.52.0-next.3 → 0.52.0-next.4

package/src/components/Select/Select.tsx

@@ -53,6 +53,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     getSelectedOptionsFromPropsValue(),
   );
   const selectRef = useRef<HTMLDivElement | null>(null);
+  const selectInputRef = useRef<HTMLInputElement | null>(null);
   const [searchValue, setSearchValue] = useState<string | null>(null);
   const [dropdownActive, setDropdownActive] = useState<boolean | undefined>(false);
   const [filteredOptions, setFilteredOptions] = useState<SelectOption<T>[]>(options);
@@ -110,9 +111,12 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     onChange?.(newSelectedValues);
     setSearchValue(null);
     setDropdownActive(false);
+
     if (!multiple) {
       setStickyInputValue('');
     }
+
+    selectInputRef.current?.focus();
   };
 
   const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -163,7 +167,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     );
   };
 
-  const renderDefaultInput = () => {
+  const renderDefaultInput = (inputRef: React.ForwardedRef<HTMLInputElement>) => {
     return (
       <SelectInput
         id={inputId}
@@ -175,6 +179,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         searchable={searchable}
         clearable={clearable}
         customIcon={icon}
+        inputRef={inputRef}
         onlyIcon={onlyIcon}
         clearHandler={clearHandler}
         searchHandler={searchHandler}
@@ -197,7 +202,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       <SelectDropdown
         closeOnClick={!multiple}
         withArrow={withArrow}
-        trigger={renderInput ? renderInput() : renderDefaultInput()}
+        trigger={renderInput ? renderInput() : renderDefaultInput(selectInputRef)}
         triggerEvent={triggerEvent}
         placement={placement}
         alignment={alignment}

package/src/components/Select/SelectInput.tsx

@@ -19,6 +19,7 @@ type SelectInputProps<T> = {
   multiple?: boolean;
   searchable?: boolean;
   clearable?: boolean;
+  inputRef?: React.ForwardedRef<HTMLInputElement>;
   clearHandler?: (value?: any) => void;
   inputBlurHandler?: (e?: any) => void;
   inputFocusHandler?: (e?: any) => void;
@@ -53,7 +54,6 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   };
 
   const onKeyDownHandler = (e: any) => {
-    e.stopPropagation();
     if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
       clearHandler?.(selectedOptions[selectedOptions.length - 1]);
       inputRef.current?.focus();
@@ -105,7 +105,19 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
       onChange={onChangeHandler}
       onKeyDown={onKeyDownHandler}
       onBlur={onBlurHandler}
-      ref={inputRef}
+      ref={(input) => {
+        if (!input) return;
+
+        inputRef.current = input;
+
+        if (!props.inputRef) return;
+
+        if (typeof props.inputRef === 'function') {
+          props.inputRef(input);
+        } else {
+          props.inputRef.current = input;
+        }
+      }}
       width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
     />
   );

package/src/components/Tag/Tag.tsx

@@ -39,7 +39,9 @@ export type TagProps = {
   size?: string;
   icon?: React.ReactNode;
   active?: boolean;
+  tabIndex?: number;
   onClick?: (event: React.MouseEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
   onClose?: (event: React.MouseEvent) => void;
 };
 
@@ -49,7 +51,9 @@ export function Tag({
   icon,
   active,
   closable,
+  tabIndex,
   onClick,
+  onKeyDown,
   onClose,
   size,
   borderless,
@@ -59,11 +63,13 @@ export function Tag({
 }: TagProps): JSX.Element {
   return (
     <TagWrapper
+      tabIndex={tabIndex}
       data-component-name="Tag/Tag"
       borderless={borderless}
       color={color}
       size={size}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       hasCloseButton={closable}
       {...otherProps}
     >

package/src/components/UserMenu/UserMenu.tsx

@@ -65,7 +65,7 @@ export function UserMenu({ className }: UserMenuProps) {
         className={className}
         alignment="end"
         trigger={
-          <UserMenuTrigger role="button">
+          <UserMenuTrigger role="button" tabIndex={0}>
             <UserAvatar picture={userData.picture} />
           </UserMenuTrigger>
         }

package/src/core/hooks/menu/use-collapse.ts

@@ -207,6 +207,5 @@ export function useEvent<T extends (...args: any[]) => any>(callback?: T) {
     ref.current = callback;
   });
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useCallback(((...args: any) => ref.current?.(...args)) as T, []);
 }

package/src/core/hooks/use-dialog-hotkeys.ts

@@ -30,12 +30,12 @@ export function useDialogHotKeys(
     if (focusableElements && focusableElements.length > 0) {
       firstFocusableRef.current = focusableElements[0] as HTMLElement;
       lastFocusableRef.current = focusableElements[focusableElements.length - 1] as HTMLElement;
-      firstFocusableRef.current?.focus();
     }
   };
 
   useEffect(() => {
     document.addEventListener('keydown', onKeyDownHandler);
+
     return () => {
       document.removeEventListener('keydown', onKeyDownHandler);
     };

package/src/icons/ReturnKeyIcon/ReturnKeyIcon.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Typography } from '@redocly/theme/components/Typography/Typography';
+
+export const ReturnKeyIcon = styled(Typography).attrs(() => ({
+  'data-component-name': 'icons/ReturnKeyIcon/ReturnKeyIcon',
+}))`
+  margin-left: auto;
+
+  ::after {
+    content: '⏎';
+  }
+`;