@primer/components 0.0.0-202198182351 → 0.0.0-20219819465

package/lib-esm/Autocomplete/AutocompleteMenu.js

@@ -0,0 +1,204 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ActionList } from '../ActionList';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { Box, Spinner } from '../';
+import { AutocompleteContext } from './AutocompleteContext';
+import { PlusIcon } from '@primer/octicons-react';
+import { uniqueId } from '../utils/uniqueId';
+import { scrollIntoViewingArea } from '../utils/scrollIntoViewingArea';
+
+const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
+
+function getDefaultItemFilter(filterValue) {
+  return function (item, _i) {
+    var _item$text;
+
+    return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
+  };
+}
+
+function getDefaultOnSelectionChange(setInputValueFn) {
+  return function (itemOrItems) {
+    const {
+      text = ''
+    } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
+    setInputValueFn && setInputValueFn(text);
+  };
+}
+
+const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
+
+function getItemById(itemId, items) {
+  return items.find(item => item.id === itemId);
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+function AutocompleteMenu(props) {
+  const {
+    activeDescendantRef,
+    id,
+    inputRef,
+    inputValue = '',
+    scrollContainerRef,
+    setAutocompleteSuggestion,
+    setShowMenu,
+    setInputValue,
+    setIsMenuDirectlyActivated,
+    setSelectedItemLength,
+    showMenu
+  } = useContext(AutocompleteContext);
+  const {
+    items,
+    selectedItemIds,
+    sortOnCloseFn,
+    emptyStateText,
+    addNewItem,
+    loading,
+    selectionVariant,
+    filterFn = getDefaultItemFilter(inputValue),
+    'aria-labelledby': ariaLabelledBy,
+    onOpenChange,
+    onSelectedChange = getDefaultOnSelectionChange(setInputValue),
+    customScrollContainerRef
+  } = props;
+  const listContainerRef = useRef(null);
+  const [highlightedItem, setHighlightedItem] = useState();
+  const [sortedItemIds, setSortedItemIds] = useState(items.map(({
+    id: itemId
+  }) => itemId));
+  const selectableItems = useMemo(() => items.map(selectableItem => {
+    return { ...selectableItem,
+      role: 'option',
+      id: selectableItem.id,
+      selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
+      onAction: item => {
+        const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
+        const newSelectedItemIds = selectedItemIds.includes(item.id) ? otherSelectedItemIds : [...otherSelectedItemIds, item.id];
+        onSelectedChange && onSelectedChange(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
+
+        if (selectionVariant === 'multiple') {
+          setInputValue && setInputValue('');
+          setAutocompleteSuggestion && setAutocompleteSuggestion('');
+        } else {
+          var _inputRef$current;
+
+          setShowMenu && setShowMenu(false);
+          inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
+        }
+      }
+    };
+  }), [items, selectedItemIds, inputRef, onSelectedChange, selectionVariant, setAutocompleteSuggestion, setInputValue, setShowMenu]);
+  const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
+    acc[curr] = i;
+    return acc;
+  }, {}), [sortedItemIds]);
+  const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter(filterFn).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn]);
+  const allItemsToRender = useMemo(() => [// sorted and filtered selectable items
+  ...sortedAndFilteredItemsToRender, // menu item used for creating a token from whatever is in the text input
+  ...(addNewItem ? [{ ...addNewItem,
+    leadingVisual: () => /*#__PURE__*/React.createElement(PlusIcon, null),
+    onAction: item => {
+      // TODO: make it possible to pass a leadingVisual when using `addNewItem`
+      addNewItem.handleAddItem({ ...item,
+        id: item.id || uniqueId(),
+        leadingVisual: undefined
+      });
+
+      if (selectionVariant === 'multiple') {
+        setInputValue && setInputValue('');
+        setAutocompleteSuggestion && setAutocompleteSuggestion('');
+      }
+    }
+  }] : [])], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue]);
+  useFocusZone({
+    containerRef: listContainerRef,
+    focusOutBehavior: 'wrap',
+    focusableElementFilter: element => {
+      return !(element instanceof HTMLInputElement);
+    },
+    activeDescendantFocus: inputRef,
+    onActiveDescendantChanged: (current, _previous, directlyActivated) => {
+      if (activeDescendantRef) {
+        activeDescendantRef.current = current || null;
+      }
+
+      if (current) {
+        const selectedItem = selectableItems.find(item => item.id.toString() === current.getAttribute('data-id'));
+        setHighlightedItem(selectedItem);
+        setIsMenuDirectlyActivated && setIsMenuDirectlyActivated(directlyActivated);
+      }
+
+      if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
+        scrollIntoViewingArea(current, customScrollContainerRef.current);
+      } else if (current && scrollContainerRef && scrollContainerRef.current && directlyActivated) {
+        scrollIntoViewingArea(current, scrollContainerRef.current);
+      }
+    }
+  }, [loading]);
+  useEffect(() => {
+    var _highlightedItem$text;
+
+    if (!setAutocompleteSuggestion) {
+      return;
+    }
+
+    if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
+      setAutocompleteSuggestion(highlightedItem.text);
+    } else {
+      setAutocompleteSuggestion('');
+    }
+  }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
+  useEffect(() => {
+    const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds)));
+    const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element, index) => element === sortedItemIds[index]);
+
+    if (showMenu === false && !sortResultMatchesState) {
+      setSortedItemIds(itemIdSortResult);
+    }
+
+    onOpenChange && onOpenChange(Boolean(showMenu));
+  }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
+  useEffect(() => {
+    if (selectedItemIds.length) {
+      setSelectedItemLength && setSelectedItemLength(selectedItemIds.length);
+    }
+  }, [selectedItemIds, setSelectedItemLength]);
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: !showMenu ? {
+      // visually hides this label for sighted users
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0'
+    } : {}
+  }, loading ? /*#__PURE__*/React.createElement(Box, {
+    p: 3,
+    display: "flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
+    ref: listContainerRef
+  }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, {
+    selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
+    // on `items` for Autocomplete: `metadata`
+    ,
+    items: allItemsToRender,
+    role: "listbox",
+    id: `${id}-listbox`,
+    "aria-labelledby": ariaLabelledBy
+  }) : /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, emptyStateText)));
+}
+
+AutocompleteMenu.displayName = "AutocompleteMenu";
+AutocompleteMenu.defaultProps = {
+  emptyStateText: 'No selectable options',
+  selectionVariant: 'single'
+};
+AutocompleteMenu.displayName = 'AutocompleteMenu';
+export default AutocompleteMenu;

