@primer/react/lib/internal/utils/toggleStyledComponent.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var Box = require('../../Box/Box.js');
var defaultSxProp = require('../../utils/defaultSxProp.js');

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

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

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * Utility to toggle rendering a styled component or a "plain" component based
 * on the provided `as` prop. When the provided feature flag is enabled, the
 * props will be passed through to an element or component created with the `as`
 * prop. When it is disabled, the provided styled component is used instead.
 *
 * @param flag - the feature flag that will control whether or not the provided
 * styled component is used
 * @param defaultAs - the default component to use when `as` is not provided
 * @param Component - the styled component that will be used if the feature flag
 * is disabled
 */
function toggleStyledComponent(flag,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
defaultAs, Component) {
  const Wrapper = /*#__PURE__*/React__default.default.forwardRef(function Wrapper({
    as: BaseComponent = defaultAs,
    sx: sxProp = defaultSxProp.defaultSxProp,
    ...rest
  }, ref) {
    const enabled = useFeatureFlag.useFeatureFlag(flag);
    if (enabled) {
      if (sxProp !== defaultSxProp.defaultSxProp) {
        return /*#__PURE__*/React__default.default.createElement(Box, _extends({
          as: BaseComponent
        }, rest, {
          sx: sxProp,
          ref: ref
        }));
      }
      return /*#__PURE__*/React__default.default.createElement(BaseComponent, _extends({}, rest, {
        ref: ref
      }));
    }
    return /*#__PURE__*/React__default.default.createElement(Component, _extends({
      as: BaseComponent
    }, rest, {
      sx: sxProp,
      ref: ref
    }));
  });
  return Wrapper;
}

exports.toggleStyledComponent = toggleStyledComponent;