@atlaskit/button 16.1.2

package/dist/es2019/custom-theme-button/custom-theme-button-types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/custom-theme-button/custom-theme-button.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import GlobalTheme from '@atlaskit/theme/components';
+import ButtonBase from '../shared/button-base';
+import getIsOnlySingleIcon from '../shared/get-is-only-single-icon';
+import LoadingSpinner from '../shared/loading-spinner';
+import Theme, { defaultThemeFn, getSpecifiers } from './theme';
+
+function getInteractionState({
+  isDisabled = false,
+  isActive = false,
+  isFocus = false,
+  isHover = false,
+  isSelected = false,
+  isLoading = false
+}) {
+  if (isDisabled) {
+    return 'disabled';
+  }
+
+  if (isSelected && isFocus) {
+    return 'focusSelected';
+  }
+
+  if (isSelected) {
+    return 'selected';
+  } // not allowing active or focus style changes while loading
+
+
+  if (!isLoading && isActive) {
+    return 'active';
+  }
+
+  if (!isLoading && isHover) {
+    return 'hover';
+  }
+
+  if (isFocus) {
+    return 'focus';
+  }
+
+  return 'default';
+}
+
+const initial = {
+  isHover: false,
+  isActive: false,
+  isFocus: false
+};
+const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton({
+  // Calculate default props for use in custom themes
+  appearance = 'default',
+  autoFocus = false,
+  isDisabled = false,
+  isSelected = false,
+  shouldFitContainer = false,
+  spacing = 'default',
+  isLoading = false,
+  onMouseEnter: providedOnMouseEnter,
+  onMouseLeave: providedOnMouseLeave,
+  onMouseDown: providedOnMouseDown,
+  onMouseUp: providedOnMouseUp,
+  onFocus: providedOnFocus,
+  onBlur: providedOnBlur,
+  theme = defaultThemeFn,
+  ...rest
+}, ref) {
+  // TODO is there a nicer way to do this?
+  // Add default props back into object for spreading
+  const restProps = {
+    appearance,
+    autoFocus,
+    isDisabled,
+    isSelected,
+    shouldFitContainer,
+    spacing,
+    ...rest
+  };
+  const [state, setState] = useState(initial);
+  const onMouseEnter = useCallback(event => {
+    setState(current => ({ ...current,
+      isHover: true
+    }));
+
+    if (providedOnMouseEnter) {
+      providedOnMouseEnter(event);
+    }
+  }, [providedOnMouseEnter]);
+  const onMouseLeave = useCallback(event => {
+    setState(current => ({ ...current,
+      isHover: false,
+      isActive: false
+    }));
+
+    if (providedOnMouseLeave) {
+      providedOnMouseLeave(event);
+    }
+  }, [providedOnMouseLeave]);
+  const onMouseDown = useCallback(event => {
+    setState(current => ({ ...current,
+      isActive: true
+    }));
+
+    if (providedOnMouseDown) {
+      providedOnMouseDown(event);
+    }
+  }, [providedOnMouseDown]);
+  const onMouseUp = useCallback(event => {
+    setState(current => ({ ...current,
+      isActive: false
+    }));
+
+    if (providedOnMouseUp) {
+      providedOnMouseUp(event);
+    }
+  }, [providedOnMouseUp]);
+  const onFocus = useCallback(event => {
+    setState(current => ({ ...current,
+      isFocus: true
+    }));
+
+    if (providedOnFocus) {
+      providedOnFocus(event);
+    }
+  }, [providedOnFocus]);
+  const onBlur = useCallback(event => {
+    setState(current => ({ ...current,
+      isFocus: false
+    }));
+
+    if (providedOnBlur) {
+      providedOnBlur(event);
+    }
+  }, [providedOnBlur]);
+  return /*#__PURE__*/React.createElement(Theme.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, ({
+    mode
+  }) => /*#__PURE__*/React.createElement(Theme.Consumer, _extends({
+    mode: mode,
+    state: getInteractionState({ ...state,
+      isLoading,
+      isSelected: restProps.isSelected,
+      isDisabled: restProps.isDisabled
+    }),
+    iconIsOnlyChild: getIsOnlySingleIcon(restProps),
+    isLoading: isLoading
+  }, restProps), ({
+    buttonStyles
+  }) => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
+    ref: ref,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    buttonCss: getSpecifiers(buttonStyles)
+  })))));
+})); // Tools including enzyme rely on components having a display name
+
+CustomThemeButton.displayName = 'CustomThemeButton';
+export default CustomThemeButton;

