@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/ActionList2/Selection.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { CheckIcon } from '@primer/octicons-react';
+import { ListContext } from './List';
+import { GroupContext } from './Group';
+import { LeadingVisualContainer } from './Visuals';
+export const Selection = ({
+  selected
+}) => {
+  const {
+    selectionVariant: listSelectionVariant
+  } = React.useContext(ListContext);
+  const {
+    selectionVariant: groupSelectionVariant
+  } = React.useContext(GroupContext);
+  /** selectionVariant in Group can override the selectionVariant in List root */
+
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
+
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+    return null;
+  }
+
+  if (selectionVariant === 'single') {
+    return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
+  }
+  /**
+   * selectionVariant is multiple
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+
+
+  return /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    sx: {
+      rect: {
+        fill: selected ? 'accent.fg' : 'canvas.default',
+        stroke: selected ? 'accent.fg' : 'border.default',
+        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+
+      },
+      path: {
+        fill: 'fg.onEmphasis',
+        boxShadow: 'shadow.small',
+        opacity: selected ? 1 : 0
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  })));
+};
+Selection.displayName = "Selection";

package/lib-esm/ActionList2/Visuals.js

@@ -0,0 +1,68 @@
+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 from 'react';
+import Box from '../Box';
+import { merge } from '../sx';
+import { get } from '../constants';
+import { getVariantStyles, Slot, TEXT_ROW_HEIGHT } from './Item';
+export const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    sx: merge({
+      height: TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: get('space.3'),
+      maxWidth: TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+export const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/React.createElement(LeadingVisualContainer, _extends({
+    sx: merge({
+      color: getVariantStyles(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+LeadingVisual.displayName = "LeadingVisual";
+export const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    sx: merge({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: getVariantStyles(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+TrailingVisual.displayName = "TrailingVisual";

package/lib-esm/ActionList2/index.js

@@ -0,0 +1,33 @@
+import { List } from './List';
+import { Group } from './Group';
+import { Item } from './Item';
+import { LinkItem } from './LinkItem';
+import { Divider } from './Divider';
+import { Description } from './Description';
+import { LeadingVisual, TrailingVisual } from './Visuals';
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` */
+  Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual
+});

package/lib-esm/ActionMenu.js

@@ -0,0 +1,82 @@
+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 { List } from './ActionList/List';
+import { Item } from './ActionList/Item';
+import { Divider } from './ActionList/Divider';
+import Button from './Button';
+import React, { useCallback, useMemo } from 'react';
+import { AnchoredOverlay } from './AnchoredOverlay';
+import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
+import { useProvidedRefOrCreate } from './hooks';
+
+const ActionMenuItem = props => /*#__PURE__*/React.createElement(Item, _extends({
+  role: "menuitem"
+}, props));
+
+ActionMenuItem.displayName = "ActionMenuItem";
+ActionMenuItem.displayName = 'ActionMenu.Item';
+
+const ActionMenuBase = ({
+  anchorContent,
+  renderAnchor = props => /*#__PURE__*/React.createElement(Button, props),
+  anchorRef: externalAnchorRef,
+  onAction,
+  open,
+  setOpen,
+  overlayProps,
+  items,
+  ...listProps
+}) => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false);
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
+  const renderMenuAnchor = useMemo(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    return props => {
+      return renderAnchor({
+        'aria-label': 'menu',
+        children: anchorContent,
+        ...props
+      });
+    };
+  }, [anchorContent, renderAnchor]);
+  const itemsToRender = useMemo(() => {
+    return items.map(item => {
+      return { ...item,
+        role: 'menuitem',
+        onAction: (props, event) => {
+          var _item$onAction;
+
+          const actionCallback = (_item$onAction = item.onAction) !== null && _item$onAction !== void 0 ? _item$onAction : onAction;
+          actionCallback === null || actionCallback === void 0 ? void 0 : actionCallback(props, event);
+
+          if (!event.defaultPrevented) {
+            onClose();
+          }
+        }
+      };
+    });
+  }, [items, onAction, onClose]);
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: combinedOpenState,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/React.createElement(List, _extends({}, listProps, {
+    role: "menu",
+    items: itemsToRender
+  })));
+};
+
+ActionMenuBase.displayName = "ActionMenuBase";
+ActionMenuBase.displayName = 'ActionMenu';
+export const ActionMenu = Object.assign(ActionMenuBase, {
+  Divider,
+  Item: ActionMenuItem
+});

