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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import Box from '../../Box/Box.js';
import { defaultSxProp } from '../../utils/defaultSxProp.js';

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.forwardRef(function Wrapper({
    as: BaseComponent = defaultAs,
    sx: sxProp = defaultSxProp,
    ...rest
  }, ref) {
    const enabled = useFeatureFlag(flag);
    if (enabled) {
      if (sxProp !== defaultSxProp) {
        return /*#__PURE__*/React.createElement(Box, _extends({
          as: BaseComponent
        }, rest, {
          sx: sxProp,
          ref: ref
        }));
      }
      return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
        ref: ref
      }));
    }
    return /*#__PURE__*/React.createElement(Component, _extends({
      as: BaseComponent
    }, rest, {
      sx: sxProp,
      ref: ref
    }));
  });
  return Wrapper;
}

export { toggleStyledComponent };