@atlaskit/button 21.1.5 → 21.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +34 -0
  3. package/dist/cjs/new-button/containers/split-button/split-button.js +58 -118
  4. package/dist/cjs/new-button/variants/default/button.js +36 -41
  5. package/dist/cjs/new-button/variants/default/link.compiled.css +119 -0
  6. package/dist/cjs/new-button/variants/default/link.js +111 -59
  7. package/dist/cjs/new-button/variants/icon/button.js +128 -143
  8. package/dist/cjs/new-button/variants/icon/link.compiled.css +104 -0
  9. package/dist/cjs/new-button/variants/icon/link.js +101 -75
  10. package/dist/cjs/new-button/variants/shared/button-base.compiled.css +137 -0
  11. package/dist/cjs/new-button/variants/shared/button-base.js +223 -0
  12. package/dist/cjs/new-button/variants/shared/content.compiled.css +19 -0
  13. package/dist/cjs/new-button/variants/shared/content.js +13 -53
  14. package/dist/cjs/old-button/shared/button-base.js +1 -1
  15. package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +34 -0
  16. package/dist/es2019/new-button/containers/split-button/split-button.js +54 -117
  17. package/dist/es2019/new-button/variants/default/button.js +47 -56
  18. package/dist/es2019/new-button/variants/default/link.compiled.css +119 -0
  19. package/dist/es2019/new-button/variants/default/link.js +113 -63
  20. package/dist/es2019/new-button/variants/icon/button.js +117 -133
  21. package/dist/es2019/new-button/variants/icon/link.compiled.css +104 -0
  22. package/dist/es2019/new-button/variants/icon/link.js +94 -70
  23. package/dist/es2019/new-button/variants/shared/button-base.compiled.css +137 -0
  24. package/dist/es2019/new-button/variants/shared/button-base.js +203 -0
  25. package/dist/es2019/new-button/variants/shared/content.compiled.css +19 -0
  26. package/dist/es2019/new-button/variants/shared/content.js +13 -52
  27. package/dist/es2019/old-button/shared/button-base.js +1 -1
  28. package/dist/esm/new-button/containers/split-button/split-button.compiled.css +34 -0
  29. package/dist/esm/new-button/containers/split-button/split-button.js +55 -120
  30. package/dist/esm/new-button/variants/default/button.js +33 -41
  31. package/dist/esm/new-button/variants/default/link.compiled.css +119 -0
  32. package/dist/esm/new-button/variants/default/link.js +111 -59
  33. package/dist/esm/new-button/variants/icon/button.js +128 -143
  34. package/dist/esm/new-button/variants/icon/link.compiled.css +104 -0
  35. package/dist/esm/new-button/variants/icon/link.js +98 -72
  36. package/dist/esm/new-button/variants/shared/button-base.compiled.css +137 -0
  37. package/dist/esm/new-button/variants/shared/button-base.js +213 -0
  38. package/dist/esm/new-button/variants/shared/content.compiled.css +19 -0
  39. package/dist/esm/new-button/variants/shared/content.js +13 -53
  40. package/dist/esm/old-button/shared/button-base.js +1 -1
  41. package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -5
  42. package/dist/types/new-button/variants/default/button.d.ts +5 -1
  43. package/dist/types/new-button/variants/default/link.d.ts +22 -8
  44. package/dist/types/new-button/variants/icon/button.d.ts +5 -1
  45. package/dist/types/new-button/variants/icon/link.d.ts +11 -4
  46. package/dist/types/new-button/variants/shared/block-events.d.ts +1 -1
  47. package/dist/types/new-button/variants/shared/button-base.d.ts +45 -0
  48. package/dist/types/new-button/variants/shared/content.d.ts +5 -1
  49. package/dist/types/new-button/variants/types.d.ts +26 -6
  50. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -5
  51. package/dist/types-ts4.5/new-button/variants/default/button.d.ts +5 -1
  52. package/dist/types-ts4.5/new-button/variants/default/link.d.ts +22 -8
  53. package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -1
  54. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +11 -4
  55. package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +1 -1
  56. package/dist/types-ts4.5/new-button/variants/shared/button-base.d.ts +45 -0
  57. package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +5 -1
  58. package/dist/types-ts4.5/new-button/variants/types.d.ts +26 -6
  59. package/package.json +16 -14
  60. package/dist/cjs/new-button/variants/default/use-default-button.js +0 -98
  61. package/dist/cjs/new-button/variants/icon/use-icon-button.js +0 -88
  62. package/dist/cjs/new-button/variants/shared/use-button-base.js +0 -639
  63. package/dist/es2019/new-button/variants/default/use-default-button.js +0 -88
  64. package/dist/es2019/new-button/variants/icon/use-icon-button.js +0 -81
  65. package/dist/es2019/new-button/variants/shared/use-button-base.js +0 -619
  66. package/dist/esm/new-button/variants/default/use-default-button.js +0 -88
  67. package/dist/esm/new-button/variants/icon/use-icon-button.js +0 -81
  68. package/dist/esm/new-button/variants/shared/use-button-base.js +0 -629
  69. package/dist/types/new-button/variants/default/use-default-button.d.ts +0 -16
  70. package/dist/types/new-button/variants/icon/use-icon-button.d.ts +0 -16
  71. package/dist/types/new-button/variants/shared/use-button-base.d.ts +0 -46
  72. package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +0 -16
  73. package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +0 -16
  74. package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +0 -46
