@primer/react/lib-esm/ActionList/Selection.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { CheckIcon } from '@primer/octicons-react';
import { GroupContext } from './Group.js';
import { ListContext } from './shared.js';
import { VisualContainer } from './Visuals.js';
import classes from './ActionList.module.css.js';
import { warning } from '../utils/warning.js';
import { jsx } from 'react/jsx-runtime';
import Radio from '../Radio/Radio.js';

const Selection = ({
  selected,
  className
}) => {
  const {
    selectionVariant: listSelectionVariant,
    role: listRole
  } = React.useContext(ListContext);
  const {
    selectionVariant: groupSelectionVariant
  } = React.useContext(GroupContext);

  /** selectionVariant in Group can override the selectionVariant in List root */
  /** fallback to selectionVariant from container menu if any (ActionMenu, SelectPanel ) */
  let selectionVariant;
  if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant;else selectionVariant = listSelectionVariant;
  if (!selectionVariant) {
    // if selectionVariant is not set on List, but Item is selected
    // warn in development
    if (selected) {
      process.env.NODE_ENV !== "production" ? warning(true, 'For Item to be selected, ActionList or ActionList.Group should have a selectionVariant defined.') : void 0;
    }
    return null;
  }
  if (selectionVariant === 'radio') {
    return /*#__PURE__*/jsx(VisualContainer, {
      className: className,
      "data-component": "ActionList.Selection",
      children: /*#__PURE__*/jsx(Radio, {
        value: "unused",
        checked: selected,
        "aria-hidden": true,
        tabIndex: -1,
        hidden: true
      })
    });
  }
  if (selectionVariant === 'single' || listRole === 'menu') {
    return /*#__PURE__*/jsx(VisualContainer, {
      className: className,
      "data-component": "ActionList.Selection",
      children: /*#__PURE__*/jsx(CheckIcon, {
        className: classes.SingleSelectCheckmark
      })
    });
  }
  return /*#__PURE__*/jsx(VisualContainer, {
    className: className,
    "data-component": "ActionList.Selection",
    children: /*#__PURE__*/jsx("div", {
      className: classes.MultiSelectCheckbox
    })
  });
};
Selection.displayName = "Selection";

export { Selection };