package/dist/es2019/custom-theme-button/index.js

@@ -0,0 +1,2 @@
+export { default } from './custom-theme-button';
+export { default as Theme } from './theme';

package/dist/es2019/custom-theme-button/theme.js

@@ -0,0 +1,81 @@
+import { createTheme } from '@atlaskit/theme/components';
+import { getCss } from '../shared/css';
+const stateToSelectorMap = {
+  focus: '&:focus',
+  focusSelected: '&:focus',
+  hover: '&:hover',
+  active: '&:active',
+  disabled: '&[disabled]'
+}; // Mapping the new clean css back to the legacy theme format.
+// The legacy theme format has all styles at the top level (no nested selectors)
+// and uses `getSpecifiers()` to apply the style to all pseudo states
+
+export function getCustomCss({
+  appearance = 'default',
+  spacing = 'default',
+  mode = 'light',
+  isSelected = false,
+  shouldFitContainer = false,
+  iconIsOnlyChild = false,
+  isLoading = false,
+  state
+}) {
+  let result = getCss({
+    appearance,
+    spacing,
+    mode,
+    isSelected,
+    shouldFitContainer,
+    isOnlySingleIcon: iconIsOnlyChild
+  }); // we need to disable the default browser focus styles always
+  // this is because we are not expressing that we can have two pseudo states at a time
+
+  result.outline = 'none'; // Pulling relevant styles up to the top level
+
+  const selector = stateToSelectorMap[state];
+
+  if (selector) {
+    result = { ...result,
+      ...result[selector]
+    };
+  }
+
+  if (isLoading) {
+    result = { ...result,
+      // Pull overlay styles up to the top
+      ...result['&[data-has-overlay="true"]']
+    };
+  } // Delete all selectors and just keep root styles
+
+
+  Object.keys(result).forEach(key => {
+    // want to keep this one
+    if (key === '&::-moz-focus-inner') {
+      return;
+    } // Not using .startsWith for ie11
+
+
+    if (key.indexOf('&') === 0) {
+      delete result[key];
+    }
+  });
+  return result;
+} // This styling approach works by generating a 'style' and applying with maximum specificity
+// To do this we are overwriting all pseudo selectors
+
+export function getSpecifiers(styles) {
+  return {
+    '&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
+  };
+}
+export function defaultThemeFn(current, values) {
+  return current(values);
+}
+const Theme = createTheme(themeProps => ({
+  buttonStyles: getCustomCss(themeProps),
+  // No styles being applied directly to spinner by default
+  // Keeping this for legacy compat. We could remove it, but given
+  // that we are changing theme soon there is no point
+  spinnerStyles: {}
+}));
+export default Theme;

package/dist/es2019/entry-points/button-group.js

@@ -0,0 +1 @@
+export { default } from '../button-group';

package/dist/es2019/entry-points/custom-theme-button.js

@@ -0,0 +1 @@
+export { default, Theme } from '../custom-theme-button';

package/dist/es2019/entry-points/loading-button.js

@@ -0,0 +1 @@
+export { default } from '../loading-button';

package/dist/es2019/entry-points/standard-button.js

@@ -0,0 +1 @@
+export { default } from '../button';

package/dist/es2019/entry-points/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/index.js

@@ -0,0 +1,6 @@
+// Ideally this file is not used directly. But rather, you go through the entry points
+export { // default export is Button
+default } from './entry-points/standard-button';
+export { default as LoadingButton } from './entry-points/loading-button';
+export { default as CustomThemeButton, Theme } from './entry-points/custom-theme-button';
+export { default as ButtonGroup } from './entry-points/button-group';

package/dist/es2019/loading-button.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from './button';
+import LoadingSpinner from './shared/loading-spinner';
+const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
+  isLoading = false,
+  ...rest
+}, ref) {
+  // Button already has React.memo, so just leaning on that
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    ref: ref,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
+  }));
+}); // Tools including enzyme rely on components having a display name
+
+LoadingButton.displayName = 'LoadingButton';
+export default LoadingButton;

package/dist/es2019/shared/block-events.js