@@ -1,54 +1,15 @@
1
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
+ /* content.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./content.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
2
4
  import React from 'react';
3
- import { Box, xcss } from '@atlaskit/primitives';
4
- var textStyles = xcss({
5
- // content can grow and shrink
6
- flexGrow: 1,
7
- flexShrink: 1,
8
- // ellipsis for overflow text
9
- overflow: 'hidden',
10
- textOverflow: 'ellipsis',
11
- whiteSpace: 'nowrap'
12
- });
13
- var iconStyles = xcss({
14
- display: 'flex',
15
- // icon size cannot grow and shrink
16
- flexGrow: 0,
17
- flexShrink: 0,
18
- alignSelf: 'center',
19
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
20
- fontSize: 0,
21
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
22
- lineHeight: 0,
23
- userSelect: 'none'
24
- });
25
- var commonStyles = xcss({
26
- transition: 'opacity 0.3s'
27
- });
28
- var fadeStyles = xcss({
29
- opacity: 0
30
- });
31
-
32
- /**
33
- * These CSS variables consumed by the new icons, to allow them to have appropriate
34
- * padding inside Button while also maintaining spacing for the existing icons.
35
- *
36
- * These styles can be removed once the new icons are fully rolled out, feature flag
37
- * platform-visual-refresh-icons is cleaned up,
38
- * and we bump Button to set padding based on the new icons.
39
- */
40
- var beforeIconStyles = xcss({
41
- // @ts-ignore
42
- '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
43
- // @ts-ignore
44
- '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
45
- });
46
- var afterIconStyles = xcss({
47
- // @ts-ignore
48
- '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
49
- // @ts-ignore
50
- '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
51
- });
5
+ var styles = {
6
+ text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
7
+ icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
8
+ beforeIcon: "_1he91b66 _w795v77o",
9
+ afterIcon: "_1he9v77o _w7951b66",
10
+ common: "_v564g17y",
11
+ fade: "_tzy4idpf"
12
+ };
52
13
  /**
53
14
  * __Content__
54
15
  *
@@ -60,9 +21,8 @@ var Content = function Content(_ref) {
60
21
  type = _ref$type === void 0 ? 'text' : _ref$type,
61
22
  isLoading = _ref.isLoading,
62
23
  position = _ref.position;
63
- return /*#__PURE__*/React.createElement(Box, {
64
- as: "span",
65
- xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(isLoading ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
24
+ return /*#__PURE__*/React.createElement("span", {
25
+ className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
66
26
  }, children);
67
27
  };
68
28
  export default Content;
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
125
125
  action: 'clicked',
126
126
  componentName: 'button',
127
127
  packageName: "@atlaskit/button",
128
- packageVersion: "21.1.5",
128
+ packageVersion: "21.1.7",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx } from '@emotion/react';
7
6
  import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
8
7
  type DividerProps = {
9
8
  appearance: SplitButtonContextAppearance;
@@ -13,7 +12,7 @@ type DividerProps = {
13
12
  /**
14
13
  * TODO: Add JSDoc
15
14
  */
16
- export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => jsx.JSX.Element;
15
+ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => JSX.Element;
17
16
  /**
18
17
  * TODO: Add JSdoc
19
18
  */
@@ -21,7 +20,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
21
20
  appearance: SplitButtonAppearance;
22
21
  children: ReactNode;
23
22
  isDisabled?: boolean | undefined;
24
- }) => jsx.JSX.Element;
23
+ }) => JSX.Element;
25
24
  /**
26
25
  * __Split Button__
27
26
  *
@@ -31,7 +30,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
31
30
  * - [Code](https://atlassian.design/components/button/split-button/code)
32
31
  * - [Usage](https://atlassian.design/components/button/split-button/usage)
33
32
  */
