@primer/components/lib-esm/FilterList.js

Primer react components

import React from 'react';
import styled from 'styled-components';
import { COMMON, get } from './constants';
import sx from './sx';
const FilterListBase = styled.ul.withConfig({
  displayName: "FilterList__FilterListBase",
  componentId: "sc-1l4pxmz-0"
})(["list-style-type:none;", ";", ";"], COMMON, sx);

const FilterList = ({
  children,
  ...rest
}) => {
  const items = React.Children.map(children, child => {
    return /*#__PURE__*/React.createElement("li", null, child);
  });
  return /*#__PURE__*/React.createElement(FilterListBase, rest, items);
};

FilterList.displayName = "FilterList";
const FilterListItemBase = styled.a.withConfig({
  displayName: "FilterList__FilterListItemBase",
  componentId: "sc-1l4pxmz-1"
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'), props => props.selected ? get('colors.accent.emphasis') : '', get('radii.1'), get('colors.canvas.subtle'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('fontWeights.bold'), COMMON, sx);

function FilterListItem({
  children,
  count,
  ...rest
}) {
  return /*#__PURE__*/React.createElement(FilterListItemBase, rest, count && /*#__PURE__*/React.createElement("span", {
    title: "results",
    className: "count"
  }, count), children);
}

FilterListItem.displayName = "FilterListItem";
FilterList.defaultProps = {
  m: 0,
  p: 0
};
FilterListItem.displayName = 'FilterList.Item';
export default Object.assign(FilterList, {
  Item: FilterListItem
});