@atlaskit/button 16.9.3 → 16.10.0

package/dist/cjs/utils/appearances.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
+var _default = appearances;
+exports.default = _default;

package/dist/cjs/utils/spacing.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var spacing = ['default', 'compact', 'none'];
+var _default = spacing;
+exports.default = _default;

package/dist/cjs/utils/variants.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variants = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
+
+// Add required default props to variants
+var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
+    ref: ref,
+    href: "#"
+  }, props), props.children);
+});
+var variants = [{
+  name: 'Button',
+  Component: _button.default,
+  elementType: HTMLButtonElement
+}, {
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}];
+exports.variants = variants;
+var _default = variants;
+exports.default = _default;

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export { default } from '../new-button/variants/default/button';
+export { default as LinkButton } from '../new-button/variants/default/link';
+export { default as IconButton } from '../new-button/variants/icon/button';
+export { default as LinkIconButton } from '../new-button/variants/icon/link';

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

@@ -3,4 +3,4 @@
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
 import '@emotion/react';
-export { default } from '../button';
+export { default } from '../old-button/button';

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

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

package/dist/es2019/new-button/variants/default/button.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
+import useDefaultButton from './use-default-button';
+/**
+ * __Button__
+ *
+ * @warning __UNSAFE__ Button is not yet safe for production use.
+ *
+ * A button triggers an event or action.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
+  // Button base
+  analyticsContext,
+  autoFocus,
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected,
+  iconBefore,
+  iconAfter,
+  children,
+  shouldFitContainer,
+  interactionName,
+  overlay,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  type = 'button',
+  testId,
+  ...rest
+}, ref) {
+  const baseProps = useDefaultButton({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType: 'button',
+    children,
+    iconBefore,
+    iconAfter,
+    interactionName,
+    isDisabled,
+    isSelected,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    shouldFitContainer,
+    spacing
+  });
+  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
+  // TODO: Remove spread props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    isDisabled: baseProps.isDisabled,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    type: type,
+    testId: testId
+  }), baseProps.children);
+}));
+Button.displayName = 'Button';
+export default Button;

package/dist/es2019/new-button/variants/default/link.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import useDefaultButton from './use-default-button';
+/**
+ * __Link Button__
+ *
+ * A link button renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkButton({
+  // Button base
+  analyticsContext,
+  autoFocus,
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected,
+  iconBefore,
+  iconAfter,
+  children,
+  shouldFitContainer,
+  interactionName,
+  overlay,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  testId,
+  href,
+  ...rest
+}, ref) {
+  const baseProps = useDefaultButton({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType: 'link',
+    children,
+    iconBefore,
+    iconAfter,
+    interactionName,
+    isDisabled,
+    isSelected,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    shouldFitContainer,
+    spacing
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: Use Link primitive to allow custom components for routing (with context)
+    // https://product-fabric.atlassian.net/browse/DSP-12505
+    React.createElement(Box, _extends({}, rest, {
+      ref: baseProps.ref,
+      xcss: baseProps.xcss,
+      onClick: baseProps.onClick,
+      onMouseDownCapture: baseProps.onMouseDownCapture,
+      onMouseUpCapture: baseProps.onMouseUpCapture,
+      onKeyDownCapture: baseProps.onKeyDownCapture,
+      onKeyUpCapture: baseProps.onKeyUpCapture,
+      onTouchStartCapture: baseProps.onTouchStartCapture,
+      onTouchEndCapture: baseProps.onTouchEndCapture,
+      onPointerDownCapture: baseProps.onPointerDownCapture,
+      onPointerUpCapture: baseProps.onPointerUpCapture,
+      onClickCapture: baseProps.onClickCapture,
+      as: "a",
+      testId: testId
+      /**
+       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+       */,
+      href: baseProps.isDisabled ? undefined : href,
+      role: baseProps.isDisabled ? 'link' : undefined,
+      "aria-disabled": baseProps.isDisabled === true ? true : undefined
+    }), baseProps.children)
+  );
+}));
+LinkButton.displayName = 'LinkButton';
+export default LinkButton;

package/dist/es2019/new-button/variants/default/use-default-button.js

@@ -0,0 +1,80 @@
+import React, { Fragment } from 'react';
+import { Box } from '@atlaskit/primitives';
+import useButtonBase from '../shared/use-button-base';
+import { contentStyles, getFadingStyles, iconStyles } from '../shared/xcss';
+/**
+ * __Use default button base__
+ *
+ * A React hook that accepts a set of default Button props,
+ * and processes them to return consistent base props for usage
+ * across Button and LinkButton variants.
+ *
+ * @private
+ */
+const useDefaultButton = ({
+  analyticsContext,
+  appearance,
+  autoFocus,
+  buttonType,
+  iconBefore,
+  iconAfter,
+  interactionName,
+  isDisabled,
+  isSelected,
+  children,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  overlay,
+  ref,
+  shouldFitContainer,
+  spacing
+}) => {
+  const fadeStyles = getFadingStyles({
+    hasOverlay: Boolean(overlay)
+  });
+  const baseProps = useButtonBase({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType,
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: [fadeStyles, iconStyles]
+    }, iconBefore), children && /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: [fadeStyles, contentStyles]
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: [fadeStyles, iconStyles]
+    }, iconAfter)),
+    interactionName,
+    isDisabled,
+    isSelected,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    shouldFitContainer,
+    spacing,
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
+  });
+  return baseProps;
+};
+export default useDefaultButton;

