@spark-web/button 1.5.2 → 1.5.4-poc-simple.0

package/dist/spark-web-button.esm.js

@@ -1,483 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { Box } from '@spark-web/box';
-import { useComposedRefs } from '@spark-web/utils';
-import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import { css } from '@emotion/css';
-import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
-import { Spinner } from '@spark-web/spinner';
-import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
-import { useLinkComponent } from '@spark-web/link';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-
-var _excluded$2 = ["onClick", "disabled", "type"];
-var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var onClickProp = _ref.onClick,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
-    consumerProps = _objectWithoutProperties(_ref, _excluded$2);
-  var internalRef = useRef(null);
-  var composedRef = useComposedRefs(internalRef, forwardedRef);
-  /**
-   * In Safari buttons are not focused automatically by the browser once
-   * pressed, the default behaviour is to focus the nearest focusable ancestor.
-   * To fix this we need to manually focus the button element after the user
-   * presses the element.
-   */
-  var onClick = useCallback(function (event) {
-    var _internalRef$current;
-    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
-    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
-    preventableClickHandler(event);
-  }, [disabled, onClickProp]);
-  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-    as: "button",
-    ref: composedRef
-    // Hide aria-disabled attribute when button is not disabled
-    ,
-    "aria-disabled": disabled || undefined,
-    onClick: onClick,
-    type: type
-  }));
-});
-BaseButton.displayName = 'BaseButton';
-
-/**
- * handle "disabled" behaviour w/o disabling buttons
- * @see https://axesslab.com/disabled-buttons-suck/
- */
-function getPreventableClickHandler(onClick, disabled) {
-  return function handleClick(event) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick === null || onClick === void 0 || onClick(event);
-    }
-  };
-}
-
-var highDisabledStyles = {
-  backgroundDisabled: 'disabled',
-  borderDisabled: 'fieldDisabled',
-  textToneDisabled: 'neutralInverted'
-};
-var highDisabledAltStyles = {
-  backgroundDisabled: 'neutral',
-  borderDisabled: 'standard',
-  textToneDisabled: 'placeholder'
-};
-var lowDisabledStyles = {
-  backgroundDisabled: 'inputDisabled',
-  textToneDisabled: 'disabled'
-};
-var lowDisabledAltStyles = {
-  backgroundDisabled: 'inputDisabled',
-  borderDisabled: 'fieldDisabled',
-  textToneDisabled: 'disabled'
-};
-var noneDisabledStyles = {
-  backgroundDisabled: 'neutral',
-  textToneDisabled: 'disabled'
-};
-var variants = {
-  high: {
-    primary: _objectSpread({
-      background: 'primary',
-      backgroundHover: 'primaryHover',
-      backgroundActive: 'primaryActive'
-    }, highDisabledStyles),
-    secondary: _objectSpread({
-      background: 'secondary',
-      backgroundHover: 'secondaryHover',
-      backgroundActive: 'secondaryActive'
-    }, highDisabledStyles),
-    neutral: _objectSpread({
-      background: 'neutral',
-      border: 'field',
-      backgroundHover: 'neutralHover',
-      backgroundActive: 'neutralActive'
-    }, highDisabledAltStyles),
-    positive: _objectSpread({
-      background: 'positive',
-      backgroundHover: 'positiveHover',
-      backgroundActive: 'positiveActive'
-    }, highDisabledStyles),
-    critical: _objectSpread({
-      background: 'critical',
-      backgroundHover: 'criticalHover',
-      backgroundActive: 'criticalActive'
-    }, highDisabledStyles),
-    caution: undefined,
-    info: undefined
-  },
-  low: {
-    primary: _objectSpread({
-      background: 'surface',
-      border: 'primary',
-      borderWidth: 'large',
-      textTone: 'primary',
-      backgroundHover: 'none',
-      borderHover: 'primaryHover',
-      textToneHover: 'primaryHover',
-      backgroundActive: 'none',
-      borderActive: 'primaryActive',
-      textToneActive: 'primaryActive'
-    }, lowDisabledAltStyles),
-    secondary: _objectSpread({
-      background: 'surface',
-      border: 'secondary',
-      borderWidth: 'large',
-      textTone: 'secondary',
-      backgroundHover: 'none',
-      borderHover: 'secondaryHover',
-      textToneHover: 'secondaryHover',
-      backgroundActive: 'none',
-      borderActive: 'secondaryActive',
-      textToneActive: 'secondaryActive'
-    }, lowDisabledAltStyles),
-    neutral: _objectSpread({
-      background: 'neutralLow',
-      backgroundHover: 'neutralLowHover',
-      backgroundActive: 'neutralLowActive'
-    }, lowDisabledStyles),
-    positive: _objectSpread({
-      background: 'positiveLow',
-      backgroundHover: 'positiveLowHover',
-      backgroundActive: 'positiveLowActive'
-    }, lowDisabledStyles),
-    caution: _objectSpread({
-      background: 'cautionLow',
-      backgroundHover: 'cautionLowHover',
-      backgroundActive: 'cautionLowActive'
-    }, lowDisabledStyles),
-    critical: _objectSpread({
-      background: 'criticalLow',
-      backgroundHover: 'criticalLowHover',
-      backgroundActive: 'criticalLowActive'
-    }, lowDisabledStyles),
-    info: _objectSpread({
-      background: 'infoLow',
-      backgroundHover: 'infoLowHover',
-      backgroundActive: 'infoLowActive'
-    }, lowDisabledStyles)
-  },
-  none: {
-    primary: _objectSpread({
-      background: 'surface',
-      textTone: 'primaryActive',
-      backgroundHover: 'primaryLowHover',
-      backgroundActive: 'primaryLowActive'
-    }, noneDisabledStyles),
-    secondary: _objectSpread({
-      background: 'surface',
-      textTone: 'secondaryActive',
-      backgroundHover: 'secondaryLowHover',
-      backgroundActive: 'secondaryLowActive'
-    }, noneDisabledStyles),
-    neutral: _objectSpread({
-      background: 'surface',
-      textTone: 'neutral',
-      backgroundHover: 'neutralLowHover',
-      backgroundActive: 'neutralLowActive'
-    }, noneDisabledStyles),
-    positive: _objectSpread({
-      background: 'surface',
-      textTone: 'positive',
-      backgroundHover: 'positiveLowHover',
-      backgroundActive: 'positiveLowActive'
-    }, noneDisabledStyles),
-    caution: _objectSpread({
-      background: 'surface',
-      textTone: 'caution',
-      backgroundHover: 'cautionLowHover',
-      backgroundActive: 'cautionLowActive'
-    }, noneDisabledStyles),
-    critical: _objectSpread({
-      background: 'surface',
-      textTone: 'critical',
-      backgroundHover: 'criticalLowHover',
-      backgroundActive: 'criticalLowActive'
-    }, noneDisabledStyles),
-    info: _objectSpread({
-      background: 'surface',
-      textTone: 'info',
-      backgroundHover: 'infoLowHover',
-      backgroundActive: 'infoLowActive'
-    }, noneDisabledStyles)
-  }
-};
-var mapTokens = {
-  fontSize: {
-    medium: 'small',
-    large: 'standard'
-  },
-  size: {
-    medium: 'medium',
-    large: 'large'
-  },
-  spacing: {
-    medium: 'medium',
-    large: 'xlarge'
-  }
-};
-
-var resolveButtonChildren = function resolveButtonChildren(_ref) {
-  var children = _ref.children,
-    isLoading = _ref.isLoading,
-    prominence = _ref.prominence,
-    size = _ref.size,
-    tone = _ref.tone;
-  var variant = variants[prominence][tone];
-  return Children.map(children, function (child) {
-    if (typeof child === 'string' || typeof child === 'number') {
-      return /*#__PURE__*/jsx(HiddenWhenLoading, {
-        isLoading: isLoading,
-        children: /*#__PURE__*/jsx(Text, {
-          as: "span",
-          baseline: false,
-          overflowStrategy: "nowrap",
-          weight: "semibold",
-          size: mapTokens.fontSize[size],
-          tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
-          children: child
-        })
-      });
-    }
-    if ( /*#__PURE__*/isValidElement(child)) {
-      return /*#__PURE__*/jsx(HiddenWhenLoading, {
-        isLoading: isLoading,
-        children: /*#__PURE__*/cloneElement(child, {
-          // Dismiss buttons need to be `xxsmall`
-          // For everything else, we force them to be `xsmall`
-          size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
-          // If the button is low prominence with a decorative tone we want to force
-          // the tone to be the same as the button
-          // We also don't want users to override the tone of the icon inside of the button
-          tone: variant === null || variant === void 0 ? void 0 : variant.textTone
-        })
-      });
-    }
-    return null;
-  });
-};
-function HiddenWhenLoading(_ref2) {
-  var children = _ref2.children,
-    isLoading = _ref2.isLoading;
-  return /*#__PURE__*/jsx(Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    opacity: isLoading ? 0 : undefined,
-    children: children
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * useButtonStyles
- *
- * Custom hook for styling buttons and certain links.
- * Returns a tuple where the first item is an object of props to spread onto the
- * underlying `Box` component, and the second item is a CSS object that can be
- * passed to Emotion's `css` function.
- */
-function useButtonStyles(_ref) {
-  var iconOnly = _ref.iconOnly,
-    prominence = _ref.prominence,
-    size = _ref.size,
-    tone = _ref.tone;
-  var theme = useTheme();
-  var focusRingStyles = useFocusRing({
-    tone: tone
-  });
-  var disabledFocusRingStyles = useFocusRing({
-    tone: 'disabled'
-  });
-  var variant = variants[prominence][tone];
-  var isLarge = size === 'large';
-  var transitionColors = {
-    transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-    transitionTimingFunction: theme.animation.standard.easing,
-    transitionDuration: "".concat(theme.animation.standard.duration, "ms")
-  };
-  return [{
-    alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
-    border: variant === null || variant === void 0 ? void 0 : variant.border,
-    borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
-    borderRadius: isLarge ? 'medium' : 'small',
-    cursor: 'pointer',
-    display: 'inline-flex',
-    gap: 'small',
-    height: mapTokens.size[size],
-    justifyContent: 'center',
-    paddingX: iconOnly ? undefined : mapTokens.spacing[size],
-    position: 'relative',
-    width: iconOnly ? mapTokens.size[size] : undefined
-  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
-    // Styles for buttons that aren't disabled.
-    // Using the :not() pseudo-class so we don't have to undo the styles when
-    // the button is disabled.
-    '&:not([aria-disabled=true])': {
-      ':hover': {
-        borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
-        backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
-        // Style button text when hovering
-        '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
-          color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
-          stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
-        })
-      },
-      ':active': {
-        borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme.border.color[variant.borderActive] : undefined,
-        backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
-        transform: 'scale(0.98)',
-        // Style button text when it's active
-        '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
-          color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
-          stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
-        })
-      },
-      ':focus': focusRingStyles
-    },
-    '&[aria-disabled=true]': {
-      backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
-      borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme.border.color[variant.borderDisabled] : undefined,
-      cursor: 'default',
-      '*': {
-        color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined,
-        stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined
-      },
-      ':focus': disabledFocusRingStyles
-    }
-  })];
-}
-
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
-/**
- * Buttons are used to initialize an action, their label should express what
- * action will occur when the user interacts with it.
- */
-var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var ariaControls = _ref['aria-controls'],
-    ariaDescribedBy = _ref['aria-describedby'],
-    ariaExpanded = _ref['aria-expanded'],
-    data = _ref.data,
-    disabled = _ref.disabled,
-    id = _ref.id,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    onClick = _ref.onClick,
-    _ref$prominence = _ref.prominence,
-    prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$tone = _ref.tone,
-    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-    type = _ref.type,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var iconOnly = Boolean(props.label);
-  var _useButtonStyles = useButtonStyles({
-      iconOnly: iconOnly,
-      size: size,
-      tone: tone,
-      prominence: prominence
-    }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
-    boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
-  var variant = variants[prominence][tone];
-  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
-    "aria-controls": ariaControls,
-    "aria-describedby": ariaDescribedBy,
-    "aria-expanded": ariaExpanded,
-    "aria-label": props.label,
-    className: css(buttonStyles),
-    data: data,
-    disabled: loading || disabled,
-    id: id,
-    onClick: onClick,
-    ref: forwardedRef,
-    type: type,
-    children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
-      isLoading: loading,
-      prominence: prominence,
-      size: size,
-      tone: tone
-    })), loading && /*#__PURE__*/jsx(Loading, {
-      tone: variant === null || variant === void 0 ? void 0 : variant.textTone
-    })]
-  }));
-});
-Button.displayName = 'Button';
-function Loading(_ref2) {
-  var tone = _ref2.tone;
-  return /*#__PURE__*/jsxs(Box, {
-    as: "span",
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsx(VisuallyHidden, {
-      children: "button loading indicator"
-    }), /*#__PURE__*/jsx(Spinner, {
-      size: "xsmall",
-      tone: tone
-    })]
-  });
-}
-
-var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
-/** The appearance of a `Button`, with the semantics of a link. */
-var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
-  var data = _ref.data,
-    href = _ref.href,
-    id = _ref.id,
-    _ref$prominence = _ref.prominence,
-    prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$tone = _ref.tone,
-    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-    consumerProps = _objectWithoutProperties(_ref, _excluded);
-  var LinkComponent = useLinkComponent(forwardedRef);
-  var iconOnly = Boolean(consumerProps.label);
-  var _useButtonStyles = useButtonStyles({
-      iconOnly: iconOnly,
-      prominence: prominence,
-      size: size,
-      tone: tone
-    }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
-    boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
-  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
-    "aria-label": consumerProps.label,
-    as: LinkComponent,
-    asElement: "a",
-    className: css(buttonStyles),
-    data: data,
-    href: href,
-    id: id,
-    ref: forwardedRef,
-    children: resolveButtonChildren(_objectSpread(_objectSpread({}, consumerProps), {}, {
-      isLoading: false,
-      prominence: prominence,
-      size: size,
-      tone: tone
-    }))
-  }));
-});
-
-export { BaseButton, Button, ButtonLink, useButtonStyles };