@primer/components 0.0.0-202111023745 → 0.0.0-2021111122934

package/lib/ActionList/Divider.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+exports.StyledDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledDivider = _styledComponents.default.div.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-42656i-0"
+})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+
+
+exports.StyledDivider = StyledDivider;
+
+function Divider() {
+  return /*#__PURE__*/_react.default.createElement(StyledDivider, null);
+}
+
+Divider.displayName = "Divider";
+
+/**
+ * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
+ * so it can be used inline in an `ActionList`’s `items` prop.
+ * In other words, `items={[ActionList.Divider]}` is supported as a concise
+ * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
+ */
+Divider.renderItem = Divider;

package/lib/ActionList/Group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = Group;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+var _Header = require("./Header");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledGroup = _styledComponents.default.div.withConfig({
+  displayName: "Group__StyledGroup",
+  componentId: "sc-10w5bj9-0"
+})(["", ""], _sx.default);
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+
+
+function Group({
+  header,
+  items,
+  ...props
+}) {
+  return /*#__PURE__*/_react.default.createElement(StyledGroup, props, header && /*#__PURE__*/_react.default.createElement(_Header.Header, header), items);
+}
+
+Group.displayName = "Group";

package/lib/ActionList/Header.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = Header;
+exports.StyledHeader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+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 StyledHeader = _styledComponents.default.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "qmofje-0"
+})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), ({
+  variant
+}) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.muted')), _sx.default);
+/**
+ * Displays the name and description of a `Group`.
+ */
+
+
+exports.StyledHeader = StyledHeader;
+
+function Header({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  children: _children,
+  ...props
+}) {
+  return /*#__PURE__*/_react.default.createElement(StyledHeader, _extends({
+    role: "heading",
+    variant: variant
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+}
+
+Header.displayName = "Header";

package/lib/ActionList/Item.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = exports.TextContainer = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _constants = require("../constants");
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Header = require("./Header");
+
+var _Divider = require("./Divider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _focusZone = require("../behaviors/focusZone");
+
+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); }
+
+const getItemVariant = (variant = 'default', disabled) => {
+  if (disabled) {
+    return {
+      color: (0, _constants.get)('colors.primer.fg.disabled'),
+      iconColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      annotationColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      hoverCursor: 'default'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: (0, _constants.get)('colors.danger.fg'),
+        iconColor: (0, _constants.get)('colors.danger.fg'),
+        annotationColor: (0, _constants.get)('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
+      };
+
+    default:
+      return {
+        color: (0, _constants.get)('colors.fg.default'),
+        iconColor: (0, _constants.get)('colors.fg.muted'),
+        annotationColor: (0, _constants.get)('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
+      };
+  }
+};
+
+const DividedContent = _styledComponents.default.div.withConfig({
+  displayName: "Item__DividedContent",
+  componentId: "jqpvy8-0"
+})(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
+
+const MainContent = _styledComponents.default.div.withConfig({
+  displayName: "Item__MainContent",
+  componentId: "jqpvy8-1"
+})(["align-items:baseline;display:flex;min-width:0;flex-direction:var(--main-content-flex-direction);flex-grow:1;"]);
+
+const StyledItem = _styledComponents.default.div.withConfig({
+  displayName: "Item__StyledItem",
+  componentId: "jqpvy8-2"
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _sx.default);
+
+const TextContainer = _styledComponents.default.span.withConfig({
+  displayName: "Item__TextContainer",
+  componentId: "jqpvy8-3"
+})([""]);
+
+exports.TextContainer = TextContainer;
+
+const BaseVisualContainer = _styledComponents.default.div.withConfig({
+  displayName: "Item__BaseVisualContainer",
+  componentId: "jqpvy8-4"
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+
+const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
+  displayName: "Item__ColoredVisualContainer",
+  componentId: "jqpvy8-5"
+})(["svg{fill:", ";font-size:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).iconColor, (0, _constants.get)('fontSizes.0'));
+const LeadingVisualContainer = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
+  displayName: "Item__LeadingVisualContainer",
+  componentId: "jqpvy8-6"
+})(["display:flex;flex-direction:column;justify-content:center;"]);
+const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
+  displayName: "Item__TrailingContent",
+  componentId: "jqpvy8-7"
+})(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).annotationColor, (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
+
+const DescriptionContainer = _styledComponents.default.span.withConfig({
+  displayName: "Item__DescriptionContainer",
+  componentId: "jqpvy8-8"
+})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
+
+const MultiSelectIcon = _styledComponents.default.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
+  componentId: "jqpvy8-9"
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+
+
+const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
+  const {
+    as: Component,
+    text,
+    description,
+    descriptionVariant = 'inline',
+    selected,
+    selectionVariant,
+    leadingVisual: LeadingVisual,
+    trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
+    trailingText,
+    variant = 'default',
+    showDivider,
+    disabled,
+    onAction,
+    onKeyPress,
+    children,
+    onClick,
+    id,
+    ...props
+  } = itemProps;
+  const labelId = (0, _ssr.useSSRSafeId)();
+  const descriptionId = (0, _ssr.useSSRSafeId)();
+  const keyPressHandler = (0, _react.useCallback)(event => {
+    if (disabled) {
+      return;
+    }
+
+    onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onKeyPress]);
+  const clickHandler = (0, _react.useCallback)(event => {
+    if (disabled) {
+      return;
+    }
+
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+
+    if (!event.defaultPrevented) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onClick]);
+  const {
+    theme
+  } = (0, _ThemeProvider.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
+    tabIndex: disabled ? undefined : -1,
+    variant: variant,
+    showDivider: showDivider,
+    "aria-selected": selected,
+    "aria-labelledby": text ? labelId : undefined,
+    "aria-describedby": description ? descriptionId : undefined
+  }, props, {
+    "data-id": id,
+    onKeyPress: keyPressHandler,
+    onClick: clickHandler
+  }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
+    selected: selected,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.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"
+  }))) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
+  })), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
+    variant: variant,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)), /*#__PURE__*/_react.default.createElement(DividedContent, null, /*#__PURE__*/_react.default.createElement(MainContent, {
+    style: {
+      '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column'
+    }
+  }, children, text ? /*#__PURE__*/_react.default.createElement(TextContainer, {
+    id: labelId
+  }, text) : null, description ? /*#__PURE__*/_react.default.createElement(DescriptionContainer, {
+    id: descriptionId,
+    style: {
+      '--description-container-margin-left': descriptionVariant === 'inline' ? (0, _constants.get)('space.2')(theme) : 0,
+      '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
+    }
+  }, descriptionVariant === 'block' ? description : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    title: description,
+    inline: true,
+    maxWidth: "100%"
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
+});
+
+exports.Item = Item;
+Item.displayName = 'ActionList.Item';

package/lib/ActionList/List.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _Divider = require("./Divider");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _focusZone = require("../behaviors/focusZone");
+
+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); }
+
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props) {
+  return 'groupMetadata' in props;
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+
+
+const StyledList = _styledComponents.default.div.withConfig({
+  displayName: "List__StyledList",
+  componentId: "yr2k7d-0"
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+
+
+function useListVariant(variant = 'inset') {
+  switch (variant) {
+    case 'full':
+      return {
+        headerStyle: {
+          paddingX: (0, _constants.get)('space.2')
+        },
+        itemStyle: {
+          borderRadius: 0
+        }
+      };
+
+    default:
+      return {
+        firstGroupStyle: {
+          marginTop: (0, _constants.get)('space.2')
+        },
+        lastGroupStyle: {
+          marginBottom: (0, _constants.get)('space.2')
+        },
+        itemStyle: {
+          marginX: (0, _constants.get)('space.2')
+        }
+      };
+  }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+
+
+const List = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) => {
+  // Get `sx` prop values for `List` children matching the given `List` style variation.
+  const {
+    firstGroupStyle,
+    lastGroupStyle,
+    headerStyle,
+    itemStyle
+  } = useListVariant(props.variant);
+  /**
+   * Render a `Group` using the first of the following renderers that is defined:
+   * A `Group`-level or `List`-level custom `Group` renderer, or
+   * the default `Group` renderer.
+   */
+
+  const renderGroup = groupProps => {
+    var _ref;
+
+    const GroupComponent = ((_ref = 'renderGroup' in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : props.renderGroup) || _Group.Group;
+    return /*#__PURE__*/_react.default.createElement(GroupComponent, _extends({}, groupProps, {
+      key: groupProps.groupId
+    }));
+  };
+  /**
+   * Render an `Item` using the first of the following renderers that is defined:
+   * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+   * or the default `Item` renderer.
+   */
+
+
+  const renderItem = (itemProps, item, itemIndex) => {
+    var _ref2, _ref3, _itemProps$id;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || _Item.Item;
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
+      showDivider: props.showItemDividers,
+      selectionVariant: props.selectionVariant
+    }, itemProps, {
+      key: key,
+      sx: { ...itemStyle,
+        ...itemProps.sx
+      },
+      item: item
+    }));
+  };
+  /**
+   * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+   */
+
+
+  let groups = []; // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+
+  if (!isGroupedListProps(props)) {
+    // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+    groups = [{
+      items: props.items.map((item, index) => renderItem(item, item, index)),
+      groupId: '0'
+    }];
+  } else {
+    // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+
+    /**
+     * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+     */
+    const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+
+    for (const itemProps of props.items) {
+      var _group$items$length, _group$items, _group$items2;
+
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps.groupId);
+      const itemIndex = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0; // Upsert the group to include the current item (rendered).
+
+      groupMap.set(itemProps.groupId, { ...group,
+        items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
+          showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
+          ...(group && 'renderItem' in group && {
+            renderItem: group.renderItem
+          }),
+          ...itemProps
+        }, itemProps, itemIndex)]
+      });
+    }
+
+    groups = [...groupMap.values()];
+  }
+
+  return /*#__PURE__*/_react.default.createElement(StyledList, _extends({}, props, {
+    ref: forwardedRef
+  }), groups.map(({
+    header,
+    ...groupProps
+  }, index) => {
+    const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === 'filled';
+    const shouldShowDivider = index > 0 && !hasFilledHeader;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: groupProps.groupId
+    }, shouldShowDivider ? /*#__PURE__*/_react.default.createElement(_Divider.Divider, {
+      key: `${groupProps.groupId}-divider`
+    }) : null, renderGroup({
+      sx: { ...(index === 0 && firstGroupStyle),
+        ...(index === groups.length - 1 && lastGroupStyle),
+        ...(index > 0 && !shouldShowDivider && {
+          mt: 2
+        })
+      },
+      ...(header && {
+        header: { ...header,
+          sx: { ...headerStyle,
+            ...header.sx
+          }
+        }
+      }),
+      ...groupProps
+    }));
+  }));
+});
+
+exports.List = List;
+List.displayName = 'ActionList';

package/lib/ActionList/index.js

@@ -0,0 +1,29 @@
+"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 _Divider = require("./Divider");
+
+/**
+ * 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` with an optional icon and description. */
+  Item: _Item.Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider
+});
+exports.ActionList = ActionList;