package/dist/es2019/new-button/variants/icon/button.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
+import useIconButton from './use-icon-button';
+/**
+ * __Icon Button__
+ *
+ * TODO: Description
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
+  // Button base
+  analyticsContext,
+  autoFocus,
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected,
+  icon,
+  children,
+  interactionName,
+  overlay,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  type = 'button',
+  testId,
+  ...rest
+}, ref) {
+  /**
+   * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
+   * buttons. It's currently duplicated and mostly the same.
+   */
+  const baseProps = useIconButton({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType: 'button',
+    children,
+    icon,
+    interactionName,
+    isDisabled,
+    isSelected,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    spacing
+  });
+  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    isDisabled: baseProps.isDisabled,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    type: type,
+    testId: testId
+  }), baseProps.children);
+}));
+IconButton.displayName = 'IconButton';
+export default IconButton;

package/dist/es2019/new-button/variants/icon/link.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import useIconButton from './use-icon-button';
+/**
+ * __Link Button__
+ *
+ * A link button renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+const LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton({
+  // Button base
+  analyticsContext,
+  autoFocus,
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected,
+  icon,
+  children,
+  interactionName,
+  overlay,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  testId,
+  href,
+  ...rest
+}, ref) {
+  const baseProps = useIconButton({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType: 'link',
+    children,
+    icon,
+    interactionName,
+    isDisabled,
+    isSelected,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    spacing
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: Allow custom components for routing (with context)
+    // https://product-fabric.atlassian.net/browse/DSP-12505
+    React.createElement(Box, _extends({}, rest, {
+      ref: baseProps.ref,
+      xcss: baseProps.xcss,
+      onClick: baseProps.onClick,
+      onMouseDownCapture: baseProps.onMouseDownCapture,
+      onMouseUpCapture: baseProps.onMouseUpCapture,
+      onKeyDownCapture: baseProps.onKeyDownCapture,
+      onKeyUpCapture: baseProps.onKeyUpCapture,
+      onTouchStartCapture: baseProps.onTouchStartCapture,
+      onTouchEndCapture: baseProps.onTouchEndCapture,
+      onPointerDownCapture: baseProps.onPointerDownCapture,
+      onPointerUpCapture: baseProps.onPointerUpCapture,
+      onClickCapture: baseProps.onClickCapture,
+      as: "a",
+      testId: testId
+      /**
+       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+       */,
+      href: baseProps.isDisabled ? undefined : href,
+      role: baseProps.isDisabled ? 'link' : undefined,
+      "aria-disabled": baseProps.isDisabled === true ? true : undefined
+    }), baseProps.children)
+  );
+}));
+LinkIconButton.displayName = 'LinkIconButton';
+export default LinkIconButton;

package/dist/es2019/new-button/variants/icon/use-icon-button.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import useButtonBase from '../shared/use-button-base';
+import { getFadingStyles, iconStyles } from '../shared/xcss';
+/**
+ * __Use icon button__
+ *
+ * A React hook that accepts a set of icon Button props,
+ * and processes them to return consistent base props for usage
+ * across IconButton and LinkIconButton variants.
+ *
+ * @private
+ */
+const useIconButton = ({
+  analyticsContext,
+  appearance,
+  autoFocus,
+  buttonType,
+  icon,
+  interactionName,
+  isDisabled,
+  isSelected,
+  // TODO: Will potentially remove children prop from IconButton
+  // children,
+  onClick,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  overlay,
+  ref,
+  shouldFitContainer,
+  spacing
+}) => {
+  const fadeStyles = getFadingStyles({
+    hasOverlay: Boolean(overlay)
+  });
+  const baseProps = useButtonBase({
+    analyticsContext,
+    appearance,
+    autoFocus,
+    buttonType,
+    /**
+     * TODO: Have not finished IconButton yet. It also needs a required accessible
+     * label - likely implemented using VisuallyHidden
+     */
+    children: /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: [fadeStyles, iconStyles]
+    }, icon),
+    interactionName,
+    isDisabled,
+    isSelected,
+    isIconButton: true,
+    onClick,
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onClickCapture,
+    overlay,
+    ref,
+    shouldFitContainer,
+    spacing
+  });
+  return baseProps;
+};
+export default useIconButton;

package/dist/es2019/new-button/variants/shared/block-events.js

@@ -0,0 +1,27 @@
+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);
+}
+export default function blockEvents(shouldBlockEvents, events) {
+  return shouldBlockEvents ? {
+    onMouseDownCapture: abort,
+    onMouseUpCapture: abort,
+    onKeyDownCapture: onKey,
+    onKeyUpCapture: onKey,
+    onTouchStartCapture: abort,
+    onTouchEndCapture: abort,
+    onPointerDownCapture: abort,
+    onPointerUpCapture: abort,
+    onClickCapture: abort,
+    // Just smashing the existing onClick for good measure
+    onClick: abort
+  } : events;
+}