34
- export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
33
+ export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => JSX.Element;
35
34
  type SplitButtonWithSlotsProps = {
36
35
  primaryAction: ReactNode;
37
36
  secondaryAction: ReactNode;
@@ -48,5 +47,5 @@ type SplitButtonWithSlotsProps = {
48
47
  * - [Code](https://atlassian.design/components/{packageName}/code)
49
48
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
50
49
  */
51
- export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
50
+ export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => JSX.Element;
52
51
  export {};
@@ -13,5 +13,9 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
13
13
  */
14
14
  declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
15
15
  'data-testid'?: undefined;
16
- }, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
16
+ }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
17
+ onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
18
+ onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
19
+ onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
20
+ } & React.RefAttributes<HTMLButtonElement>>>;
17
21
  export default Button;
@@ -1,8 +1,10 @@
1
- import React, { type Ref } from 'react';
2
- import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
3
- import { type CommonDefaultButtonProps } from './types';
4
- export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
5
- declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
1
+ /// <reference types="react" />
2
+ import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
3
+ import type { AdditionalDefaultLinkVariantProps, CommonLinkVariantProps } from '../types';
4
+ import type { CommonDefaultButtonProps } from './types';
5
+ export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps & {
6
+ xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
7
+ };
6
8
  /**
7
9
  * __Link Button__
8
10
  *
@@ -12,7 +14,19 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
12
14
  * - [Code](https://atlassian.design/components/link-button/code)
13
15
  * - [Usage](https://atlassian.design/components/link-button/usage)
14
16
  */
15
- declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
16
- ref?: Ref<HTMLAnchorElement>;
17
- }) => ReturnType<typeof LinkButtonBase>;
17
+ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, spacing, testId, xcss, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
18
+ /**
19
+ * __Link Button__
20
+ *
21
+ * Renders a link in the style of a button.
22
+ *
23
+ * - [Examples](https://atlassian.design/components/link-button/examples)
24
+ * - [Code](https://atlassian.design/components/link-button/code)
25
+ * - [Usage](https://atlassian.design/components/link-button/usage)
26
+ */
27
+ declare const LinkButton: (<RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
28
+ ref?: React.Ref<HTMLAnchorElement>;
29
+ }) => ReturnType<typeof LinkButtonBase>) & {
30
+ displayName?: string | undefined;
31
+ };
18
32
  export default LinkButton;
@@ -13,5 +13,9 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
13
13
  */
14
14
  declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
15
15
  'data-testid'?: undefined;
16
- }, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
16
+ }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
17
+ onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
18
+ onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
19
+ onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
20
+ } & React.RefAttributes<HTMLButtonElement>>>;
17
21
  export default IconButton;
@@ -1,8 +1,15 @@
1
- import React, { type Ref } from 'react';
2
- import { type CommonLinkVariantProps } from '../types';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type Ref } from 'react';
6
+ import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
7
+ import { CommonAnchorProps, type CommonLinkVariantProps } from '../types';
3
8
  import { type CommonIconButtonProps } from './types';
