@primer/react/lib-esm/Button/ButtonBase.js

An implementation of GitHub's Primer Design System using React

import React, { forwardRef } from 'react';
import Box from '../Box/Box.js';
import { getAlignContentSize } from './styles.js';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
import StyledSpinner from '../Spinner/Spinner.js';
import CounterLabel from '../CounterLabel/CounterLabel.js';
import '@primer/behaviors/utils';
import '@primer/behaviors';
import { useId } from '../hooks/useId.js';
import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
import '../live-region/Announce.js';
import '../live-region/AriaAlert.js';
import { AriaStatus } from '../live-region/AriaStatus.js';
import { clsx } from 'clsx';
import classes from './ButtonBase.module.css.js';
import { isElement } from 'react-is';

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); }
const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/React.createElement("span", {
  "data-component": visualName,
  className: clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap)
}, loading ? /*#__PURE__*/React.createElement(StyledSpinner, {
  size: "small"
}) : isElement(Visual) ? Visual : /*#__PURE__*/React.createElement(Visual, null));
renderModuleVisual.displayName = "renderModuleVisual";
const ButtonBase = /*#__PURE__*/forwardRef(({
  children,
  as: Component = 'button',
  sx: sxProp = defaultSxProp,
  ...props
}, forwardedRef) => {
  const {
    leadingVisual: LeadingVisual,
    trailingVisual: TrailingVisual,
    trailingAction: TrailingAction,
    ['aria-describedby']: ariaDescribedBy,
    ['aria-labelledby']: ariaLabelledBy,
    count,
    icon: Icon,
    id,
    variant = 'default',
    size = 'medium',
    alignContent = 'center',
    block = false,
    loading,
    loadingAnnouncement = 'Loading',
    inactive,
    onClick,
    labelWrap,
    className,
    ...rest
  } = props;
  const innerRef = React.useRef(null);
  useRefObjectAsForwardedRef(forwardedRef, innerRef);
  const uuid = useId(id);
  const loadingAnnouncementID = `${uuid}-loading-announcement`;
  if (process.env.NODE_ENV !== "production") {
    /**
     * The Linter yells because it thinks this conditionally calls an effect,
     * but since this is a compile-time flag and not a runtime conditional
     * this is safe, and ensures the entire effect is kept out of prod builds
     * shaving precious bytes from the output, and avoiding mounting a noop effect
     */
    // eslint-disable-next-line react-hooks/rules-of-hooks
    React.useEffect(() => {
      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement) && !(innerRef.current.tagName === 'SUMMARY')) {
        // eslint-disable-next-line no-console
        console.warn('This component should be an instanceof a semantic button or anchor');
      }
    }, [innerRef]);
  }
  if (sxProp !== defaultSxProp) {
    return /*#__PURE__*/React.createElement(ConditionalWrapper
    // If anything is passsed to `loading`, we need the wrapper:
    // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
    // when `loading` is `false`.
    // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
    , {
      if: typeof loading !== 'undefined',
      className: block ? classes.ConditionalWrapper : undefined,
      "data-loading-wrapper": true
    }, /*#__PURE__*/React.createElement(Box, _extends({
      as: Component,
      sx: sxProp,
      "aria-disabled": loading ? true : undefined
    }, rest, {
      ref: innerRef,
      className: clsx(classes.ButtonBase, className),
      "data-block": block ? 'block' : null,
      "data-inactive": inactive ? true : undefined,
      "data-loading": Boolean(loading),
      "data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined,
      "data-size": size,
      "data-variant": variant,
      "data-label-wrap": labelWrap,
      "data-has-count": count !== undefined ? true : undefined,
      "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
      // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
      // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
      // reader announces the button name.
      ,
      "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
      id: id,
      onClick: loading ? undefined : onClick
    }), Icon ? loading ? /*#__PURE__*/React.createElement(StyledSpinner, {
      size: "small"
    }) : isElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
      as: "span",
      "data-component": "buttonContent",
      sx: getAlignContentSize(alignContent),
      className: classes.ButtonContent
    },
    /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
     render a loading spiner in place of the button content. */
    loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(StyledSpinner, loading, 'loadingSpinner', false),
    /* Render a leading visual unless the button is in a loading state.
      Then replace the leading visual with a loading spinner. */
    LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/React.createElement("span", {
      "data-component": "text",
      className: classes.Label,
      id: loading ? `${uuid}-label` : undefined
    }, children),
    /* If there is a count, render a counter label unless there is a trailing visual.
     Then render the counter label as a trailing visual.
     Replace the counter label or the trailing visual with a loading spinner if:
     - the button is in a loading state
     - there is no leading visual to replace with a loading spinner
    */
    count !== undefined && !TrailingVisual ? renderModuleVisual(() => /*#__PURE__*/React.createElement(CounterLabel, {
      className: classes.CounterLabel,
      "data-component": "ButtonCounter"
    }, count), Boolean(loading) && !LeadingVisual, 'trailingVisual', true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null),
    /* If there is a trailing action, render it unless the button is in a loading state
     and there is no leading or trailing visual to replace with a loading spinner. */
    TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction', false))), loading && /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(AriaStatus, {
      id: loadingAnnouncementID
    }, loadingAnnouncement)));
  }
  return /*#__PURE__*/React.createElement(ConditionalWrapper
  // If anything is passsed to `loading`, we need the wrapper:
  // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
  // when `loading` is `false`.
  // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
  , {
    if: typeof loading !== 'undefined',
    className: block ? classes.ConditionalWrapper : undefined,
    "data-loading-wrapper": true
  }, /*#__PURE__*/React.createElement(Component, _extends({
    "aria-disabled": loading ? true : undefined
  }, rest, {
    // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
    ref: innerRef,
    className: clsx(classes.ButtonBase, className),
    "data-block": block ? 'block' : null,
    "data-inactive": inactive ? true : undefined,
    "data-loading": Boolean(loading),
    "data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined,
    "data-size": size,
    "data-variant": variant,
    "data-label-wrap": labelWrap,
    "data-has-count": count !== undefined ? true : undefined,
    "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
    // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
    // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
    // reader announces the button name.
    ,
    "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
    id: id
    // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
    ,
    onClick: loading ? undefined : onClick
  }), Icon ? loading ? /*#__PURE__*/React.createElement(StyledSpinner, {
    size: "small"
  }) : isElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    "data-component": "buttonContent",
    "data-align": alignContent,
    className: classes.ButtonContent
  },
  /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
     render a loading spiner in place of the button content. */
  loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(StyledSpinner, loading, 'loadingSpinner', false),
  /* Render a leading visual unless the button is in a loading state.
     Then replace the leading visual with a loading spinner. */
  LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/React.createElement("span", {
    "data-component": "text",
    className: classes.Label,
    id: loading ? `${uuid}-label` : undefined
  }, children),
  /* If there is a count, render a counter label unless there is a trailing visual.
     Then render the counter label as a trailing visual.
     Replace the counter label or the trailing visual with a loading spinner if:
     - the button is in a loading state
     - there is no leading visual to replace with a loading spinner
  */
  count !== undefined && !TrailingVisual ? renderModuleVisual(() => /*#__PURE__*/React.createElement(CounterLabel, {
    className: classes.CounterLabel,
    "data-component": "ButtonCounter"
  }, count), Boolean(loading) && !LeadingVisual, 'trailingVisual', true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null),
  /* If there is a trailing action, render it unless the button is in a loading state
     and there is no leading or trailing visual to replace with a loading spinner. */
  TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction', false))), loading && /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(AriaStatus, {
    id: loadingAnnouncementID
  }, loadingAnnouncement)));
});

export { ButtonBase };