package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { ComponentProps } from '../utils/types';
+declare type AutocompleteOverlayInternalProps = {
+    /**
+     * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
+     */
+    menuAnchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    children?: React.ReactNode;
+} & Pick<React.AriaAttributes, 'aria-labelledby'>;
+declare const AutocompleteOverlay: React.FC<AutocompleteOverlayInternalProps>;
+export declare type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>;
+export default AutocompleteOverlay;

package/lib-esm/Autocomplete/AutocompleteOverlay.js

@@ -0,0 +1,56 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useContext } from 'react';
+import { useAnchoredPosition } from '../hooks';
+import Overlay from '../Overlay';
+import { AutocompleteContext } from './AutocompleteContext';
+import { useCombinedRefs } from '../hooks/useCombinedRefs';
+
+// TODO: consider making 'aria-labelledby' required
+const AutocompleteOverlay = ({
+  menuAnchorRef,
+  overlayProps,
+  children
+}) => {
+  const {
+    inputRef,
+    scrollContainerRef,
+    selectedItemLength,
+    setShowMenu,
+    showMenu = false
+  } = useContext(AutocompleteContext);
+  const {
+    floatingElementRef,
+    position
+  } = useAnchoredPosition({
+    side: 'outside-bottom',
+    align: 'start',
+    anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
+  }, [showMenu, selectedItemLength]);
+  const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef);
+  const closeOptionList = useCallback(() => {
+    setShowMenu && setShowMenu(false);
+  }, [setShowMenu]);
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Overlay, _extends({
+    returnFocusRef: inputRef,
+    preventFocusOnOpen: true,
+    onClickOutside: closeOptionList,
+    onEscape: closeOptionList,
+    ref: combinedOverlayRef,
+    top: position === null || position === void 0 ? void 0 : position.top,
+    left: position === null || position === void 0 ? void 0 : position.left,
+    visibility: showMenu ? 'visible' : 'hidden',
+    sx: {
+      overflow: 'auto'
+    }
+  }, overlayProps), children);
+};
+
+AutocompleteOverlay.displayName = "AutocompleteOverlay";
+AutocompleteOverlay.displayName = 'AutocompleteOverlay';
+export default AutocompleteOverlay;

package/lib-esm/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Autocomplete';
+export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';

package/lib-esm/Autocomplete/index.js

@@ -0,0 +1 @@
+export { default } from './Autocomplete';

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useCallback, useEffect, useRef } from 'react';
+import { useSSRSafeId } from '@react-aria/ssr';
 import TextInput from '../TextInput';
 import Box from '../Box';
 import { ActionList } from '../ActionList';
@@ -11,36 +12,7 @@ import styled from 'styled-components';
 import { get } from '../constants';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
 import useScrollFlash from '../hooks/useScrollFlash';
-import { useSSRSafeId } from '@react-aria/ssr';
-
-function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
-  const {
-    top: childTop,
-    bottom: childBottom
-  } = child.getBoundingClientRect();
-  const {
-    top: containerTop,
-    bottom: containerBottom
-  } = container.getBoundingClientRect();
-  const isChildTopAboveViewingArea = childTop < containerTop + margin;
-  const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
-
-  if (isChildTopAboveViewingArea) {
-    const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
-    container.scrollTo({
-      behavior,
-      top: scrollHeightToChildTop - margin
-    });
-  } else if (isChildBottomBelowViewingArea) {
-    const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
-    container.scrollTo({
-      behavior,
-      top: scrollHeightToChildBottom + margin
-    });
-  } // either completely in view or outside viewing area on both ends, don't scroll
-
-}
-
+import { scrollIntoViewingArea } from '../utils/scrollIntoViewingArea';
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "yg3jkv-0"
@@ -95,7 +67,7 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
+      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
     }
   }, [items]);
   useScrollFlash(scrollContainerRef);

package/lib-esm/Overlay.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from './utils/types';
 import { TouchOrMouseEvent } from './hooks';
 import { SxProp } from './sx';
 import { AnchorSide } from './behaviors/anchoredPosition';
-declare type StyledOverlayProps = {
+export declare type StyledOverlayProps = {
     width?: keyof typeof widthMap;
     height?: keyof typeof heightMap;
     maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
@@ -40,6 +40,7 @@ export declare type OverlayProps = {
     top: number;
     left: number;
     portalContainerName?: string;
+    preventFocusOnOpen?: boolean;
 } & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,

package/lib-esm/Overlay.js

@@ -92,6 +92,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
   left,
   anchorSide,
   portalContainerName,
+  preventFocusOnOpen,
   ...rest
 }, forwardedRef) => {
   const overlayRef = useRef(null);
@@ -107,7 +108,8 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
     onEscape,
     ignoreClickRefs,
     onClickOutside,
-    initialFocusRef
+    initialFocusRef,
+    preventFocusOnOpen
   });
   useEffect(() => {
     var _combinedRef$current;
@@ -136,9 +138,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
       easing: slideAnimationEasing
     });
   }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
-  return /*#__PURE__*/React.createElement(Portal, {
-    containerName: portalContainerName
-  }, /*#__PURE__*/React.createElement(StyledOverlay, _extends({
+  const styledOverlay = /*#__PURE__*/React.createElement(StyledOverlay, _extends({
     height: height,
     role: role
   }, rest, {
@@ -149,7 +149,10 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
       ...rest.style,
       '--styled-overlay-visibility': visibility
     }
-  })));
+  }));
+  return /*#__PURE__*/React.createElement(Portal, {
+    containerName: portalContainerName
+  }, styledOverlay);
 });
 Overlay.defaultProps = {
   height: 'auto',

package/lib-esm/TextInput.d.ts

@@ -1,22 +1,14 @@
 import React from 'react';
-import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
-import { SxProp } from './sx';
 import { ComponentProps, Merge } from './utils/types';
-declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
-    disabled?: boolean | undefined;
-    hasIcon?: boolean | undefined;
-    block?: boolean | undefined;
-    contrast?: boolean | undefined;
-    variant?: "large" | "small" | undefined;
-} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+import UnstyledTextInput from './_UnstyledTextInput';
+import TextInputWrapper from './_TextInputWrapper';
 declare type NonPassthroughProps = {
     className?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
-} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
-declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof Input>, NonPassthroughProps>;
+} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;
 export default TextInput;

package/lib-esm/TextInput.js

@@ -2,41 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import classnames from 'classnames';
 import React from 'react';
-import styled, { css } from 'styled-components';
-import { maxWidth, minWidth, variant, width } from 'styled-system';
-import { get } from './constants';
-import sx from './sx';
-const sizeVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
-const Input = styled.input.withConfig({
-  displayName: "TextInput__Input",
-  componentId: "sc-1apmpmt-0"
-})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}"]);
-const Wrapper = styled.span.withConfig({
-  displayName: "TextInput__Wrapper",
-  componentId: "sc-1apmpmt-1"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
-  if (props.hasIcon) {
-    return css(["padding:0;"]);
-  } else {
-    return css(["padding:6px 12px;"]);
-  }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx); // Props that are not passed through to Input:
-
+import UnstyledTextInput from './_UnstyledTextInput';
+import TextInputWrapper from './_TextInputWrapper';
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/React.forwardRef(({
   icon: IconComponent,
@@ -54,7 +21,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = classnames(className, 'TextInput-wrapper');
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: wrapperClasses,
     contrast: contrast,
@@ -68,7 +35,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
     variant: variantProp
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: "TextInput-icon"
-  }), /*#__PURE__*/React.createElement(Input, _extends({
+  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
     ref: ref,
     disabled: disabled
   }, inputProps)));