@primer/react/lib/ActionList/Divider.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Box = require('../Box/Box.js');
var constants = require('../constants.js');
require('@styled-system/css');
var merge = require('deepmerge');
var clsx = require('clsx');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var ActionList_module = require('./ActionList.module.css.js');
var defaultSxProp = require('../utils/defaultSxProp.js');
var featureflag = require('./featureflag.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var merge__default = /*#__PURE__*/_interopDefault(merge);

/**
 * Visually separates `Item`s or `Group`s in an `ActionList`.
 */
const Divider = ({
  sx = defaultSxProp.defaultSxProp,
  className
}) => {
  const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag);
  if (enabled) {
    if (sx !== defaultSxProp.defaultSxProp) {
      return /*#__PURE__*/React__default.default.createElement(Box, {
        className: clsx.clsx(className, ActionList_module.Divider),
        as: "li",
        "aria-hidden": "true",
        sx: sx,
        "data-component": "ActionList.Divider"
      });
    }
    return /*#__PURE__*/React__default.default.createElement("li", {
      className: clsx.clsx(className, ActionList_module.Divider),
      "aria-hidden": "true",
      "data-component": "ActionList.Divider"
    });
  }
  return /*#__PURE__*/React__default.default.createElement(Box, {
    as: "li",
    "aria-hidden": "true",
    sx: merge__default.default({
      height: 1,
      backgroundColor: 'actionListItem.inlineDivider',
      marginTop: theme => `calc(${constants.get('space.2')(theme)} - 1px)`,
      marginBottom: 2,
      listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
    }, sx),
    className: className,
    "data-component": "ActionList.Divider"
  });
};
Divider.displayName = "Divider";

exports.Divider = Divider;