@@ -0,0 +1,37 @@
+function abort(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+const tabKeyCode = 9;
+
+function onKey(event) {
+  // Allowing tab so that a user can move focus away
+  if (event.keyCode === tabKeyCode) {
+    return;
+  }
+
+  abort(event);
+}
+
+const block = {
+  onMouseDownCapture: abort,
+  onMouseUpCapture: abort,
+  // because we have tabIndex = -1 when disabled,
+  // keyboard events can only occur when there is an overlay
+  onKeyDownCapture: onKey,
+  onKeyUpCapture: onKey,
+  onTouchStartCapture: abort,
+  onTouchEndCapture: abort,
+  onPointerDownCapture: abort,
+  onPointerUpCapture: abort,
+  onClickCapture: abort,
+  // Just smashing the existing onClick for good measure
+  onClick: abort
+};
+const doNotBlock = {};
+export default function blockEvents({
+  isInteractive
+}) {
+  return isInteractive ? doNotBlock : block;
+}

package/dist/es2019/shared/button-base.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import blockEvents from './block-events';
+import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
+
+function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+// We are disabling pointer events on child elements so that
+// the button will always be the target of events
+// Note: firefox does not have this behaviour for child elements
+
+
+const noPointerEventsOnChildrenCss = {
+  '> *': {
+    pointerEvents: 'none'
+  }
+};
+export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
+  const {
+    appearance = 'default',
+    buttonCss,
+    spacing = 'default',
+    autoFocus = false,
+    isDisabled = false,
+    shouldFitContainer = false,
+    isSelected = false,
+    iconBefore,
+    iconAfter,
+    children,
+    className,
+    href,
+    overlay,
+    tabIndex = 0,
+    type = !href ? 'button' : undefined,
+    onMouseDown: providedOnMouseDown = noop,
+    onClick: providedOnClick = noop,
+    // use the provided component prop,
+    // else default to anchor if there is a href, and button if there is no href
+    component: Component = href ? 'a' : 'button',
+    testId,
+    // I don't think this should be in button, but for now it is
+    analyticsContext,
+    ...rest
+  } = props;
+  const ourRef = useRef();
+  const setRef = useCallback(node => {
+    ourRef.current = node;
+
+    if (ref == null) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    } // @ts-ignore
+
+
+    ref.current = node;
+  }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
+
+  useAutoFocus(ourRef, autoFocus);
+  const onClick = usePlatformLeafEventHandler({
+    fn: providedOnClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.1.2",
+    analyticsData: analyticsContext
+  }); // Button currently calls preventDefault, which is not standard button behaviour
+
+  const onMouseDown = useCallback(event => {
+    event.preventDefault();
+    providedOnMouseDown(event);
+  }, [providedOnMouseDown]); // Lose focus when becoming disabled (standard button behaviour)
+
+  useEffect(() => {
+    const el = ourRef.current;
+
+    if (isDisabled && el && el === document.activeElement) {
+      el.blur();
+    }
+  }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
+
+  const hasOverlay = Boolean(overlay);
+  const fadeCss = getFadingCss({
+    hasOverlay
+  });
+  const isInteractive = !isDisabled && !hasOverlay;
+  return jsx(Component, _extends({}, rest, {
+    css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
+    className: className,
+    ref: setRef,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    disabled: isDisabled,
+    href: isInteractive ? href : undefined // using undefined so that the property doesn't exist when false
+    ,
+    "data-has-overlay": hasOverlay ? true : undefined,
+    "data-testid": testId,
+    type: type // Adding a tab index so element is always focusable, even when not a <button> or <a>
+    // Disabling focus via keyboard navigation when disabled
+    // as this is standard button behaviour
+    ,
+    tabIndex: isDisabled ? -1 : tabIndex
+  }, blockEvents({
+    isInteractive
+  })), iconBefore ? jsx("span", {
+    css: [fadeCss, getIconStyle({
+      spacing
+    })]
+  }, iconBefore) : null, children ? jsx("span", {
+    css: [fadeCss, getContentStyle({
+      spacing
+    })]
+  }, children) : null, iconAfter ? jsx("span", {
+    css: [fadeCss, getIconStyle({
+      spacing
+    })]
+  }, iconAfter) : null, overlay ? jsx("span", {
+    css: overlayCss
+  }, overlay) : null);
+});