4
- export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
5
- declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
9
+ export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig> & CommonAnchorProps<RouterLinkConfig> & {
10
+ xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
11
+ };
12
+ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, xcss, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
6
13
  /**
7
14
  * __Link Icon Button__
8
15
  *
@@ -1,2 +1,2 @@
1
- import { type ControlledEvents } from './use-button-base';
1
+ import { type ControlledEvents } from './button-base';
2
2
  export default function blockEvents<TagName extends HTMLElement>(shouldBlockEvents: boolean, events: ControlledEvents<TagName>): ControlledEvents<TagName>;
@@ -0,0 +1,45 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
7
+ import { type Appearance, type CommonBaseProps, type CommonButtonProps, type Spacing } from '../types';
8
+ export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onMouseOver' | 'onMouseOut' | 'onMouseMove' | 'onFocus' | 'onBlur' | 'onMouseDown' | 'onMouseUp' | 'onKeyDown' | 'onKeyUp' | 'onTouchStart' | 'onTouchEnd' | 'onPointerDown' | 'onPointerUp'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
9
+ type ButtonBaseProps<TagName extends HTMLElement> = CommonBaseProps & Pick<CommonButtonProps<TagName>, 'autoFocus' | 'isDisabled' | 'isSelected' | 'testId' | 'analyticsContext' | 'interactionName'> & {
10
+ appearance?: Appearance;
11
+ isLoading?: boolean;
12
+ isIconButton?: boolean;
13
+ isCircle?: boolean;
14
+ hasIconBefore?: boolean;
15
+ hasIconAfter?: boolean;
16
+ shouldFitContainer?: boolean;
17
+ spacing?: Spacing;
18
+ ariaLabel?: string;
19
+ ariaLabelledBy?: string;
20
+ children: React.ReactNode;
21
+ ref: React.Ref<TagName>;
22
+ type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
23
+ componentName?: string;
24
+ role?: string;
25
+ iconButtonRef?: React.Ref<HTMLButtonElement>;
26
+ tooltipRef?: React.Ref<HTMLButtonElement>;
27
+ onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<TagName>;
28
+ onMouseOutonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
29
+ onMouseMoveonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
30
+ onMouseDownonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
31
+ onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
32
+ onFocus?: React.FocusEventHandler<HTMLButtonElement>;
33
+ onBlur?: React.FocusEventHandler<HTMLButtonElement>;
34
+ onClick?: ((e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
35
+ } & ControlledEvents<TagName>;
36
+ /**
37
+ * __button base__
38
+ *
39
+ * - Implements auto focus when enabled.
40
+ * - Appends the `onClick` event with UFO analytics tracking.
41
+ *
42
+ * @private
43
+ */
44
+ declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonBaseProps<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
45
+ export default ButtonBase;
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  type ContentProps = {
3
7
  children: React.ReactNode;
@@ -10,5 +14,5 @@ type ContentProps = {
10
14
  *
11
15
  * Used for slots within a Button, including icons and text content.
12
16
  */
13
- declare const Content: ({ children, type, isLoading, position }: ContentProps) => React.JSX.Element;
17
+ declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
14
18
  export default Content;
@@ -11,7 +11,7 @@ export type Spacing = ButtonSpacing | IconButtonSpacing;
11
11
  export type IconProp = React.ComponentType<IconProps | Omit<NewIconProps, 'spacing'>>;
12
12
  export type IconSize = 'small' | 'large' | 'xlarge';
13
13
  type Combine<First, Second> = Omit<First, keyof Second> & Second;
14
- export type CommonButtonProps<TagName extends HTMLElement> = {
14
+ export type CommonBaseProps = {
15
15
  /**
16
16
  * Set the button to autofocus on mount.
17
17
  */
@@ -28,6 +28,16 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
28
28
  * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
29
29
  */
30
30
  testId?: string;
31
+ /**
32
+ * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
33
+ */
34
+ analyticsContext?: Record<string, any>;
35
+ /**
36
+ * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
37
+ */
38
+ interactionName?: string;
39
+ };
40
+ export type CommonButtonProps<TagName extends HTMLElement = HTMLButtonElement> = CommonBaseProps & {
31
41
  /**
32
42
  * Handler called on blur.
33
43
  */
@@ -39,15 +49,25 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
39
49
  /**
40
50
  * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
41
51
  */
42
- onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
52
+ onClick?: (e: React.MouseEvent<TagName, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
53
+ };
54
+ export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = never> = CommonBaseProps & {
43
55
  /**
44
- * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
56
+ * Handler called on blur.
45
57
  */
46
- analyticsContext?: Record<string, any>;
58
+ onBlur?: React.FocusEventHandler<HTMLAnchorElement>;
47
59
  /**
48
- * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
60
+ * Handler called on focus.
49
61
  */
50
- interactionName?: string;
62
+ onFocus?: React.FocusEventHandler<HTMLAnchorElement>;
63
+ /**
64
+ * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
65
+ */
66
+ onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
67
+ /**
68
+ * URL to navigate to.
69
+ */
70
+ href?: string | RouterLinkConfig;
51
71
  };
52
72
  type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
53
73
  type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx } from '@emotion/react';
7
6
  import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
8
7
  type DividerProps = {
9
8
  appearance: SplitButtonContextAppearance;
@@ -13,7 +12,7 @@ type DividerProps = {
13
12
  /**
14
13
  * TODO: Add JSDoc
15
14
  */
16
- export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => jsx.JSX.Element;
15
+ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => JSX.Element;
17
16
  /**
18
17
  * TODO: Add JSdoc
19
18
  */
@@ -21,7 +20,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
21
20
  appearance: SplitButtonAppearance;
22
21
  children: ReactNode;
23
22
  isDisabled?: boolean | undefined;
24
- }) => jsx.JSX.Element;
23
+ }) => JSX.Element;
25
24
  /**
26
25
  * __Split Button__
27
26
  *
@@ -31,7 +30,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
31
30
  * - [Code](https://atlassian.design/components/button/split-button/code)
32
31
  * - [Usage](https://atlassian.design/components/button/split-button/usage)
33
32
  */
34
- export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
33
+ export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => JSX.Element;
35
34
  type SplitButtonWithSlotsProps = {
36
35
  primaryAction: ReactNode;
37
36
  secondaryAction: ReactNode;
@@ -48,5 +47,5 @@ type SplitButtonWithSlotsProps = {
48
47
  * - [Code](https://atlassian.design/components/{packageName}/code)
49
48
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
50
49
  */
51
- export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
50
+ export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => JSX.Element;
52
51
  export {};
@@ -13,5 +13,9 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
13
13
  */
14
14
  declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
15
15
  'data-testid'?: undefined;
16
- }, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
16
+ }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
17
+ onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
18
+ onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
19
+ onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
20
+ } & React.RefAttributes<HTMLButtonElement>>>;
17
21
  export default Button;
@@ -1,8 +1,10 @@
1
- import React, { type Ref } from 'react';
2
- import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
3
- import { type CommonDefaultButtonProps } from './types';
4
- export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
5
- declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
1
+ /// <reference types="react" />
2
+ import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
3
+ import type { AdditionalDefaultLinkVariantProps, CommonLinkVariantProps } from '../types';
4
+ import type { CommonDefaultButtonProps } from './types';
5
+ export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps & {
6
+ xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
7
+ };
6
8
  /**
7
9
  * __Link Button__
8
10
  *
@@ -12,7 +14,19 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
12
14
  * - [Code](https://atlassian.design/components/link-button/code)
13
15
  * - [Usage](https://atlassian.design/components/link-button/usage)
14
16
  */
15
- declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
16
- ref?: Ref<HTMLAnchorElement>;
17
- }) => ReturnType<typeof LinkButtonBase>;
17
+ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, spacing, testId, xcss, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
18
+ /**
19
+ * __Link Button__
20
+ *
21
+ * Renders a link in the style of a button.
22
+ *
23
+ * - [Examples](https://atlassian.design/components/link-button/examples)
24
+ * - [Code](https://atlassian.design/components/link-button/code)
25
+ * - [Usage](https://atlassian.design/components/link-button/usage)
26
+ */
27
+ declare const LinkButton: (<RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
28
+ ref?: React.Ref<HTMLAnchorElement>;
29
+ }) => ReturnType<typeof LinkButtonBase>) & {
30
+ displayName?: string | undefined;
31
+ };
18
32
  export default LinkButton;
