@primer/components 0.0.0-202111023745 → 0.0.0-2021111122934

package/lib-esm/hooks/useAnchoredPosition.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { getAnchoredPosition } from '../behaviors/anchoredPosition';
+import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+import { useResizeObserver } from './useResizeObserver';
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
+
+/**
+ * Calculates the top and left values for an absolutely-positioned floating element
+ * to be anchored to some anchor element. Returns refs for the floating element
+ * and the anchor element, along with the position.
+ * @param settings Settings for calculating the anchored position.
+ * @param dependencies Dependencies to determine when to re-calculate the position.
+ * @returns An object of {top: number, left: number} to absolutely-position the
+ * floating element.
+ */
+export function useAnchoredPosition(settings, dependencies = []) {
+  const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
+  const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
+  const [position, setPosition] = React.useState(undefined);
+  const updatePosition = React.useCallback(() => {
+    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+      setPosition(getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings));
+    } else {
+      setPosition(undefined);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [floatingElementRef, anchorElementRef, ...dependencies]);
+  useLayoutEffect(updatePosition, [updatePosition]);
+  useResizeObserver(updatePosition);
+  return {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  };
+}

package/lib-esm/hooks/useCombinedRefs.js

@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
+/**
+ * Creates a ref by combining multiple constituent refs. The ref returned by this hook
+ * should be passed as the ref for the element that needs to be shared. This is
+ * particularly useful when you are using `React.forwardRef` in your component but you
+ * also want to be able to access the local element. This is a small anti-pattern,
+ * though, as it breaks encapsulation.
+ * @param refs
+ */
+
+export function useCombinedRefs(...refs) {
+  const combinedRef = useRef(null);
+  useLayoutEffect(() => {
+    function setRefs(current = null) {
+      for (const ref of refs) {
+        if (!ref) {
+          return;
+        }
+
+        if (typeof ref === 'function') {
+          ref(current);
+        } else {
+          ref.current = current;
+        }
+      }
+    }
+
+    setRefs(combinedRef.current);
+    return () => {
+      // ensure the refs get updated on unmount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      setRefs(combinedRef.current);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...refs, combinedRef.current]);
+  return combinedRef;
+}

package/lib-esm/hooks/useDetails.js

@@ -5,12 +5,18 @@ function useDetails({
   closeOnOutsideClick,
   defaultOpen,
   onClickOutside
-} = {}) {
+}) {
   const [open, setOpen] = useState(defaultOpen);
   const backupRef = useRef(null);
   const customRef = ref !== null && ref !== void 0 ? ref : backupRef;
   const onClickOutsideInternal = useCallback(event => {
-    if (event.target.closest('details') !== customRef.current) {
+    const {
+      current
+    } = customRef;
+    const eventTarget = event.target;
+    const closest = eventTarget.closest('details');
+
+    if (closest !== current) {
       onClickOutside && onClickOutside(event);
 
       if (!event.defaultPrevented) {
@@ -30,7 +36,8 @@ function useDetails({
 
   const handleToggle = e => {
     if (!e.defaultPrevented) {
-      setOpen(e.target.open);
+      const eventTarget = e.target;
+      setOpen(eventTarget.open);
     }
   };
 

package/lib-esm/hooks/useDialog.js

@@ -1,21 +1,24 @@
 import { useCallback, useEffect } from 'react';
 
+const noop = () => null;
+
 function visible(el) {
   return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
 }
 
 function focusable(el) {
-  return el.tabIndex >= 0 && !el.disabled && visible(el);
+  const inputEl = el;
+  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
 }
 
 function useDialog({
   modalRef,
   overlayRef,
   isOpen,
-  onDismiss,
+  onDismiss = noop,
   initialFocusRef,
   closeButtonRef
-} = {}) {
+}) {
   const onClickOutside = useCallback(e => {
     if (modalRef.current && overlayRef.current && !modalRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
       onDismiss();
@@ -39,20 +42,32 @@ function useDialog({
     }
   }, [isOpen, initialFocusRef, closeButtonRef]);
   const getFocusableItem = useCallback((e, movement) => {
-    if (modalRef && modalRef.current) {
+    if (modalRef.current) {
       const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable);
       if (items.length === 0) return;
       e.preventDefault();
       const focusedElement = document.activeElement;
+
+      if (!focusedElement) {
+        return;
+      }
+
       const index = items.indexOf(focusedElement);
       const offsetIndex = index + movement;
       const fallbackIndex = movement === 1 ? 0 : items.length - 1;
-      return items[offsetIndex] || items[fallbackIndex];
+      const focusableItem = items[offsetIndex] || items[fallbackIndex];
+      return focusableItem;
     }
   }, [modalRef]);
   const handleTab = useCallback(e => {
     const movement = e.shiftKey ? -1 : 1;
-    getFocusableItem(e, movement).focus();
+    const focusableItem = getFocusableItem(e, movement);
+
+    if (!focusableItem) {
+      return;
+    }
+
+    focusableItem.focus();
   }, [getFocusableItem]);
   const onKeyDown = useCallback(event => {
     switch (event.key) {

package/lib-esm/hooks/useFocusTrap.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { focusTrap } from '../behaviors/focusTrap';
+import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+
+/**
+ * Hook used to trap focus inside a container. Returns a ref that can be added to the container
+ * that should trap focus.
+ * @param settings {FocusTrapHookSettings}
+ */
+export function useFocusTrap(settings, dependencies = []) {
+  const containerRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.containerRef);
+  const initialFocusRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
+  const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
+  const abortController = React.useRef();
+  const previousFocusedElement = React.useRef(null); // If we are enabling a focus trap and haven't already stored the previously focused element
+  // go ahead an do that so we can restore later when the trap is disabled.
+
+  if (!previousFocusedElement.current && !(settings !== null && settings !== void 0 && settings.disabled)) {
+    previousFocusedElement.current = document.activeElement;
+  } // This function removes the event listeners that enable the focus trap and restores focus
+  // to the previously-focused element (if necessary).
+
+
+  function disableTrap() {
+    var _abortController$curr;
+
+    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+
+    if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+      previousFocusedElement.current.focus();
+      previousFocusedElement.current = null;
+    }
+  }
+
+  React.useEffect(() => {
+    if (containerRef.current instanceof HTMLElement) {
+      if (!disabled) {
+        var _initialFocusRef$curr;
+
+        abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
+        return () => {
+          disableTrap();
+        };
+      } else {
+        disableTrap();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [containerRef, initialFocusRef, disabled, ...dependencies]);
+  return {
+    containerRef,
+    initialFocusRef
+  };
+}

package/lib-esm/hooks/useFocusZone.js

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { focusZone } from '../behaviors/focusZone';
+import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+export function useFocusZone(settings = {}, dependencies = []) {
+  const containerRef = useProvidedRefOrCreate(settings.containerRef);
+  const useActiveDescendant = !!settings.activeDescendantFocus;
+  const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
+  const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef);
+  const disabled = settings.disabled;
+  const abortController = React.useRef();
+  useEffect(() => {
+    if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+      if (!disabled) {
+        var _activeDescendantCont;
+
+        const vanillaSettings = { ...settings,
+          activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : undefined
+        };
+        abortController.current = focusZone(containerRef.current, vanillaSettings);
+        return () => {
+          var _abortController$curr;
+
+          (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+        };
+      } else {
+        var _abortController$curr2;
+
+        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [disabled, ...dependencies]);
+  return {
+    containerRef,
+    activeDescendantControlRef
+  };
+}

package/lib-esm/hooks/useOnEscapePress.js

@@ -0,0 +1,59 @@
+import { useEffect, useCallback } from 'react';
+const handlers = [];
+/**
+ * Calls all handlers in reverse order
+ * @param event The KeyboardEvent generated by the Escape keydown.
+ */
+
+function handleEscape(event) {
+  if (event.key === 'Escape' && !event.defaultPrevented) {
+    for (let i = handlers.length - 1; i >= 0; --i) {
+      handlers[i](event); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+      if (event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+/**
+ * Sets up a `keydown` listener on `window.document`. If
+ * 1) The pressed key is "Escape", and
+ * 2) The event has not had `.preventDefault()` called
+ * The given callback will be executed.
+ *
+ * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
+ * callbacks will occur in reverse order. In other words, if a parent component
+ * and a child component both call `useOnEscapePress`, when the user presses
+ * Escape, the child component's callback will execute, followed by the parent's
+ * callback. Each callback has the chance to call `.preventDefault()` on the
+ * event to prevent further callbacks.
+ *
+ * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
+ * when the Escape key is pressed. The KeyboardEvent generated by the Escape
+ * keypress is passed as the only argument.
+ *
+ * @param callbackDependencies {React.DependencyList} The dependencies of the given
+ * `onEscape` callback for memoization. Omit this param if the callback is already
+ * memoized. See `React.useCallback` for more info on memoization.
+ */
+
+
+export const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const escapeCallback = useCallback(onEscape, callbackDependencies);
+  useEffect(() => {
+    if (handlers.length === 0) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    handlers.push(escapeCallback);
+    return () => {
+      handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
+
+      if (handlers.length === 0) {
+        document.removeEventListener('keydown', handleEscape);
+      }
+    };
+  }, [escapeCallback]);
+};

package/lib-esm/hooks/useOnOutsideClick.js

@@ -0,0 +1,79 @@
+import { useEffect, useCallback, useMemo } from 'react';
+// Because events are handled at the document level, we provide a mechanism for early return.
+const stopPropagation = true;
+/**
+ * Calls all handlers in reverse order
+ * @param event The MouseEvent generated by the click event.
+ */
+
+function handleClick(event) {
+  if (!event.defaultPrevented) {
+    for (const handler of Object.values(registry).reverse()) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (handler(event) === stopPropagation || event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+
+const registry = {};
+
+function register(id, handler) {
+  registry[id] = handler;
+}
+
+function deregister(id) {
+  delete registry[id];
+} // For auto-incrementing unique identifiers for registered handlers.
+
+
+let handlerId = 0;
+export const useOnOutsideClick = ({
+  containerRef,
+  ignoreClickRefs,
+  onClickOutside
+}) => {
+  const id = useMemo(() => handlerId++, []);
+  const handler = useCallback(event => {
+    var _containerRef$current;
+
+    // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
+    if (event instanceof MouseEvent && event.button > 0) {
+      return stopPropagation;
+    } // don't call handler if the click happened inside of the container
+
+
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+      return stopPropagation;
+    } // don't call handler if click happened on an ignored ref
+
+
+    if (ignoreClickRefs && ignoreClickRefs.some(({
+      current
+    }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) {
+      return stopPropagation;
+    }
+
+    onClickOutside(event);
+  }, [containerRef, ignoreClickRefs, onClickOutside]);
+  useEffect(() => {
+    if (Object.keys(registry).length === 0) {
+      // use capture to ensure we get all events
+      document.addEventListener('mousedown', handleClick, {
+        capture: true
+      });
+    }
+
+    register(id, handler);
+    return () => {
+      deregister(id);
+
+      if (Object.keys(registry).length === 0) {
+        document.removeEventListener('mousedown', handleClick, {
+          capture: true
+        });
+      }
+    };
+  }, [id, handler]);
+};

package/lib-esm/hooks/useOpenAndCloseFocus.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { iterateFocusableElements } from '../utils/iterateFocusableElements';
+export function useOpenAndCloseFocus({
+  initialFocusRef,
+  returnFocusRef,
+  containerRef,
+  preventFocusOnOpen
+}) {
+  useEffect(() => {
+    if (preventFocusOnOpen) {
+      return;
+    }
+
+    const returnRef = returnFocusRef.current;
+
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus();
+    } else if (containerRef.current) {
+      const firstItem = iterateFocusableElements(containerRef.current).next().value;
+      firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+    }
+
+    return function () {
+      returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
+    };
+  }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
+}

package/lib-esm/hooks/useOverlay.js

@@ -0,0 +1,30 @@
+import { useOnOutsideClick } from './useOnOutsideClick';
+import { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
+import { useOnEscapePress } from './useOnEscapePress';
+import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+export const useOverlay = ({
+  overlayRef: _overlayRef,
+  returnFocusRef,
+  initialFocusRef,
+  onEscape,
+  ignoreClickRefs,
+  onClickOutside,
+  preventFocusOnOpen
+}) => {
+  const overlayRef = useProvidedRefOrCreate(_overlayRef);
+  useOpenAndCloseFocus({
+    containerRef: overlayRef,
+    returnFocusRef,
+    initialFocusRef,
+    preventFocusOnOpen
+  });
+  useOnOutsideClick({
+    containerRef: overlayRef,
+    ignoreClickRefs,
+    onClickOutside
+  });
+  useOnEscapePress(onEscape);
+  return {
+    ref: overlayRef
+  };
+};

package/lib-esm/hooks/useProvidedRefOrCreate.js

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * There are some situations where we only want to create a new ref if one is not provided to a component
+ * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
+ * only in the situations where the ref is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ * @type TRef The type of the RefObject which should be created.
+ */
+
+export function useProvidedRefOrCreate(providedRef) {
+  const createdRef = React.useRef(null);
+  return providedRef !== null && providedRef !== void 0 ? providedRef : createdRef;
+}

package/lib-esm/hooks/useProvidedStateOrCreate.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+/**
+ * There are some situations where we want to give users the option to control state externally with their own state handlers
+ * or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
+ * only in the situations where the state is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param externalState The state to use - if undefined, will use the state from a call to React.useState
+ * @param setExternalState The setState to use - if undefined, will use the setState from a call to React.useState
+ * @param defaultState The defaultState to use, if using internal state.
+ */
+
+export function useProvidedStateOrCreate(externalState, setExternalState, defaultState) {
+  const [internalState, setInternalState] = useState(defaultState);
+  const state = externalState !== null && externalState !== void 0 ? externalState : internalState;
+  const setState = useCallback(s => {
+    setInternalState(s);
+    if (setExternalState) setExternalState(s);
+  }, [setExternalState]);
+  return [state, setState];
+}

package/lib-esm/hooks/useRenderForcingRef.js

@@ -0,0 +1,18 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * There are certain situations where a ref might be set after the current render cycle for a
+ * component has finished.  e.g. a forward ref from a conditionally rendered child component.
+ * In these situations, we need to force a re-render, which is done here by the useState hook.
+ * @type TRef The type of the RefObject which should be created.
+ */
+
+export function useRenderForcingRef() {
+  const [refCurrent, setRefCurrent] = useState(null);
+  const ref = useRef(null);
+  ref.current = refCurrent;
+  const setRef = useCallback(newRef => {
+    ref.current = newRef;
+    setRefCurrent(newRef);
+  }, [ref]);
+  return [ref, setRef];
+}

package/lib-esm/hooks/useResizeObserver.js

@@ -0,0 +1,10 @@
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
+export function useResizeObserver(callback) {
+  useLayoutEffect(() => {
+    const observer = new window.ResizeObserver(() => callback());
+    observer.observe(document.documentElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback]);
+}

package/lib-esm/hooks/useSafeTimeout.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Safely call `setTimeout` and `clearTimeout` within a component.
+ *
+ * This hook ensures that all timeouts are cleared when the component unmounts.
+ */
+export default function useSafeTimeout() {
+  const timers = useRef(new Set());
+  const safeSetTimeout = useCallback((handler, timeout, ...args) => {
+    const id = window.setTimeout(handler, timeout, ...args);
+    timers.current.add(id);
+    return id;
+  }, []);
+  const safeClearTimeout = useCallback(id => {
+    clearTimeout(id);
+    timers.current.delete(id);
+  }, []);
+  useEffect(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      for (const id of timers.current) {
+        clearTimeout(id);
+      }
+    };
+  }, []);
+  return {
+    safeSetTimeout,
+    safeClearTimeout
+  };
+}

package/lib-esm/hooks/useScrollFlash.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+/**
+ * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+ * @param scrollContainerRef The ref of the scrollable content
+ */
+
+export default function useScrollFlash(scrollContainerRef) {
+  // https://adxlv.computer/projects/flash-scrollers/
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+
+    if (!scrollContainer) {
+      return;
+    }
+
+    const currentScroll = scrollContainer.scrollTop;
+    const maxScroll = scrollContainer.scrollHeight;
+    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
+    scrollContainer.scrollTop = altScroll;
+    scrollContainer.scrollTop = currentScroll;
+  }, [scrollContainerRef]);
+}

package/lib-esm/index.js

@@ -1,29 +1,43 @@
 export { default as theme } from './theme';
 export { get as themeGet } from './constants';
-export { default as BaseStyles } from './BaseStyles'; // Layout
-
+export { default as BaseStyles } from './BaseStyles';
+export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
+// Layout
 export { default as BorderBox } from './BorderBox';
 export { default as Box } from './Box';
 export { default as Flex } from './Flex';
 export { default as Grid } from './Grid';
-export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position'; // Hooks
-
+export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position';
+// Hooks
 export { default as useDetails } from './hooks/useDetails';
-export { default as useMouseIntent } from './hooks/useMouseIntent'; // Components
+export { default as useSafeTimeout } from './hooks/useSafeTimeout';
+export { useOnOutsideClick } from './hooks/useOnOutsideClick';
+export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
+export { useOnEscapePress } from './hooks/useOnEscapePress';
+export { useOverlay } from './hooks/useOverlay';
+export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
+export { ActionList } from './ActionList';
+export { ActionMenu } from './ActionMenu';
+export { default as Autocomplete } from './Autocomplete';
 export { default as Avatar } from './Avatar';
 export { default as AvatarPair } from './AvatarPair';
 export { default as AvatarStack } from './AvatarStack';
 export { default as BranchName } from './BranchName';
-export { default as Breadcrumb } from './Breadcrumb';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';
 export { default as CircleOcticon } from './CircleOcticon';
 export { default as CounterLabel } from './CounterLabel';
 export { default as Details } from './Details';
 export { default as Dialog } from './Dialog';
+export { ConfirmationDialog } from './Dialog/ConfirmationDialog';
 export { default as Dropdown } from './Dropdown';
+export { DropdownButton, DropdownMenu } from './DropdownMenu'; // not exporting new DropdownMenu types yet due to conflict with Dropdown types above
+// export type {DropdownButtonProps, DropdownMenuProps} from './DropdownMenu'
+
 export { default as FilteredSearch } from './FilteredSearch';
 export { default as FilterList } from './FilterList';
 export { default as Flash } from './Flash';
@@ -33,20 +47,28 @@ export { default as Heading } from './Heading';
 export { default as LabelGroup } from './LabelGroup';
 export { default as Label } from './Label';
 export { default as Link } from './Link';
+export { default as Overlay } from './Overlay';
 export { default as Pagehead } from './Pagehead';
 export { default as Pagination } from './Pagination';
 export { default as PointerBox } from './PointerBox';
 export { default as Popover } from './Popover';
+// export {default as Portal, registerPortalRoot} from './Portal'
+// export type {PortalProps} from './Portal'
 export { default as ProgressBar } from './ProgressBar';
 export { default as SelectMenu } from './SelectMenu';
 export { default as SideNav } from './SideNav';
+export { default as Spinner } from './Spinner';
 export { default as StateLabel } from './StateLabel';
 export { default as StyledOcticon } from './StyledOcticon';
 export { default as SubNav } from './SubNav';
 export { default as TabNav } from './TabNav';
 export { default as TextInput } from './TextInput';
+export { default as TextInputWithTokens } from './TextInputWithTokens';
 export { default as Text } from './Text';
 export { default as Timeline } from './Timeline';
+export { default as Token, IssueLabelToken, AvatarToken } from './Token';
 export { default as Tooltip } from './Tooltip';
 export { default as Truncate } from './Truncate';
-export { default as UnderlineNav } from './UnderlineNav';
+export { default as UnderlineNav } from './UnderlineNav';
+export { default as Checkbox } from './Checkbox';
+export { SSRProvider, useSSRSafeId } from './utils/ssr';