@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/Autocomplete/AutocompleteInput.js

@@ -1,163 +1,116 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
-import { AutocompleteContext, AutocompleteInputContext } from './AutocompleteContext.js';
-import { useMergedRefs } from '../hooks/useMergedRefs.js';
-import useSafeTimeout from '../hooks/useSafeTimeout.js';
-import { jsx } from 'react/jsx-runtime';
-import TextInput from '../TextInput/TextInput.js';
-
-const ARROW_KEYS_NAV = new Set(['ArrowUp', 'ArrowDown']);
-const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
-  as: Component = TextInput,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
-  onKeyUp,
-  onKeyPress,
-  value,
-  openOnFocus = false,
-  ...props
-}, forwardedRef) => {
-  const autocompleteContext = useContext(AutocompleteContext);
-  const inputContext = useContext(AutocompleteInputContext);
-  if (autocompleteContext === null || inputContext === null) {
-    throw new Error('AutocompleteContext returned null values');
-  }
-  const {
-    activeDescendantRef,
-    id,
-    inputRef,
-    setInputValue,
-    setShowMenu,
-    showMenu
-  } = autocompleteContext;
-  const {
-    autocompleteSuggestion = '',
-    inputValue = '',
-    isMenuDirectlyActivated
-  } = inputContext;
-  const mergedRef = useMergedRefs(forwardedRef, inputRef);
-  const [highlightRemainingText, setHighlightRemainingText] = useState(true);
-  const {
-    safeSetTimeout
-  } = useSafeTimeout();
-  const handleInputFocus = event => {
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    if (openOnFocus) {
-      setShowMenu(true);
-    }
-  };
-  const handleInputBlur = useCallback(event => {
-    onBlur && onBlur(event);
-
-    // HACK: wait a tick and check the focused element before hiding the autocomplete menu
-    // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
-    // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
-    safeSetTimeout(() => {
-      if (document.activeElement !== inputRef.current) {
-        setShowMenu(false);
-
-        // Reset the input's value to the text the user actually typed rather than leaving the
-        // inline autocomplete suggestion in place. This keeps the blur behavior consistent with
-        // pressing Escape, so deleting characters off a selection and then clicking away does not
-        // silently restore the full suggestion. See https://github.com/primer/react/issues/4275
-        if (inputRef.current && autocompleteSuggestion && inputRef.current.value !== inputValue) {
-          inputRef.current.value = inputValue;
-        }
-      }
-    }, 0);
-  }, [onBlur, setShowMenu, inputRef, safeSetTimeout, autocompleteSuggestion, inputValue]);
-  const handleInputChange = event => {
-    onChange && onChange(event);
-    setInputValue(event.currentTarget.value);
-    if (!showMenu) {
-      setShowMenu(true);
-    }
-  };
-  const handleInputKeyDown = useCallback(event => {
-    var _inputRef$current;
-    onKeyDown && onKeyDown(event);
-    if (event.key === 'Backspace') {
-      setHighlightRemainingText(false);
-    }
-    if (event.key === 'Escape' && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
-      setInputValue('');
-      inputRef.current.value = '';
-    }
-    if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) {
-      setShowMenu(true);
-    }
-  }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown, showMenu, setShowMenu]);
-  const handleInputKeyUp = useCallback(event => {
-    onKeyUp && onKeyUp(event);
-    if (event.key === 'Backspace') {
-      setHighlightRemainingText(true);
-    }
-  }, [setHighlightRemainingText, onKeyUp]);
-  const onInputKeyPress = useCallback(event => {
-    onKeyPress && onKeyPress(event);
-    if (showMenu && event.key === 'Enter' && activeDescendantRef.current) {
-      event.preventDefault();
-      event.nativeEvent.stopImmediatePropagation();
-
-      // Forward Enter key press to active descendant so that item gets activated
-      const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
-      activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
-    }
-  }, [activeDescendantRef, showMenu, onKeyPress]);
-  useEffect(() => {
-    if (!inputRef.current) {
-      return;
-    }
-
-    // resets input value to being empty after a selection has been made
-    if (!autocompleteSuggestion) {
-      inputRef.current.value = inputValue;
-    }
-
-    // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
-    //       is the same as what I'm typing
-    //       e.g.: typing 'tw' highlights 'two', but when I 'two', the text input change does not get triggered
-    // Only apply the inline autocomplete suggestion while the input is focused. Without this guard,
-    // the suggestion can be re-applied to the DOM after the input is blurred, which would restore
-    // the full suggestion the user was editing away from. See https://github.com/primer/react/issues/4275
-    const isInputFocused = document.activeElement === inputRef.current;
-    if (isInputFocused &&
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
-      inputRef.current.value = autocompleteSuggestion;
-      if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
-        inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
-      }
-    }
-
-    // calling this useEffect when `highlightRemainingText` changes breaks backspace functionality
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
-  useEffect(() => {
-    setInputValue(typeof value !== 'undefined' ? value.toString() : '');
-  }, [value, setInputValue]);
-  return /*#__PURE__*/jsx(Component, {
-    onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
-    onChange: handleInputChange,
-    onKeyDown: handleInputKeyDown,
-    onKeyPress: onInputKeyPress,
-    onKeyUp: handleInputKeyUp,
-    ref: mergedRef,
-    "aria-controls": `${id}-listbox`,
-    "aria-autocomplete": "both",
-    role: "combobox",
-    "aria-expanded": showMenu,
-    "aria-haspopup": "listbox",
-    "aria-owns": `${id}-listbox`,
-    autoComplete: "off",
-    id: id,
-    ...props,
-    "data-component": "Autocomplete.Input"
-  });
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import useSafeTimeout from "../hooks/useSafeTimeout.js";
+import { AutocompleteContext, AutocompleteInputContext } from "./AutocompleteContext.js";
+import TextInput_default from "../TextInput/TextInput.js";
+import { jsx } from "react/jsx-runtime";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+//#region src/Autocomplete/AutocompleteInput.tsx
+const ARROW_KEYS_NAV = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown"]);
+const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = TextInput_default, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, openOnFocus = false, ...props }, forwardedRef) => {
+	const autocompleteContext = useContext(AutocompleteContext);
+	const inputContext = useContext(AutocompleteInputContext);
+	if (autocompleteContext === null || inputContext === null) throw new Error("AutocompleteContext returned null values");
+	const { activeDescendantRef, id, inputRef, setInputValue, setShowMenu, showMenu } = autocompleteContext;
+	const { autocompleteSuggestion = "", inputValue = "", isMenuDirectlyActivated } = inputContext;
+	const mergedRef = useMergedRefs(forwardedRef, inputRef);
+	const [highlightRemainingText, setHighlightRemainingText] = useState(true);
+	const { safeSetTimeout } = useSafeTimeout();
+	const handleInputFocus = (event) => {
+		onFocus === null || onFocus === void 0 || onFocus(event);
+		if (openOnFocus) setShowMenu(true);
+	};
+	const handleInputBlur = useCallback((event) => {
+		onBlur && onBlur(event);
+		safeSetTimeout(() => {
+			if (document.activeElement !== inputRef.current) {
+				setShowMenu(false);
+				if (inputRef.current && autocompleteSuggestion && inputRef.current.value !== inputValue) inputRef.current.value = inputValue;
+			}
+		}, 0);
+	}, [
+		onBlur,
+		setShowMenu,
+		inputRef,
+		safeSetTimeout,
+		autocompleteSuggestion,
+		inputValue
+	]);
+	const handleInputChange = (event) => {
+		onChange && onChange(event);
+		setInputValue(event.currentTarget.value);
+		if (!showMenu) setShowMenu(true);
+	};
+	const handleInputKeyDown = useCallback((event) => {
+		var _inputRef$current;
+		onKeyDown && onKeyDown(event);
+		if (event.key === "Backspace") setHighlightRemainingText(false);
+		if (event.key === "Escape" && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
+			setInputValue("");
+			inputRef.current.value = "";
+		}
+		if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) setShowMenu(true);
+	}, [
+		inputRef,
+		setInputValue,
+		setHighlightRemainingText,
+		onKeyDown,
+		showMenu,
+		setShowMenu
+	]);
+	const handleInputKeyUp = useCallback((event) => {
+		onKeyUp && onKeyUp(event);
+		if (event.key === "Backspace") setHighlightRemainingText(true);
+	}, [setHighlightRemainingText, onKeyUp]);
+	const onInputKeyPress = useCallback((event) => {
+		onKeyPress && onKeyPress(event);
+		if (showMenu && event.key === "Enter" && activeDescendantRef.current) {
+			event.preventDefault();
+			event.nativeEvent.stopImmediatePropagation();
+			const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
+			activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
+		}
+	}, [
+		activeDescendantRef,
+		showMenu,
+		onKeyPress
+	]);
+	useEffect(() => {
+		if (!inputRef.current) return;
+		if (!autocompleteSuggestion) inputRef.current.value = inputValue;
+		if (document.activeElement === inputRef.current && highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
+			inputRef.current.value = autocompleteSuggestion;
+			if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
+		}
+	}, [
+		autocompleteSuggestion,
+		inputValue,
+		inputRef,
+		isMenuDirectlyActivated
+	]);
+	useEffect(() => {
+		setInputValue(typeof value !== "undefined" ? value.toString() : "");
+	}, [value, setInputValue]);
+	return /*#__PURE__*/ jsx(Component, {
+		onFocus: handleInputFocus,
+		onBlur: handleInputBlur,
+		onChange: handleInputChange,
+		onKeyDown: handleInputKeyDown,
+		onKeyPress: onInputKeyPress,
+		onKeyUp: handleInputKeyUp,
+		ref: mergedRef,
+		"aria-controls": `${id}-listbox`,
+		"aria-autocomplete": "both",
+		role: "combobox",
+		"aria-expanded": showMenu,
+		"aria-haspopup": "listbox",
+		"aria-owns": `${id}-listbox`,
+		autoComplete: "off",
+		id,
+		...props,
+		"data-component": "Autocomplete.Input"
+	});
 });