@@ -13,5 +13,9 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
13
13
  */
14
14
  declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
15
15
  'data-testid'?: undefined;
16
- }, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
16
+ }, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
17
+ onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
18
+ onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
19
+ onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
20
+ } & React.RefAttributes<HTMLButtonElement>>>;
17
21
  export default IconButton;
@@ -1,8 +1,15 @@
1
- import React, { type Ref } from 'react';
2
- import { type CommonLinkVariantProps } from '../types';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type Ref } from 'react';
6
+ import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
7
+ import { CommonAnchorProps, type CommonLinkVariantProps } from '../types';
3
8
  import { type CommonIconButtonProps } from './types';
4
- export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
5
- declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
9
+ export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig> & CommonAnchorProps<RouterLinkConfig> & {
10
+ xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
11
+ };
12
+ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, xcss, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
6
13
  /**
7
14
  * __Link Icon Button__
8
15
  *
@@ -1,2 +1,2 @@
1
- import { type ControlledEvents } from './use-button-base';
1
+ import { type ControlledEvents } from './button-base';
2
2
  export default function blockEvents<TagName extends HTMLElement>(shouldBlockEvents: boolean, events: ControlledEvents<TagName>): ControlledEvents<TagName>;
@@ -0,0 +1,45 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
7
+ import { type Appearance, type CommonBaseProps, type CommonButtonProps, type Spacing } from '../types';
8
+ export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onMouseOver' | 'onMouseOut' | 'onMouseMove' | 'onFocus' | 'onBlur' | 'onMouseDown' | 'onMouseUp' | 'onKeyDown' | 'onKeyUp' | 'onTouchStart' | 'onTouchEnd' | 'onPointerDown' | 'onPointerUp'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
9
+ type ButtonBaseProps<TagName extends HTMLElement> = CommonBaseProps & Pick<CommonButtonProps<TagName>, 'autoFocus' | 'isDisabled' | 'isSelected' | 'testId' | 'analyticsContext' | 'interactionName'> & {
10
+ appearance?: Appearance;
11
+ isLoading?: boolean;
12
+ isIconButton?: boolean;
13
+ isCircle?: boolean;
14
+ hasIconBefore?: boolean;
15
+ hasIconAfter?: boolean;
16
+ shouldFitContainer?: boolean;
17
+ spacing?: Spacing;
18
+ ariaLabel?: string;
19
+ ariaLabelledBy?: string;
20
+ children: React.ReactNode;
21
+ ref: React.Ref<TagName>;
22
+ type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
23
+ componentName?: string;
24
+ role?: string;
25
+ iconButtonRef?: React.Ref<HTMLButtonElement>;
26
+ tooltipRef?: React.Ref<HTMLButtonElement>;
27
+ onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<TagName>;
28
+ onMouseOutonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
29
+ onMouseMoveonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
30
+ onMouseDownonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
31
+ onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
32
+ onFocus?: React.FocusEventHandler<HTMLButtonElement>;
33
+ onBlur?: React.FocusEventHandler<HTMLButtonElement>;
34
+ onClick?: ((e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
35
+ } & ControlledEvents<TagName>;
36
+ /**
37
+ * __button base__
38
+ *
39
+ * - Implements auto focus when enabled.
40
+ * - Appends the `onClick` event with UFO analytics tracking.
41
+ *
42
+ * @private
43
+ */
44
+ declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonBaseProps<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
45
+ export default ButtonBase;
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  type ContentProps = {
3
7
  children: React.ReactNode;
@@ -10,5 +14,5 @@ type ContentProps = {
10
14
  *
11
15
  * Used for slots within a Button, including icons and text content.
12
16
  */
13
- declare const Content: ({ children, type, isLoading, position }: ContentProps) => React.JSX.Element;
17
+ declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
14
18
  export default Content;
@@ -11,7 +11,7 @@ export type Spacing = ButtonSpacing | IconButtonSpacing;
11
11
  export type IconProp = React.ComponentType<IconProps | Omit<NewIconProps, 'spacing'>>;
12
12
  export type IconSize = 'small' | 'large' | 'xlarge';
13
13
  type Combine<First, Second> = Omit<First, keyof Second> & Second;
14
- export type CommonButtonProps<TagName extends HTMLElement> = {
14
+ export type CommonBaseProps = {
15
15
  /**
16
16
  * Set the button to autofocus on mount.
17
17
  */
@@ -28,6 +28,16 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
28
28
  * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
29
29
  */
30
30
  testId?: string;
31
+ /**
32
+ * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
33
+ */
34
+ analyticsContext?: Record<string, any>;
35
+ /**
36
+ * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
37
+ */
38
+ interactionName?: string;
39
+ };
40
+ export type CommonButtonProps<TagName extends HTMLElement = HTMLButtonElement> = CommonBaseProps & {
31
41
  /**
32
42
  * Handler called on blur.
33
43
  */
@@ -39,15 +49,25 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
39
49
  /**
40
50
  * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
41
51
  */
42
- onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
52
+ onClick?: (e: React.MouseEvent<TagName, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
53
+ };
54
+ export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = never> = CommonBaseProps & {
43
55
  /**
44
- * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
56
+ * Handler called on blur.
45
57
  */
46
- analyticsContext?: Record<string, any>;
58
+ onBlur?: React.FocusEventHandler<HTMLAnchorElement>;
47
59
  /**
48
- * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
60
+ * Handler called on focus.
49
61
  */
50
- interactionName?: string;
62
+ onFocus?: React.FocusEventHandler<HTMLAnchorElement>;
63
+ /**
64
+ * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
65
+ */
66
+ onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
67
+ /**
68
+ * URL to navigate to.
69
+ */
70
+ href?: string | RouterLinkConfig;
51
71
  };
52
72
  type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
53
73
  type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {