@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/ListBox/ListBox.js

@@ -0,0 +1,223 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useListBox } from '@react-aria/listbox';
+import { mergeProps } from '@react-aria/utils';
+import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
+import { useCollator } from '@react-aria/i18n';
+import { ListLayout } from '@react-stately/layout';
+import { ListBoxContext } from './ListBoxContext';
+import { Option } from './index.js';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import Loader from '../Loader';
+import ListBoxSection from './ListBoxSection';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var collectionTypes = {
+  ITEM: 'item',
+  LOADER: 'loader',
+  PLACEHOLDER: 'placeholder'
+};
+export function useListBoxLayout(state) {
+  var collator = useCollator({
+    usage: 'search',
+    sensitivity: 'base'
+  });
+  var layout = useMemo(function () {
+    return new ListLayout({
+      estimatedRowHeight: 41,
+      estimatedHeadingHeight: 26,
+      padding: 4,
+      loaderHeight: 41,
+      placeholderHeight: 41,
+      collator: collator
+    });
+  }, [collator]);
+  layout.collection = state.collection;
+  layout.disabledKeys = state.disabledKeys;
+  return layout;
+}
+var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _state$selectionManag;
+
+  var defaultSelectedKeys = props.defaultSelectedKeys,
+      disabledKeys = props.disabledKeys,
+      hasAutoFocus = props.hasAutoFocus,
+      hasFocusWrap = props.hasFocusWrap,
+      hasNoEmptySelection = props.hasNoEmptySelection,
+      hasVirtualFocus = props.hasVirtualFocus,
+      id = props.id,
+      isLoading = props.isLoading,
+      isFocusedOnHover = props.isFocusedOnHover,
+      isSelectedOnPressUp = props.isSelectedOnPressUp,
+      isVirtualized = props.isVirtualized,
+      items = props.items,
+      keyboardDelegate = props.keyboardDelegate,
+      label = props.label,
+      onLoadMore = props.onLoadMore,
+      onScroll = props.onScroll,
+      onSelectionChange = props.onSelectionChange,
+      renderEmptyState = props.renderEmptyState,
+      selectedKeys = props.selectedKeys,
+      selectionMode = props.selectionMode,
+      state = props.state,
+      ariaLabel = props['aria-label'],
+      ariaLabelledby = props['aria-labelledby'],
+      ariaDescribedby = props['aria-describedby'],
+      ariaDetails = props['aria-details'],
+      others = _objectWithoutProperties(props, _excluded);
+
+  var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
+
+  var listBoxOptions = {
+    autoFocus: hasAutoFocus || focusStrategy,
+    defaultSelectedKeys: defaultSelectedKeys,
+    disabledKeys: disabledKeys,
+    disallowEmptySelection: hasNoEmptySelection,
+    id: id,
+    isLoading: isLoading,
+    isVirtualized: isVirtualized,
+    items: items,
+    keyboardDelegate: keyboardDelegate,
+    label: label,
+    onLoadMore: onLoadMore,
+    onScroll: onScroll,
+    onSelectionChange: onSelectionChange,
+    renderEmptyState: renderEmptyState,
+    selectedKeys: selectedKeys,
+    selectionMode: selectionMode,
+    shouldFocusOnHover: isFocusedOnHover,
+    shouldFocusWrap: hasFocusWrap,
+    shouldSelectOnPressUp: isSelectedOnPressUp,
+    shouldUseVirtualFocus: hasVirtualFocus,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-details': ariaDetails
+  };
+  var listBoxRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return listBoxRef.current;
+  });
+  var layout = useListBoxLayout(state);
+  layout.isLoading = props.isLoading; // Get props for the listbox
+
+  var _useListBox = useListBox(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
+    keyboardDelegate: layout,
+    isVirtualized: true
+  }), state, listBoxRef),
+      listBoxProps = _useListBox.listBoxProps;
+
+  var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
+    if (reusableView.viewType === 'section') {
+      return ___EmotionJSX(ListBoxSection, {
+        key: reusableView.key,
+        reusableView: reusableView,
+        header: _findInstanceProperty(children).call(children, function (c) {
+          return c.viewType === 'header';
+        })
+      }, renderChildren(_filterInstanceProperty(children).call(children, function (c) {
+        return c.viewType === 'item';
+      })));
+    }
+
+    return ___EmotionJSX(VirtualizerItem, {
+      key: reusableView.key,
+      reusableView: reusableView,
+      parent: parent
+    });
+  };
+
+  return ___EmotionJSX(ListBoxContext.Provider, {
+    value: state
+  }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(listBoxProps, others), {
+    style: {
+      outline: 'none'
+    },
+    ref: listBoxRef,
+    focusedKey: state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey,
+    sizeToFit: "height",
+    scrollDirection: "vertical",
+    collection: state.collection,
+    renderWrapper: renderWrapper,
+    transitionDuration: 0,
+    layout: layout,
+    isLoading: isLoading,
+    onLoadMore: onLoadMore,
+    shouldUseVirtualFocus: hasVirtualFocus,
+    onScroll: onScroll
+  }), function (type, item) {
+    // Type can be used like so: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxBase.tsx#L129
+    if (type === collectionTypes.ITEM) {
+      return ___EmotionJSX(Option, {
+        key: item.key,
+        item: item,
+        hasVirtualFocus: hasVirtualFocus
+      });
+    } else if (type === collectionTypes.LOADER) {
+      return ___EmotionJSX(Loader, {
+        variant: "loader.withinListbox",
+        "aria-label": "Loading more..."
+      });
+    }
+
+    return null;
+  }));
+});
+ListBox.propTypes = {
+  defaultSelectedKeys: isIterableProp,
+  disabledKeys: isIterableProp,
+  hasAutoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  hasFocusWrap: PropTypes.bool,
+  hasNoEmptySelection: PropTypes.bool,
+  hasVirtualFocus: PropTypes.bool,
+  id: PropTypes.string,
+  isFocusedOnHover: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isSelectedOnPressUp: PropTypes.bool,
+  isVirtualized: PropTypes.bool,
+  items: isIterableProp,
+  keyboardDelegate: PropTypes.shape({}),
+  label: PropTypes.node,
+  onLoadMore: PropTypes.func,
+  onScroll: PropTypes.func,
+  onSelectionChange: PropTypes.func,
+  renderEmptyState: PropTypes.node,
+  selectedKeys: isIterableProp,
+  selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-details': PropTypes.string,
+  state: PropTypes.shape({
+    close: PropTypes.func,
+    collection: PropTypes.shape({}),
+    focusStrategy: PropTypes.string,
+    isOpen: PropTypes.bool,
+    selectionManager: PropTypes.shape({
+      focusedKey: PropTypes.string
+    })
+  })
+};
+ListBox.defaultProps = {
+  state: {}
+};
+export default ListBox;