-AutocompleteInput.displayName = 'AutocompleteInput';
-AutocompleteInput.__SLOT__ = Symbol('Autocomplete.Input');
-
+AutocompleteInput.displayName = "AutocompleteInput";
+AutocompleteInput.__SLOT__ = Symbol("Autocomplete.Input");
+//#endregion
 export { AutocompleteInput as default };

package/dist/Autocomplete/AutocompleteMenu.d.ts

@@ -1,76 +1,79 @@
-import React from 'react';
-import type { ActionListItemProps } from '../ActionList';
-import type { ComponentProps, MandateProps } from '../utils/types';
-import type { IconProps } from '@primer/octicons-react';
+import { ComponentProps as ComponentProps$1 } from "../utils/types/ComponentProps.js";
+import { MandateProps } from "../utils/types/MandateProps.js";
+import { ActionListItemProps } from "../ActionList/shared.js";
+import React from "react";
+import { IconProps } from "@primer/octicons-react";
+
+//#region src/Autocomplete/AutocompleteMenu.d.ts
 type OnSelectedChange<T> = (item: T | T[]) => void;
-export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
-    leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
-    text?: string;
-    trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
+type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
+  text?: string;
+  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
 };
 type AutocompleteItemProps<T = Record<string, any>> = AutocompleteMenuItem & {
-    metadata?: T;
+  metadata?: T;
 };
