@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/hooks/useOpenAndCloseFocus.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOpenAndCloseFocus = useOpenAndCloseFocus;
+
+var _react = require("react");
+
+var _iterateFocusableElements = require("../utils/iterateFocusableElements");
+
+function useOpenAndCloseFocus({
+  initialFocusRef,
+  returnFocusRef,
+  containerRef,
+  preventFocusOnOpen
+}) {
+  (0, _react.useEffect)(() => {
+    if (preventFocusOnOpen) {
+      return;
+    }
+
+    const returnRef = returnFocusRef.current;
+
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus();
+    } else if (containerRef.current) {
+      const firstItem = (0, _iterateFocusableElements.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/hooks/useOverlay.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlay = void 0;
+
+var _useOnOutsideClick = require("./useOnOutsideClick");
+
+var _useOpenAndCloseFocus = require("./useOpenAndCloseFocus");
+
+var _useOnEscapePress = require("./useOnEscapePress");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+const useOverlay = ({
+  overlayRef: _overlayRef,
+  returnFocusRef,
+  initialFocusRef,
+  onEscape,
+  ignoreClickRefs,
+  onClickOutside,
+  preventFocusOnOpen
+}) => {
+  const overlayRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(_overlayRef);
+  (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
+    containerRef: overlayRef,
+    returnFocusRef,
+    initialFocusRef,
+    preventFocusOnOpen
+  });
+  (0, _useOnOutsideClick.useOnOutsideClick)({
+    containerRef: overlayRef,
+    ignoreClickRefs,
+    onClickOutside
+  });
+  (0, _useOnEscapePress.useOnEscapePress)(onEscape);
+  return {
+    ref: overlayRef
+  };
+};
+
+exports.useOverlay = useOverlay;

package/lib/hooks/useProvidedRefOrCreate.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function useProvidedRefOrCreate(providedRef) {
+  const createdRef = _react.default.useRef(null);
+
+  return providedRef !== null && providedRef !== void 0 ? providedRef : createdRef;
+}

package/lib/hooks/useProvidedStateOrCreate.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
+
+var _react = require("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.
+ */
+function useProvidedStateOrCreate(externalState, setExternalState, defaultState) {
+  const [internalState, setInternalState] = (0, _react.useState)(defaultState);
+  const state = externalState !== null && externalState !== void 0 ? externalState : internalState;
+  const setState = (0, _react.useCallback)(s => {
+    setInternalState(s);
+    if (setExternalState) setExternalState(s);
+  }, [setExternalState]);
+  return [state, setState];
+}

package/lib/hooks/useRenderForcingRef.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRenderForcingRef = useRenderForcingRef;
+
+var _react = require("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.
+ */
+function useRenderForcingRef() {
+  const [refCurrent, setRefCurrent] = (0, _react.useState)(null);
+  const ref = (0, _react.useRef)(null);
+  ref.current = refCurrent;
+  const setRef = (0, _react.useCallback)(newRef => {
+    ref.current = newRef;
+    setRefCurrent(newRef);
+  }, [ref]);
+  return [ref, setRef];
+}

package/lib/hooks/useResizeObserver.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = useResizeObserver;
+
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useResizeObserver(callback) {
+  (0, _useIsomorphicLayoutEffect.default)(() => {
+    const observer = new window.ResizeObserver(() => callback());
+    observer.observe(document.documentElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback]);
+}

package/lib/hooks/useSafeTimeout.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSafeTimeout;
+
+var _react = require("react");
+
+/**
+ * Safely call `setTimeout` and `clearTimeout` within a component.
+ *
+ * This hook ensures that all timeouts are cleared when the component unmounts.
+ */
+function useSafeTimeout() {
+  const timers = (0, _react.useRef)(new Set());
+  const safeSetTimeout = (0, _react.useCallback)((handler, timeout, ...args) => {
+    const id = window.setTimeout(handler, timeout, ...args);
+    timers.current.add(id);
+    return id;
+  }, []);
+  const safeClearTimeout = (0, _react.useCallback)(id => {
+    clearTimeout(id);
+    timers.current.delete(id);
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      for (const id of timers.current) {
+        clearTimeout(id);
+      }
+    };
+  }, []);
+  return {
+    safeSetTimeout,
+    safeClearTimeout
+  };
+}

package/lib/hooks/useScrollFlash.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScrollFlash;
+
+var _react = require("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
+ */
+function useScrollFlash(scrollContainerRef) {
+  // https://adxlv.computer/projects/flash-scrollers/
+  (0, _react.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/index.js

@@ -21,6 +21,24 @@ Object.defineProperty(exports, "BaseStyles", {
     return _BaseStyles.default;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useTheme;
+  }
+});
+Object.defineProperty(exports, "useColorSchemeVar", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useColorSchemeVar;
+  }
+});
 Object.defineProperty(exports, "BorderBox", {
   enumerable: true,
   get: function () {
@@ -81,10 +99,64 @@ Object.defineProperty(exports, "useDetails", {
     return _useDetails.default;
   }
 });
-Object.defineProperty(exports, "useMouseIntent", {
+Object.defineProperty(exports, "useSafeTimeout", {
+  enumerable: true,
+  get: function () {
+    return _useSafeTimeout.default;
+  }
+});
+Object.defineProperty(exports, "useOnOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _useOnOutsideClick.useOnOutsideClick;
+  }
+});
+Object.defineProperty(exports, "useOpenAndCloseFocus", {
   enumerable: true,
   get: function () {
-    return _useMouseIntent.default;
+    return _useOpenAndCloseFocus.useOpenAndCloseFocus;
+  }
+});
+Object.defineProperty(exports, "useOnEscapePress", {
+  enumerable: true,
+  get: function () {
+    return _useOnEscapePress.useOnEscapePress;
+  }
+});
+Object.defineProperty(exports, "useOverlay", {
+  enumerable: true,
+  get: function () {
+    return _useOverlay.useOverlay;
+  }
+});
+Object.defineProperty(exports, "useConfirm", {
+  enumerable: true,
+  get: function () {
+    return _ConfirmationDialog.useConfirm;
+  }
+});
+Object.defineProperty(exports, "ConfirmationDialog", {
+  enumerable: true,
+  get: function () {
+    return _ConfirmationDialog.ConfirmationDialog;
+  }
+});
+Object.defineProperty(exports, "ActionList", {
+  enumerable: true,
+  get: function () {
+    return _ActionList.ActionList;
+  }
+});
+Object.defineProperty(exports, "ActionMenu", {
+  enumerable: true,
+  get: function () {
+    return _ActionMenu.ActionMenu;
+  }
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.default;
   }
 });
 Object.defineProperty(exports, "Avatar", {
@@ -111,10 +183,16 @@ Object.defineProperty(exports, "BranchName", {
     return _BranchName.default;
   }
 });
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () {
+    return _Breadcrumbs.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
-    return _Breadcrumb.default;
+    return _Breadcrumbs.Breadcrumb;
   }
 });
 Object.defineProperty(exports, "Button", {
@@ -165,6 +243,12 @@ Object.defineProperty(exports, "ButtonGroup", {
     return _Button.ButtonGroup;
   }
 });
+Object.defineProperty(exports, "NewButton", {
+  enumerable: true,
+  get: function () {
+    return _NewButton.NewButton;
+  }
+});
 Object.defineProperty(exports, "Caret", {
   enumerable: true,
   get: function () {
@@ -207,6 +291,18 @@ Object.defineProperty(exports, "Dropdown", {
     return _Dropdown.default;
   }
 });
+Object.defineProperty(exports, "DropdownButton", {
+  enumerable: true,
+  get: function () {
+    return _DropdownMenu.DropdownButton;
+  }
+});
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _DropdownMenu.DropdownMenu;
+  }
+});
 Object.defineProperty(exports, "FilteredSearch", {
   enumerable: true,
   get: function () {
@@ -261,6 +357,12 @@ Object.defineProperty(exports, "Link", {
     return _Link.default;
   }
 });
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function () {
+    return _Overlay.default;
+  }
+});
 Object.defineProperty(exports, "Pagehead", {
   enumerable: true,
   get: function () {
@@ -303,6 +405,12 @@ Object.defineProperty(exports, "SideNav", {
     return _SideNav.default;
   }
 });
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
 Object.defineProperty(exports, "StateLabel", {
   enumerable: true,
   get: function () {
@@ -333,6 +441,12 @@ Object.defineProperty(exports, "TextInput", {
     return _TextInput.default;
   }
 });
+Object.defineProperty(exports, "TextInputWithTokens", {
+  enumerable: true,
+  get: function () {
+    return _TextInputWithTokens.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function () {
@@ -345,6 +459,24 @@ Object.defineProperty(exports, "Timeline", {
     return _Timeline.default;
   }
 });
+Object.defineProperty(exports, "Token", {
+  enumerable: true,
+  get: function () {
+    return _Token.default;
+  }
+});
+Object.defineProperty(exports, "IssueLabelToken", {
+  enumerable: true,
+  get: function () {
+    return _Token.IssueLabelToken;
+  }
+});
+Object.defineProperty(exports, "AvatarToken", {
+  enumerable: true,
+  get: function () {
+    return _Token.AvatarToken;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -363,6 +495,24 @@ Object.defineProperty(exports, "UnderlineNav", {
     return _UnderlineNav.default;
   }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "SSRProvider", {
+  enumerable: true,
+  get: function () {
+    return _ssr.SSRProvider;
+  }
+});
+Object.defineProperty(exports, "useSSRSafeId", {
+  enumerable: true,
+  get: function () {
+    return _ssr.useSSRSafeId;
+  }
+});
 
 var _theme = _interopRequireDefault(require("./theme"));
 
@@ -370,6 +520,8 @@ var _constants = require("./constants");
 
 var _BaseStyles = _interopRequireDefault(require("./BaseStyles"));
 
+var _ThemeProvider = _interopRequireWildcard(require("./ThemeProvider"));
+
 var _BorderBox = _interopRequireDefault(require("./BorderBox"));
 
 var _Box = _interopRequireDefault(require("./Box"));
@@ -382,7 +534,23 @@ var _Position = _interopRequireWildcard(require("./Position"));
 
 var _useDetails = _interopRequireDefault(require("./hooks/useDetails"));
 
-var _useMouseIntent = _interopRequireDefault(require("./hooks/useMouseIntent"));
+var _useSafeTimeout = _interopRequireDefault(require("./hooks/useSafeTimeout"));
+
+var _useOnOutsideClick = require("./hooks/useOnOutsideClick");
+
+var _useOpenAndCloseFocus = require("./hooks/useOpenAndCloseFocus");
+
+var _useOnEscapePress = require("./hooks/useOnEscapePress");
+
+var _useOverlay = require("./hooks/useOverlay");
+
+var _ConfirmationDialog = require("./Dialog/ConfirmationDialog");
+
+var _ActionList = require("./ActionList");
+
+var _ActionMenu = require("./ActionMenu");
+
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 
@@ -392,10 +560,12 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
 
 var _BranchName = _interopRequireDefault(require("./BranchName"));
 
-var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
+var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
 
 var _Button = _interopRequireWildcard(require("./Button"));
 
+var _NewButton = require("./NewButton");
+
 var _Caret = _interopRequireDefault(require("./Caret"));
 
 var _CircleBadge = _interopRequireDefault(require("./CircleBadge"));
@@ -410,6 +580,8 @@ var _Dialog = _interopRequireDefault(require("./Dialog"));
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 
+var _DropdownMenu = require("./DropdownMenu");
+
 var _FilteredSearch = _interopRequireDefault(require("./FilteredSearch"));
 
 var _FilterList = _interopRequireDefault(require("./FilterList"));
@@ -428,6 +600,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 
 var _Link = _interopRequireDefault(require("./Link"));
 
+var _Overlay = _interopRequireDefault(require("./Overlay"));
+
 var _Pagehead = _interopRequireDefault(require("./Pagehead"));
 
 var _Pagination = _interopRequireDefault(require("./Pagination"));
@@ -442,6 +616,8 @@ var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
 
 var _SideNav = _interopRequireDefault(require("./SideNav"));
 
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
 var _StateLabel = _interopRequireDefault(require("./StateLabel"));
 
 var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
@@ -452,18 +628,26 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
 
 var _TextInput = _interopRequireDefault(require("./TextInput"));
 
+var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
+
 var _Text = _interopRequireDefault(require("./Text"));
 
 var _Timeline = _interopRequireDefault(require("./Timeline"));
 
+var _Token = _interopRequireWildcard(require("./Token"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 var _Truncate = _interopRequireDefault(require("./Truncate"));
 
 var _UnderlineNav = _interopRequireDefault(require("./UnderlineNav"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _ssr = require("./utils/ssr");
+
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 }; }

package/lib/polyfills/eventListenerSignal.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.polyfill = polyfill;
+
+/*
+
+This file polyfills the following: https://github.com/whatwg/dom/issues/911
+Once all targeted browsers support this DOM feature, this polyfill can be deleted.
+
+This allows users to pass an AbortSignal to a call to addEventListener as part of the
+AddEventListenerOptions object. When the signal is aborted, the event listener is
+removed.
+
+*/
+let signalSupported = false; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+try {
+  const options = Object.create({}, {
+    signal: {
+      get() {
+        signalSupported = true;
+      }
+
+    }
+  });
+  window.addEventListener('test', noop, options);
+  window.removeEventListener('test', noop, options);
+} catch (e) {
+  /* */
+}
+
+function featureSupported() {
+  return signalSupported;
+}
+
+function monkeyPatch() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+
+  EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
+    if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) {
+      originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
+        this.removeEventListener(name, originalCallback, optionsOrCapture);
+      });
+    }
+
+    return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
+  };
+}
+
+function polyfill() {
+  if (!featureSupported()) {
+    monkeyPatch();
+    signalSupported = true;
+  }
+}

package/lib/script/component-status-project/build.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/ActionList/Divider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;
+export declare namespace Divider {
+    var renderItem: typeof Divider;
+}

package/lib/src/ActionList/Group.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Props for a `Header` to render in the `Group`.
+     */
+    header?: HeaderProps;
+    /**
+     * The id of the group.
+     */
+    groupId?: string;
+    /**
+     * `Items` to render in the `Group`.
+     */
+    items?: JSX.Element[];
+    /**
+     * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;