package/lib/components/ListBox/ListBox.test.js

@@ -0,0 +1,148 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { axe } from 'jest-axe';
+import { useListState } from '@react-stately/list';
+import { render, screen } from '@testing-library/react';
+import { Section } from '@react-stately/collections';
+import ListBox from '.';
+import { Item } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-label';
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var itemsWithSections = [{
+  name: 'Heading 1',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Bar'
+  }, {
+    name: 'Baz'
+  }]
+}];
+var defaultProps = {
+  'data-testid': testId,
+  'aria-label': 'listbox',
+  'aria-labelledby': 'label',
+  items: items
+};
+var defaultWithSectionsProps = {
+  'data-testid': testId,
+  'aria-label': 'listbox',
+  'aria-labelledby': 'label',
+  items: itemsWithSections
+};
+
+var ListBoxWithState = function ListBoxWithState(props) {
+  var state = useListState(props);
+  return ___EmotionJSX(ListBox, _extends({}, props, {
+    state: state
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  });
+};
+
+var ListBoxWithSections = function ListBoxWithSections(props) {
+  var state = useListState(props);
+  return ___EmotionJSX(ListBox, _extends({}, props, {
+    state: state
+  }));
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ListBoxWithState, _extends({}, defaultProps, props)));
+};
+
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ListBoxWithSections, _extends({}, defaultWithSectionsProps, props), function (section) {
+    return (// eslint-disable-next-line testing-library/no-node-access
+      ___EmotionJSX(Section, {
+        key: section.name,
+        title: section.name,
+        items: section.options
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          childItems: item.options
+        }, item.name);
+      })
+    );
+  }));
+};
+
+var offsetWidth;
+var offsetHeight;
+var scrollHeight;
+var onSelectionChange = jest.fn();
+beforeAll(function () {
+  offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+    return 48;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  offsetWidth.mockReset();
+  offsetHeight.mockReset();
+  scrollHeight.mockReset();
+});
+test('default listbox', function () {
+  getComponent();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _getComponent, container, results;
+
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context.next = 4;
+          return axe(container);
+
+        case 4:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('renders sections and items within section', function () {
+  getSectionsComponent();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var section = screen.getByRole('group');
+  expect(section).toBeInTheDocument();
+  var options = screen.getAllByRole('option');
+  expect(options.length).toBe(itemsWithSections[0].options.length);
+});

package/lib/components/ListBox/ListBoxContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var ListBoxContext = /*#__PURE__*/React.createContext(null);

package/lib/components/ListBox/ListBoxSection.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useListBoxSection } from '@react-aria/listbox';
+import { useLocale } from '@react-aria/i18n';
+import { layoutInfoToStyle, useVirtualizerItem } from '@react-aria/virtualizer';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ListBoxSection = function ListBoxSection(props) {
+  var children = props.children,
+      reusableView = props.reusableView,
+      header = props.header;
+  var item = reusableView.content;
+
+  var _useListBoxSection = useListBoxSection({
+    heading: item.rendered,
+    'aria-label': item['aria-label']
+  }),
+      headingProps = _useListBoxSection.headingProps,
+      groupProps = _useListBoxSection.groupProps;
+
+  var headerRef = useRef();
+  useVirtualizerItem({
+    reusableView: header,
+    ref: headerRef
+  });
+
+  var _useLocale = useLocale(),
+      direction = _useLocale.direction;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
+    as: "ul",
+    ref: headerRef,
+    style: layoutInfoToStyle(header.layoutInfo, direction) // uls add a 40px left padding by default
+    ,
+    sx: {
+      paddingInlineStart: '0px'
+    }
+  }, groupProps), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
+    variant: "boxes.listBoxSectionTitle"
+  }), item.rendered)), ___EmotionJSX(Box, {
+    style: layoutInfoToStyle(reusableView.layoutInfo, direction)
+  }, children));
+};
+
+ListBoxSection.propTypes = {
+  header: PropTypes.shape({
+    layoutInfo: PropTypes.shape({})
+  }),
+  reusableView: PropTypes.shape({
+    layoutInfo: PropTypes.shape({}),
+    content: PropTypes.shape({
+      rendered: PropTypes.node,
+      key: PropTypes.string,
+      'aria-label': PropTypes.string
+    })
+  })
+};
+export default ListBoxSection;

