fannypack-v5/es/Button/Button.js

An accessible, composable, and friendly React UI Kit

import { createElement as createElement$1, Fragment } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../theme/palette.js';
import { Button as Button$1, useButton } from 'reakit';
import { B as Button$2, a as ButtonIcon, b as ButtonSpinnerWrapper, c as ButtonSpinner } from './styles-7847dc2c.js';
import ConditionalWrap from 'conditional-wrap';
import '../Box/styles-579aeb3a.js';
import { Box } from '../Box/Box.js';
import '../Flex/styles-53e15538.js';
import { Flex } from '../Flex/Flex.js';
import '../Icon/styles-ca55138b.js';
import { Icon } from '../Icon/Icon.js';
import '../Text/styles-00cf45ec.js';
import { Text } from '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import { Spinner } from '../Spinner/Spinner.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var disabled = props.disabled,
      focusable = props.focusable,
      iconAfter = props.iconAfter,
      iconAfterProps = props.iconAfterProps,
      iconBefore = props.iconBefore,
      iconBeforeProps = props.iconBeforeProps,
      spinnerProps = props.spinnerProps,
      unstable_clickOnEnter = props.unstable_clickOnEnter,
      unstable_clickOnSpace = props.unstable_clickOnSpace,
      htmlProps = _objectWithoutPropertiesLoose(props, ["disabled", "focusable", "iconAfter", "iconAfterProps", "iconBefore", "iconBeforeProps", "spinnerProps", "unstable_clickOnEnter", "unstable_clickOnSpace"]);

  var buttonProps = useButton({
    disabled: disabled,
    focusable: focusable,
    unstable_clickOnEnter: unstable_clickOnEnter,
    unstable_clickOnSpace: unstable_clickOnSpace
  }, htmlProps);
  htmlProps = Box.useProps(_objectSpread2(_objectSpread2({}, htmlProps), buttonProps));
  var className = useClassName({
    style: Button$2,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: htmlProps.className
  });
  var iconBeforeClassName = useClassName({
    style: ButtonIcon,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      isBefore: true
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Icon'
  });
  var iconAfterClassName = useClassName({
    style: ButtonIcon,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      isAfter: true
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Icon'
  });
  var spinnerWrapperClassName = useClassName({
    style: ButtonSpinnerWrapper,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'SpinnerWrapper'
  });
  var spinnerClassName = useClassName({
    style: ButtonSpinner,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Spinner'
  });
  var children = /*#__PURE__*/createElement$1(Fragment, null, props.isLoading && /*#__PURE__*/createElement$1(Box, {
    className: spinnerWrapperClassName
  }, /*#__PURE__*/createElement$1(Spinner, _extends({
    use: Flex,
    className: spinnerClassName,
    color: props.variant === 'default' ? props.palette + "Inverted" : props.palette
  }, spinnerProps))), /*#__PURE__*/createElement$1(ConditionalWrap, {
    condition: props.isLoading,
    wrap: function wrap(children) {
      return /*#__PURE__*/createElement$1(Text, null, children);
    }
  }, iconBefore && /*#__PURE__*/createElement$1(Icon, _extends({
    className: iconBeforeClassName,
    icon: iconBefore
  }, iconBeforeProps)), htmlProps.children, iconAfter && /*#__PURE__*/createElement$1(Icon, _extends({
    className: iconAfterClassName,
    icon: iconAfter
  }, iconAfterProps))));
  return _objectSpread2(_objectSpread2({}, htmlProps), {}, {
    className: className,
    children: children
  });
}, {
  defaultProps: {
    disabled: false,
    iconAfter: undefined,
    iconBefore: undefined,
    isLoading: false,
    isStatic: false,
    variant: 'default',
    palette: 'default',
    size: 'default',
    type: 'button'
  },
  themeKey: 'Button'
});
var Button = createComponent(function (props) {
  var buttonProps = useProps(props);
  return createElement({
    children: props.children,
    component: Button$1,
    use: props.use,
    htmlProps: buttonProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Button'
  },
  themeKey: 'Button'
});

export { Button };