@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/ActionList2/Visuals.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _constants = require("../constants");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: _Item.TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: (0, _constants.get)('space.3'),
+      maxWidth: _Item.TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+
+exports.LeadingVisualContainer = LeadingVisualContainer;
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+
+const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
+    sx: (0, _sx.merge)({
+      color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+
+exports.LeadingVisual = LeadingVisual;
+LeadingVisual.displayName = "LeadingVisual";
+
+const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+
+exports.TrailingVisual = TrailingVisual;
+TrailingVisual.displayName = "TrailingVisual";

package/lib/ActionList2/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionList = void 0;
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _LinkItem = require("./LinkItem");
+
+var _Divider = require("./Divider");
+
+var _Description = require("./Description");
+
+var _Visuals = require("./Visuals");
+
+/**
+ * Collection of list-related components.
+ */
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` */
+  Item: _Item.Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem: _LinkItem.LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description: _Description.Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual: _Visuals.LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual: _Visuals.TrailingVisual
+});
+exports.ActionList = ActionList;

package/lib/ActionMenu.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionMenu = void 0;
+
+var _List = require("./ActionList/List");
+
+var _Item = require("./ActionList/Item");
+
+var _Divider = require("./ActionList/Divider");
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AnchoredOverlay = require("./AnchoredOverlay");
+
+var _useProvidedStateOrCreate = require("./hooks/useProvidedStateOrCreate");
+
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const ActionMenuItem = props => /*#__PURE__*/_react.default.createElement(_Item.Item, _extends({
+  role: "menuitem"
+}, props));
+
+ActionMenuItem.displayName = "ActionMenuItem";
+ActionMenuItem.displayName = 'ActionMenu.Item';
+
+const ActionMenuBase = ({
+  anchorContent,
+  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_Button.default, props),
+  anchorRef: externalAnchorRef,
+  onAction,
+  open,
+  setOpen,
+  overlayProps,
+  items,
+  ...listProps
+}) => {
+  const [combinedOpenState, setCombinedOpenState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(open, setOpen, false);
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const onOpen = (0, _react.useCallback)(() => setCombinedOpenState(true), [setCombinedOpenState]);
+  const onClose = (0, _react.useCallback)(() => setCombinedOpenState(false), [setCombinedOpenState]);
+  const renderMenuAnchor = (0, _react.useMemo)(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    return props => {
+      return renderAnchor({
+        'aria-label': 'menu',
+        children: anchorContent,
+        ...props
+      });
+    };
+  }, [anchorContent, renderAnchor]);
+  const itemsToRender = (0, _react.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.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: combinedOpenState,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/_react.default.createElement(_List.List, _extends({}, listProps, {
+    role: "menu",
+    items: itemsToRender
+  })));
+};
+
+ActionMenuBase.displayName = "ActionMenuBase";
+ActionMenuBase.displayName = 'ActionMenu';
+const ActionMenu = Object.assign(ActionMenuBase, {
+  Divider: _Divider.Divider,
+  Item: ActionMenuItem
+});
+exports.ActionMenu = ActionMenu;

package/lib/AnchoredOverlay/AnchoredOverlay.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchoredOverlay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Overlay = _interopRequireDefault(require("../Overlay"));
+
+var _useFocusTrap = require("../hooks/useFocusTrap");
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _hooks = require("../hooks");
+
+var _ssr = require("@react-aria/ssr");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+/**
+ * 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.
+ */
+const AnchoredOverlay = ({
+  renderAnchor,
+  anchorRef: externalAnchorRef,
+  children,
+  open,
+  onOpen,
+  onClose,
+  height,
+  width,
+  overlayProps,
+  focusTrapSettings,
+  focusZoneSettings,
+  side,
+  align
+}) => {
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const [overlayRef, updateOverlayRef] = (0, _hooks.useRenderForcingRef)();
+  const anchorId = (0, _ssr.useSSRSafeId)();
+  const onClickOutside = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
+  const onEscape = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
+  const onAnchorKeyDown = (0, _react.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 = (0, _react.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
+  } = (0, _hooks.useAnchoredPosition)({
+    anchorElementRef: anchorRef,
+    floatingElementRef: overlayRef,
+    side,
+    align
+  }, [overlayRef.current]);
+  (0, _react.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]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusZoneSettings
+  });
+  (0, _useFocusTrap.useFocusTrap)({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusTrapSettings
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderAnchor && renderAnchor({
+    ref: anchorRef,
+    id: anchorId,
+    'aria-labelledby': anchorId,
+    'aria-haspopup': 'true',
+    tabIndex: 0,
+    onClick: onAnchorClick,
+    onKeyDown: onAnchorKeyDown
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.default, _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);
+};
+
+exports.AnchoredOverlay = AnchoredOverlay;
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+AnchoredOverlay.defaultProps = {
+  side: 'outside-bottom',
+  align: 'start'
+};

package/lib/AnchoredOverlay/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AnchoredOverlay", {
+  enumerable: true,
+  get: function () {
+    return _AnchoredOverlay.AnchoredOverlay;
+  }
+});
+
+var _AnchoredOverlay = require("./AnchoredOverlay");

package/lib/Autocomplete/Autocomplete.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _AutocompleteContext = require("./AutocompleteContext");
+
+var _AutocompleteInput = _interopRequireDefault(require("./AutocompleteInput"));
+
+var _AutocompleteMenu = _interopRequireDefault(require("./AutocompleteMenu"));
+
+var _AutocompleteOverlay = _interopRequireDefault(require("./AutocompleteOverlay"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 = (0, _react.useRef)(null);
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState);
+  const {
+    inputValue,
+    showMenu,
+    autocompleteSuggestion,
+    isMenuDirectlyActivated,
+    selectedItemLength
+  } = state;
+  const setInputValue = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'inputValue',
+      payload: value
+    });
+  }, []);
+  const setShowMenu = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'showMenu',
+      payload: value
+    });
+  }, []);
+  const setAutocompleteSuggestion = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'autocompleteSuggestion',
+      payload: value
+    });
+  }, []);
+  const setIsMenuDirectlyActivated = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'isMenuDirectlyActivated',
+      payload: value
+    });
+  }, []);
+  const setSelectedItemLength = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'selectedItemLength',
+      payload: value
+    });
+  }, []);
+  const id = (0, _ssr.useSSRSafeId)(idProp);
+  return /*#__PURE__*/_react.default.createElement(_AutocompleteContext.AutocompleteContext.Provider, {
+    value: {
+      activeDescendantRef,
+      autocompleteSuggestion,
+      id,
+      inputRef,
+      inputValue,
+      isMenuDirectlyActivated,
+      scrollContainerRef,
+      selectedItemLength,
+      setAutocompleteSuggestion,
+      setInputValue,
+      setIsMenuDirectlyActivated,
+      setShowMenu,
+      setSelectedItemLength,
+      showMenu
+    }
+  }, children);
+};
+
+Autocomplete.displayName = "Autocomplete";
+
+var _default = Object.assign(Autocomplete, {
+  Input: _AutocompleteInput.default,
+  Menu: _AutocompleteMenu.default,
+  Overlay: _AutocompleteOverlay.default
+});
+
+exports.default = _default;

package/lib/Autocomplete/AutocompleteContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteContext = void 0;
+
+var _react = require("react");
+
+const AutocompleteContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.AutocompleteContext = AutocompleteContext;