-export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
-    /**
-     * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
-     * This menu item gets appended to the end of the list of options.
-     */
-    addNewItem?: T & {
-        handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
-    };
-    /**
-     * The text that appears in the menu when there are no options in the array passed to the `items` prop.
-     */
-    emptyStateText?: React.ReactNode | false | null;
-    /**
-     * A custom function used to filter the options in the array passed to the `items` prop.
-     * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
-     */
-    filterFn?: (item: T, i: number) => boolean;
-    /**
-     * The options for field values that are displayed in the dropdown menu.
-     * One or more may be selected depending on the value of the `selectionVariant` prop.
-     */
-    items: T[];
-    /**
-     * Whether the data is loaded for the menu items
-     */
-    loading?: boolean;
-    /**
-     * The IDs of the selected items
-     */
-    selectedItemIds: string[];
-    /**
-     * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
-     * By default, selected items are sorted to the top after the user closes the menu.
-     */
-    sortOnCloseFn?: (itemIdA: string, itemIdB: string) => number;
-    /**
-     * Whether there can be one item selected from the menu or multiple items selected from the menu
-     */
-    selectionVariant?: 'single' | 'multiple';
-    /**
-     * Function that gets called when the menu is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The function that is called when an item in the list is selected or deselected
-     */
-    onSelectedChange?: OnSelectedChange<T>;
-    /**
-     * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
-     * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
-     * scrolls when the user highlights an item in the menu that is outside the scroll container
-     */
-    customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>;
-    ['aria-labelledby']: string;
+type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
+  /**
+   * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
+   * This menu item gets appended to the end of the list of options.
+   */
+  addNewItem?: T & {
+    handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
+  };
+  /**
+   * The text that appears in the menu when there are no options in the array passed to the `items` prop.
+   */
+  emptyStateText?: React.ReactNode | false | null;
+  /**
+   * A custom function used to filter the options in the array passed to the `items` prop.
+   * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
+   */
+  filterFn?: (item: T, i: number) => boolean;
+  /**
+   * The options for field values that are displayed in the dropdown menu.
+   * One or more may be selected depending on the value of the `selectionVariant` prop.
+   */
+  items: T[];
+  /**
+   * Whether the data is loaded for the menu items
+   */
+  loading?: boolean;
+  /**
+   * The IDs of the selected items
+   */
+  selectedItemIds: string[];
+  /**
+   * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
+   * By default, selected items are sorted to the top after the user closes the menu.
+   */
+  sortOnCloseFn?: (itemIdA: string, itemIdB: string) => number;
+  /**
+   * Whether there can be one item selected from the menu or multiple items selected from the menu
+   */
+  selectionVariant?: 'single' | 'multiple';
+  /**
+   * Function that gets called when the menu is opened or closed
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The function that is called when an item in the list is selected or deselected
+   */
+  onSelectedChange?: OnSelectedChange<T>;
+  /**
+   * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
+   * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
+   * scrolls when the user highlights an item in the menu that is outside the scroll container
+   */
+  customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>;
+  ['aria-labelledby']: string;
 };
 declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>): React.JSX.Element;
 declare namespace AutocompleteMenu {
-    var displayName: string;
-    var __SLOT__: symbol;
+  var displayName: string;
+  var __SLOT__: symbol;
 }
-export type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
-export default AutocompleteMenu;
-//# sourceMappingURL=AutocompleteMenu.d.ts.map
+type AutocompleteMenuProps = ComponentProps$1<typeof AutocompleteMenu>;
+//#endregion
+export { AutocompleteMenuInternalProps, AutocompleteMenuItem, AutocompleteMenuProps, AutocompleteMenu as default };