package/lib/components/ListBox/Option.js

@@ -0,0 +1,107 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["item", "hasVirtualFocus"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useOption } from '@react-aria/listbox';
+import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
+import { useStatusClasses } from '../../hooks';
+import Box from '../Box';
+import Icon from '../Icon';
+import { ListBoxContext } from './ListBoxContext';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Option = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _state$selectionManag;
+
+  var item = props.item,
+      hasVirtualFocus = props.hasVirtualFocus,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var key = item.key,
+      itemProps = item.props,
+      rendered = item.rendered;
+  var state = useContext(ListBoxContext);
+  var isSeparator = itemProps.isSeparator,
+      dataId = itemProps['data-id']; // Get props for the option element
+
+  var optionRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return optionRef.current;
+  });
+
+  var _useOption = useOption(_objectSpread({
+    key: key,
+    shouldSelectOnPressUp: true,
+    shouldFocusOnHover: true,
+    shouldUseVirtualFocus: hasVirtualFocus,
+    isVirtualized: true
+  }, others), state, optionRef),
+      optionProps = _useOption.optionProps,
+      isDisabled = _useOption.isDisabled,
+      isSelected = _useOption.isSelected,
+      isFocused = _useOption.isFocused;
+
+  var _useStatusClasses = useStatusClasses(null, {
+    isDisabled: isDisabled || isSeparator,
+    isFocused: isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key,
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+  /* Related to UIP-4992
+   * Need to remove these properties to avoid errors in the console on the external app.
+   * By the way, these properties return "undefined", so it shouldn't create issues */
+
+
+  delete optionProps.onPressStart;
+  delete optionProps.onPressUp;
+  return ___EmotionJSX(Box, _extends({
+    as: "li",
+    isRow: true,
+    ref: optionRef,
+    variant: "listBox.option",
+    "data-id": dataId,
+    className: classNames
+  }, optionProps, others), isSelected && ___EmotionJSX(Icon, {
+    icon: CircleSmallIcon
+  }), rendered);
+});
+Option.propTypes = {
+  hasVirtualFocus: PropTypes.bool,
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      'data-id': PropTypes.string,
+      isSeparator: PropTypes.bool
+    }),
+    rendered: PropTypes.node
+  }),
+  state: PropTypes.shape({
+    disabledKeys: isIterableProp,
+    selectionManager: PropTypes.shape({
+      focusedKey: PropTypes.string,
+      isSelected: PropTypes.func
+    })
+  })
+};
+Option.defaultProps = {
+  item: {},
+  state: {}
+};
+export default Option;

package/lib/components/ListBox/index.js

@@ -0,0 +1,2 @@
+export { default } from './ListBox';
+export { default as Option } from './Option';

package/lib/components/ListItem/ListItem.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "isSelected"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useHover } from '@react-aria/interactions';
+import Box from '../Box/Box';
+import { useStatusClasses } from '../../hooks';
+/**
+ * List Item component.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      className = props.className,
+      isSelected = props.isSelected,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isHovered: isHovered,
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Box, _extends({
+    className: classNames,
+    role: "listitem",
+    ref: ref,
+    as: "li",
+    variant: "boxes.listItem",
+    isRow: true
+  }, hoverProps, others), children);
+});
+ListItem.propTypes = {
+  /**
+   * A list of class names to apply to the element
+   */
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+
+  /**
+   * Sets the selected state of the ListItem
+   */
+  isSelected: PropTypes.bool
+};
+ListItem.defaultProps = {
+  isSelected: false
+};
+ListItem.displayName = 'ListItem';
+export default ListItem;

package/lib/components/ListItem/ListItem.stories.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import AccountIcon from 'mdi-react/AccountIcon';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import ListItem from './ListItem';
+import Box from '../Box';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Text from '../Text';
+import Separator from '../Separator';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'ListItem',
+  component: ListItem
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, "Fons Vernall")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    size: 26
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: 20,
+    color: "neutral.20"
+  })))), ___EmotionJSX(Separator, {
+    margin: 0
+  }));
+};
+export var WithSubtitle = function WithSubtitle(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "itemTitle"
+  }, "Fons Vernall"), ___EmotionJSX(Text, {
+    variant: "itemSubtitle",
+    mt: 1
+  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    size: 26
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: 20,
+    color: "neutral.20"
+  })))), ___EmotionJSX(Separator, {
+    margin: 0
+  }));
+};