@atlaskit/button 16.4.1 → 16.5.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/button
 
+## 16.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.5.0
+
+### Minor Changes
+
+- [`71799e16ae6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/71799e16ae6) - Introduce InteractionContext to @atlaskit/button
+
+### Patch Changes
+
+- [`3c76f243e7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c76f243e7f) - InteractionContext is nullable
+- Updated dependencies
+
 ## 16.4.1
 
 ### Patch Changes

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

@@ -23,13 +23,15 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 
 var _css = require("./css");
 
-var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"];
+var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
 
 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); }
 
@@ -76,6 +78,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       _props$component = props.component,
       Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
       testId = props.testId,
+      interactionName = props.interactionName,
       analyticsContext = props.analyticsContext,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var ourRef = (0, _react.useRef)();
@@ -96,12 +99,17 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
 
   (0, _useAutoFocus.default)(ourRef, autoFocus);
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
   var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
-    fn: providedOnClick,
+    fn: handleClick,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.4.1",
+    packageVersion: "16.5.1",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.4.1",
+	"version": "16.5.1",
 	"sideEffects": false
 }

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+// eslint-disable-next-line no-duplicate-imports
+import InteractionContext from '@atlaskit/interaction-context';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css'; // Disabled buttons will still publish events for nested elements in webkit.
@@ -41,6 +43,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     // else default to anchor if there is a href, and button if there is no href
     component: Component = href ? 'a' : 'button',
     testId,
+    interactionName,
     // I don't think this should be in button, but for now it is
     analyticsContext,
     ...rest
@@ -63,12 +66,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
 
   useAutoFocus(ourRef, autoFocus);
+  const interactionContext = useContext(InteractionContext);
+  const handleClick = useCallback((e, analyticsEvent) => {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
   const onClick = usePlatformLeafEventHandler({
-    fn: providedOnClick,
+    fn: handleClick,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.4.1",
+    packageVersion: "16.5.1",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.4.1",
+	"version": "16.5.1",
 	"sideEffects": false
 }

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

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"];
+var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
 
 /** @jsx jsx */
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+// eslint-disable-next-line no-duplicate-imports
+import InteractionContext from '@atlaskit/interaction-context';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css'; // Disabled buttons will still publish events for nested elements in webkit.
@@ -51,6 +53,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       _props$component = props.component,
       Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
       testId = props.testId,
+      interactionName = props.interactionName,
       analyticsContext = props.analyticsContext,
       rest = _objectWithoutProperties(props, _excluded);
 
@@ -72,12 +75,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
 
   useAutoFocus(ourRef, autoFocus);
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
   var onClick = usePlatformLeafEventHandler({
-    fn: providedOnClick,
+    fn: handleClick,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.4.1",
+    packageVersion: "16.5.1",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.4.1",
+	"version": "16.5.1",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -77,6 +77,11 @@ export declare type BaseOwnProps = {
      */
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
+    /**
+     * An optional name used to identify this component to press listeners. E.g. interaction tracing
+     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     */
+    interactionName?: string;
     /**
      * Additional information to be included in the `context` of analytics events that come from button
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.4.1",
+  "version": "16.5.1",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,9 +34,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/spinner": "^15.2.0",
+    "@atlaskit/interaction-context": "^2.0.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.11.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -49,7 +50,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/button"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -23,8 +28,8 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
 // @public (undocumented)
 export type Appearance =
-  | 'default'
   | 'danger'
+  | 'default'
   | 'link'
   | 'primary'
   | 'subtle'
@@ -57,6 +62,7 @@ export type BaseOwnProps = {
   component?:
     | React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>>
     | React_2.ElementType;
+  interactionName?: string;
   analyticsContext?: Record<string, any>;
 };
 
@@ -122,13 +128,13 @@ export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> &
 
 // @public (undocumented)
 export type InteractionState =
+  | 'active'
+  | 'default'
   | 'disabled'
+  | 'focus'
   | 'focusSelected'
-  | 'selected'
-  | 'active'
   | 'hover'
-  | 'focus'
-  | 'default';
+  | 'selected';
 
 // @public
 export const LoadingButton: React_2.ForwardRefExoticComponent<
@@ -182,3 +188,5 @@ export type ThemeTokens = {
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->