package/lib-esm/AnchoredOverlay/AnchoredOverlay.js

@@ -0,0 +1,104 @@
+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 } from 'react';
+import Overlay from '../Overlay';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef } from '../hooks';
+import { useSSRSafeId } from '@react-aria/ssr';
+
+/**
+ * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
+ * The overlay can be opened and navigated using keyboard or mouse.
+ */
+export const AnchoredOverlay = ({
+  renderAnchor,
+  anchorRef: externalAnchorRef,
+  children,
+  open,
+  onOpen,
+  onClose,
+  height,
+  width,
+  overlayProps,
+  focusTrapSettings,
+  focusZoneSettings,
+  side,
+  align
+}) => {
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const [overlayRef, updateOverlayRef] = useRenderForcingRef();
+  const anchorId = useSSRSafeId();
+  const onClickOutside = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
+  const onEscape = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
+  const onAnchorKeyDown = useCallback(event => {
+    if (!event.defaultPrevented) {
+      if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-key-press');
+        event.preventDefault();
+      }
+    }
+  }, [open, onOpen]);
+  const onAnchorClick = useCallback(event => {
+    if (event.defaultPrevented || event.button !== 0) {
+      return;
+    }
+
+    if (!open) {
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
+    } else {
+      onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
+    }
+  }, [open, onOpen, onClose]);
+  const {
+    position
+  } = useAnchoredPosition({
+    anchorElementRef: anchorRef,
+    floatingElementRef: overlayRef,
+    side,
+    align
+  }, [overlayRef.current]);
+  useEffect(() => {
+    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
+    if (!open && overlayRef.current) {
+      updateOverlayRef(null);
+    }
+  }, [open, overlayRef, updateOverlayRef]);
+  useFocusZone({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusZoneSettings
+  });
+  useFocusTrap({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusTrapSettings
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderAnchor && renderAnchor({
+    ref: anchorRef,
+    id: anchorId,
+    'aria-labelledby': anchorId,
+    'aria-haspopup': 'true',
+    tabIndex: 0,
+    onClick: onAnchorClick,
+    onKeyDown: onAnchorKeyDown
+  }), open ? /*#__PURE__*/React.createElement(Overlay, _extends({
+    returnFocusRef: anchorRef,
+    onClickOutside: onClickOutside,
+    ignoreClickRefs: [anchorRef],
+    onEscape: onEscape,
+    ref: updateOverlayRef,
+    role: "none",
+    visibility: position ? 'visible' : 'hidden',
+    height: height,
+    width: width,
+    top: (position === null || position === void 0 ? void 0 : position.top) || 0,
+    left: (position === null || position === void 0 ? void 0 : position.left) || 0,
+    anchorSide: position === null || position === void 0 ? void 0 : position.anchorSide
+  }, overlayProps), children) : null);
+};
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+AnchoredOverlay.defaultProps = {
+  side: 'outside-bottom',
+  align: 'start'
+};

package/lib-esm/AnchoredOverlay/index.js

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

package/lib-esm/Autocomplete/Autocomplete.js

@@ -0,0 +1,123 @@
+import React, { useCallback, useReducer, useRef } from 'react';
+import { useSSRSafeId } from '@react-aria/ssr';
+import { AutocompleteContext } from './AutocompleteContext';
+import AutocompleteInput from './AutocompleteInput';
+import AutocompleteMenu from './AutocompleteMenu';
+import AutocompleteOverlay from './AutocompleteOverlay';
+const initialState = {
+  inputValue: '',
+  showMenu: false,
+  isMenuDirectlyActivated: false,
+  autocompleteSuggestion: '',
+  selectedItemLength: 0
+};
+
+const reducer = (state, action) => {
+  const {
+    type,
+    payload
+  } = action;
+
+  switch (type) {
+    case 'inputValue':
+      return { ...state,
+        inputValue: payload
+      };
+
+    case 'showMenu':
+      return { ...state,
+        showMenu: payload
+      };
+
+    case 'isMenuDirectlyActivated':
+      return { ...state,
+        isMenuDirectlyActivated: payload
+      };
+
+    case 'autocompleteSuggestion':
+      return { ...state,
+        autocompleteSuggestion: payload
+      };
+
+    case 'selectedItemLength':
+      return { ...state,
+        selectedItemLength: payload
+      };
+
+    default:
+      return state;
+  }
+};
+
+const Autocomplete = ({
+  children,
+  id: idProp
+}) => {
+  const activeDescendantRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const {
+    inputValue,
+    showMenu,
+    autocompleteSuggestion,
+    isMenuDirectlyActivated,
+    selectedItemLength
+  } = state;
+  const setInputValue = useCallback(value => {
+    dispatch({
+      type: 'inputValue',
+      payload: value
+    });
+  }, []);
+  const setShowMenu = useCallback(value => {
+    dispatch({
+      type: 'showMenu',
+      payload: value
+    });
+  }, []);
+  const setAutocompleteSuggestion = useCallback(value => {
+    dispatch({
+      type: 'autocompleteSuggestion',
+      payload: value
+    });
+  }, []);
+  const setIsMenuDirectlyActivated = useCallback(value => {
+    dispatch({
+      type: 'isMenuDirectlyActivated',
+      payload: value
+    });
+  }, []);
+  const setSelectedItemLength = useCallback(value => {
+    dispatch({
+      type: 'selectedItemLength',
+      payload: value
+    });
+  }, []);
+  const id = useSSRSafeId(idProp);
+  return /*#__PURE__*/React.createElement(AutocompleteContext.Provider, {
+    value: {
+      activeDescendantRef,
+      autocompleteSuggestion,
+      id,
+      inputRef,
+      inputValue,
+      isMenuDirectlyActivated,
+      scrollContainerRef,
+      selectedItemLength,
+      setAutocompleteSuggestion,
+      setInputValue,
+      setIsMenuDirectlyActivated,
+      setShowMenu,
+      setSelectedItemLength,
+      showMenu
+    }
+  }, children);
+};
+
+Autocomplete.displayName = "Autocomplete";
+export default Object.assign(Autocomplete, {
+  Input: AutocompleteInput,
+  Menu: AutocompleteMenu,
+  Overlay: AutocompleteOverlay
+});

package/lib-esm/Autocomplete/AutocompleteContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const AutocompleteContext = /*#__PURE__*/createContext(null);

package/lib-esm/Autocomplete/AutocompleteInput.js

@@ -0,0 +1,138 @@
+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, useEffect, useState } from 'react';
+import { AutocompleteContext } from './AutocompleteContext';
+import TextInput from '../TextInput';
+import { useCombinedRefs } from '../hooks/useCombinedRefs';
+const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
+  as: Component = TextInput,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  onKeyPress,
+  value,
+  ...props
+}, forwardedRef) => {
+  const autocompleteContext = useContext(AutocompleteContext);
+
+  if (autocompleteContext === null) {
+    throw new Error('AutocompleteContext returned null values');
+  }
+
+  const {
+    activeDescendantRef,
+    autocompleteSuggestion = '',
+    id,
+    inputRef,
+    inputValue = '',
+    isMenuDirectlyActivated,
+    setInputValue,
+    setShowMenu,
+    showMenu
+  } = autocompleteContext;
+  const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
+  const [highlightRemainingText, setHighlightRemainingText] = useState(true);
+  const handleInputFocus = useCallback(event => {
+    onFocus && onFocus(event);
+    setShowMenu(true);
+  }, [onFocus, setShowMenu]);
+  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
+
+    setTimeout(() => {
+      if (document.activeElement !== combinedInputRef.current) {
+        setShowMenu(false);
+      }
+    }, 0);
+  }, [onBlur, setShowMenu, combinedInputRef]);
+  const handleInputChange = useCallback(event => {
+    onChange && onChange(event);
+    setInputValue(event.currentTarget.value);
+
+    if (!showMenu) {
+      setShowMenu(true);
+    }
+  }, [onChange, setInputValue, setShowMenu, showMenu]);
+  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 = '';
+    }
+  }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown]);
+  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' highights 'two', but when I 'two', the text input change does not get triggered
+
+
+    if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
+      inputRef.current.value = autocompleteSuggestion;
+
+      if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
+        inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
+      }
+    } // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
+  useEffect(() => {
+    if (value) {
+      setInputValue(value.toString());
+    }
+  }, [value, setInputValue]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown,
+    onKeyPress: onInputKeyPress,
+    onKeyUp: handleInputKeyUp,
+    ref: combinedInputRef,
+    "aria-controls": `${id}-listbox`,
+    "aria-autocomplete": "both",
+    role: "combobox",
+    "aria-expanded": showMenu,
+    "aria-haspopup": "listbox",
+    "aria-owns": `${id}-listbox`,
+    autocomplete: "off"
+  }, props));
+});
+AutocompleteInput.displayName = 'AutocompleteInput';
+export default AutocompleteInput;