@atlaskit/primitives
Advanced tools
Comparing version 2.0.3 to 2.1.0
# @atlaskit/primitives | ||
## 2.1.0 | ||
### Minor Changes | ||
- [#74930](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74930) [`707a8fee2aee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/707a8fee2aee) - Both the Pressable and Anchor primitives (in Alpha) now support analytics tracking in the same fashion as `@atlaskit/button`. An additional prop `componentName` allows analytics to be configured if a parent component name is desired to be tracked rather than the primitive names. For the time being this tracking is opt-in via use of the `componentName` prop. This will be made default behavior in an upcoming release once tracking is removed in the new Buttons, and `@atlaskit/button` is bumped to use the latest version of `@atlaskit/primitives` | ||
- [#75221](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75221) [`c15d58bff276`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c15d58bff276) - `Text` inherits color by default if `color` prop is not provided. | ||
Removed auto-collapsing behaviour of `Text` | ||
## 2.0.3 | ||
@@ -4,0 +12,0 @@ |
@@ -15,6 +15,9 @@ "use strict"; | ||
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant")); | ||
var _analyticsNext = require("@atlaskit/analytics-next"); | ||
var _appProvider = require("@atlaskit/app-provider"); | ||
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop")); | ||
var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context")); | ||
var _xcss = require("../xcss/xcss"); | ||
var _box = _interopRequireDefault(require("./box")); | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"]; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel", "onClick", "interactionName", "componentName", "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); } | ||
@@ -58,3 +61,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; } | ||
rel = _ref.rel, | ||
_ref$onClick = _ref.onClick, | ||
providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick, | ||
interactionName = _ref.interactionName, | ||
componentName = _ref.componentName, | ||
analyticsContext = _ref.analyticsContext, | ||
htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded); | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Anchor', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'link' | ||
}); | ||
var RouterLink = (0, _appProvider.useRouterLink)(); | ||
@@ -96,2 +118,7 @@ | ||
paddingInlineEnd: paddingInlineEnd | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
@@ -109,5 +136,6 @@ , | ||
* | ||
* A Link is a primitive component that renders an `<a>` anchor. It utilizes | ||
* the configured router link component in the AppProvider if set. | ||
* Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling. | ||
* | ||
* This component is mostly used by other design system components, such as the [link component](/components/link/usage). | ||
* | ||
* - [Examples](https://atlassian.design/components/primitives/link/examples) | ||
@@ -114,0 +142,0 @@ * - [Code](https://atlassian.design/components/primitives/link/code) |
@@ -13,5 +13,8 @@ "use strict"; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _analyticsNext = require("@atlaskit/analytics-next"); | ||
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop")); | ||
var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context")); | ||
var _xcss = require("../xcss/xcss"); | ||
var _box = _interopRequireDefault(require("./box")); | ||
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"]; | ||
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss", "onClick", "interactionName", "componentName", "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); } | ||
@@ -65,3 +68,23 @@ 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; } | ||
xcssStyles = _ref.xcss, | ||
_ref$onClick = _ref.onClick, | ||
providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick, | ||
interactionName = _ref.interactionName, | ||
componentName = _ref.componentName, | ||
analyticsContext = _ref.analyticsContext, | ||
htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded); | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Pressable', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'button' | ||
}); | ||
// Combine default styles with supplied styles. XCSS does not support deep nested arrays | ||
@@ -76,3 +99,8 @@ var styles = [(0, _xcss.xcss)({ | ||
testId: testId, | ||
type: type, | ||
type: type | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick, | ||
backgroundColor: backgroundColor, | ||
@@ -79,0 +107,0 @@ padding: padding, |
@@ -10,4 +10,3 @@ "use strict"; | ||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
var _react = require("react"); | ||
var _react2 = require("@emotion/react"); | ||
var _react = require("@emotion/react"); | ||
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant")); | ||
@@ -23,24 +22,24 @@ var _styleMaps = require("../xcss/style-maps.partial"); | ||
// For now, at least we know <Text> will be unaffected by this. | ||
var resetStyles = (0, _react2.css)({ | ||
var resetStyles = (0, _react.css)({ | ||
margin: 0 | ||
}); | ||
var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap); | ||
var strongStyles = (0, _react2.css)({ | ||
var strongStyles = (0, _react.css)({ | ||
fontWeight: 'bold' | ||
}); | ||
var emStyles = (0, _react2.css)({ | ||
var emStyles = (0, _react.css)({ | ||
fontStyle: 'italic' | ||
}); | ||
var textAlignMap = { | ||
center: (0, _react2.css)({ | ||
center: (0, _react.css)({ | ||
textAlign: 'center' | ||
}), | ||
end: (0, _react2.css)({ | ||
end: (0, _react.css)({ | ||
textAlign: 'end' | ||
}), | ||
start: (0, _react2.css)({ | ||
start: (0, _react.css)({ | ||
textAlign: 'start' | ||
}) | ||
}; | ||
var truncationStyles = (0, _react2.css)({ | ||
var truncationStyles = (0, _react.css)({ | ||
display: '-webkit-box', | ||
@@ -51,3 +50,3 @@ overflow: 'hidden', | ||
var wordBreakMap = { | ||
breakAll: (0, _react2.css)({ | ||
breakAll: (0, _react.css)({ | ||
wordBreak: 'break-all' | ||
@@ -62,3 +61,2 @@ }) | ||
var surface = (0, _surfaceProvider.useSurface)(); | ||
var inverseTextColor = _styleMaps.inverseColorMap[surface]; | ||
@@ -69,9 +67,5 @@ /** | ||
*/ | ||
var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp; | ||
var color = _styleMaps.inverseColorMap.hasOwnProperty(surface) ? _styleMaps.inverseColorMap[surface] : colorProp; | ||
return color; | ||
}; | ||
var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false); | ||
var useHasTextAncestor = function useHasTextAncestor() { | ||
return (0, _react.useContext)(HasTextAncestorContext); | ||
}; | ||
@@ -91,4 +85,3 @@ /** | ||
var asElement = props.as, | ||
_props$color = props.color, | ||
colorProp = _props$color === void 0 ? 'color.text' : _props$color, | ||
colorProp = props.color, | ||
textAlign = props.textAlign, | ||
@@ -112,12 +105,3 @@ testId = props.testId, | ||
var color = useColor(colorProp); | ||
var isWrapped = useHasTextAncestor(); | ||
/** | ||
* If the text is already wrapped and applies no props we can just | ||
* render the children directly as a fragment. | ||
*/ | ||
if (isWrapped && Object.keys(props).length === 0) { | ||
return (0, _react2.jsx)(_react.Fragment, null, children); | ||
} | ||
var component = (0, _react2.jsx)(Component, { | ||
return (0, _react.jsx)(Component, { | ||
css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles], | ||
@@ -130,8 +114,3 @@ style: { | ||
}, children); | ||
return isWrapped ? | ||
// no need to re-apply context if the text is already wrapped | ||
component : (0, _react2.jsx)(HasTextAncestorContext.Provider, { | ||
value: true | ||
}, component); | ||
}; | ||
var _default = exports.default = Text; |
@@ -55,2 +55,8 @@ "use strict"; | ||
}); | ||
Object.defineProperty(exports, "UNSAFE_Pressable", { | ||
enumerable: true, | ||
get: function get() { | ||
return _pressable.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "UNSAFE_media", { | ||
@@ -88,2 +94,3 @@ enumerable: true, | ||
var _text = _interopRequireDefault(require("./components/text")); | ||
var _pressable = _interopRequireDefault(require("./components/pressable")); | ||
var _responsive = require("./responsive"); |
import _extends from "@babel/runtime/helpers/extends"; | ||
import React, { forwardRef } from 'react'; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import invariant from 'tiny-invariant'; | ||
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
import { useRouterLink } from '@atlaskit/app-provider'; | ||
import noop from '@atlaskit/ds-lib/noop'; | ||
import InteractionContext from '@atlaskit/interaction-context'; | ||
import { xcss } from '../xcss/xcss'; | ||
@@ -43,4 +46,22 @@ import Box from './box'; | ||
rel, | ||
onClick: providedOnClick = noop, | ||
interactionName, | ||
componentName, | ||
analyticsContext, | ||
...htmlAttributes | ||
}, ref) => { | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Anchor', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'link' | ||
}); | ||
const RouterLink = useRouterLink(); | ||
@@ -82,2 +103,7 @@ | ||
paddingInlineEnd: paddingInlineEnd | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
@@ -95,5 +121,6 @@ , | ||
* | ||
* A Link is a primitive component that renders an `<a>` anchor. It utilizes | ||
* the configured router link component in the AppProvider if set. | ||
* Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling. | ||
* | ||
* This component is mostly used by other design system components, such as the [link component](/components/link/usage). | ||
* | ||
* - [Examples](https://atlassian.design/components/primitives/link/examples) | ||
@@ -100,0 +127,0 @@ * - [Code](https://atlassian.design/components/primitives/link/code) |
import _extends from "@babel/runtime/helpers/extends"; | ||
import React, { forwardRef } from 'react'; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
import noop from '@atlaskit/ds-lib/noop'; | ||
import InteractionContext from '@atlaskit/interaction-context'; | ||
import { xcss } from '../xcss/xcss'; | ||
@@ -50,4 +53,23 @@ import Box from './box'; | ||
xcss: xcssStyles, | ||
onClick: providedOnClick = noop, | ||
interactionName, | ||
componentName, | ||
analyticsContext, | ||
...htmlAttributes | ||
}, ref) => { | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Pressable', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'button' | ||
}); | ||
// Combine default styles with supplied styles. XCSS does not support deep nested arrays | ||
@@ -62,3 +84,8 @@ let styles = [xcss({ | ||
testId: testId, | ||
type: type, | ||
type: type | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick, | ||
backgroundColor: backgroundColor, | ||
@@ -65,0 +92,0 @@ padding: padding, |
/** @jsx jsx */ | ||
import { createContext, Fragment, useContext } from 'react'; | ||
import { css, jsx } from '@emotion/react'; | ||
@@ -51,3 +51,2 @@ import invariant from 'tiny-invariant'; | ||
const surface = useSurface(); | ||
const inverseTextColor = inverseColorMap[surface]; | ||
@@ -58,7 +57,5 @@ /** | ||
*/ | ||
const color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp; | ||
const color = inverseColorMap.hasOwnProperty(surface) ? inverseColorMap[surface] : colorProp; | ||
return color; | ||
}; | ||
const HasTextAncestorContext = /*#__PURE__*/createContext(false); | ||
const useHasTextAncestor = () => useContext(HasTextAncestorContext); | ||
@@ -80,3 +77,3 @@ /** | ||
as: asElement, | ||
color: colorProp = 'color.text', | ||
color: colorProp, | ||
textAlign, | ||
@@ -100,12 +97,3 @@ testId, | ||
const color = useColor(colorProp); | ||
const isWrapped = useHasTextAncestor(); | ||
/** | ||
* If the text is already wrapped and applies no props we can just | ||
* render the children directly as a fragment. | ||
*/ | ||
if (isWrapped && Object.keys(props).length === 0) { | ||
return jsx(Fragment, null, children); | ||
} | ||
const component = jsx(Component, { | ||
return jsx(Component, { | ||
css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles], | ||
@@ -118,8 +106,3 @@ style: { | ||
}, children); | ||
return isWrapped ? | ||
// no need to re-apply context if the text is already wrapped | ||
component : jsx(HasTextAncestorContext.Provider, { | ||
value: true | ||
}, component); | ||
}; | ||
export default Text; |
@@ -9,2 +9,3 @@ export { default as Box } from './components/box'; | ||
export { default as Text } from './components/text'; | ||
export { default as UNSAFE_Pressable } from './components/pressable'; | ||
export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive'; |
@@ -5,6 +5,9 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties"; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"]; | ||
import React, { forwardRef } from 'react'; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel", "onClick", "interactionName", "componentName", "analyticsContext"]; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import invariant from 'tiny-invariant'; | ||
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
import { useRouterLink } from '@atlaskit/app-provider'; | ||
import noop from '@atlaskit/ds-lib/noop'; | ||
import InteractionContext from '@atlaskit/interaction-context'; | ||
import { xcss } from '../xcss/xcss'; | ||
@@ -48,3 +51,22 @@ import Box from './box'; | ||
rel = _ref.rel, | ||
_ref$onClick = _ref.onClick, | ||
providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick, | ||
interactionName = _ref.interactionName, | ||
componentName = _ref.componentName, | ||
analyticsContext = _ref.analyticsContext, | ||
htmlAttributes = _objectWithoutProperties(_ref, _excluded); | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Anchor', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'link' | ||
}); | ||
var RouterLink = useRouterLink(); | ||
@@ -86,2 +108,7 @@ | ||
paddingInlineEnd: paddingInlineEnd | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
@@ -99,5 +126,6 @@ , | ||
* | ||
* A Link is a primitive component that renders an `<a>` anchor. It utilizes | ||
* the configured router link component in the AppProvider if set. | ||
* Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling. | ||
* | ||
* This component is mostly used by other design system components, such as the [link component](/components/link/usage). | ||
* | ||
* - [Examples](https://atlassian.design/components/primitives/link/examples) | ||
@@ -104,0 +132,0 @@ * - [Code](https://atlassian.design/components/primitives/link/code) |
import _extends from "@babel/runtime/helpers/extends"; | ||
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray"; | ||
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties"; | ||
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"]; | ||
import React, { forwardRef } from 'react'; | ||
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss", "onClick", "interactionName", "componentName", "analyticsContext"]; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
import noop from '@atlaskit/ds-lib/noop'; | ||
import InteractionContext from '@atlaskit/interaction-context'; | ||
import { xcss } from '../xcss/xcss'; | ||
@@ -54,3 +57,23 @@ import Box from './box'; | ||
xcssStyles = _ref.xcss, | ||
_ref$onClick = _ref.onClick, | ||
providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick, | ||
interactionName = _ref.interactionName, | ||
componentName = _ref.componentName, | ||
analyticsContext = _ref.analyticsContext, | ||
htmlAttributes = _objectWithoutProperties(_ref, _excluded); | ||
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: handleClick, | ||
action: 'clicked', | ||
componentName: componentName || 'Pressable', | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "2.1.0", | ||
analyticsData: analyticsContext, | ||
actionSubject: 'button' | ||
}); | ||
// Combine default styles with supplied styles. XCSS does not support deep nested arrays | ||
@@ -65,3 +88,8 @@ var styles = [xcss({ | ||
testId: testId, | ||
type: type, | ||
type: type | ||
// TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during | ||
// the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest | ||
// version of primitives | ||
, | ||
onClick: componentName ? onClick : providedOnClick, | ||
backgroundColor: backgroundColor, | ||
@@ -68,0 +96,0 @@ padding: padding, |
@@ -7,3 +7,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties"; | ||
/** @jsx jsx */ | ||
import { createContext, Fragment, useContext } from 'react'; | ||
import { css, jsx } from '@emotion/react'; | ||
@@ -54,3 +54,2 @@ import invariant from 'tiny-invariant'; | ||
var surface = useSurface(); | ||
var inverseTextColor = inverseColorMap[surface]; | ||
@@ -61,9 +60,5 @@ /** | ||
*/ | ||
var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp; | ||
var color = inverseColorMap.hasOwnProperty(surface) ? inverseColorMap[surface] : colorProp; | ||
return color; | ||
}; | ||
var HasTextAncestorContext = /*#__PURE__*/createContext(false); | ||
var useHasTextAncestor = function useHasTextAncestor() { | ||
return useContext(HasTextAncestorContext); | ||
}; | ||
@@ -83,4 +78,3 @@ /** | ||
var asElement = props.as, | ||
_props$color = props.color, | ||
colorProp = _props$color === void 0 ? 'color.text' : _props$color, | ||
colorProp = props.color, | ||
textAlign = props.textAlign, | ||
@@ -104,12 +98,3 @@ testId = props.testId, | ||
var color = useColor(colorProp); | ||
var isWrapped = useHasTextAncestor(); | ||
/** | ||
* If the text is already wrapped and applies no props we can just | ||
* render the children directly as a fragment. | ||
*/ | ||
if (isWrapped && Object.keys(props).length === 0) { | ||
return jsx(Fragment, null, children); | ||
} | ||
var component = jsx(Component, { | ||
return jsx(Component, { | ||
css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles], | ||
@@ -122,8 +107,3 @@ style: { | ||
}, children); | ||
return isWrapped ? | ||
// no need to re-apply context if the text is already wrapped | ||
component : jsx(HasTextAncestorContext.Provider, { | ||
value: true | ||
}, component); | ||
}; | ||
export default Text; |
@@ -9,2 +9,3 @@ export { default as Box } from './components/box'; | ||
export { default as Text } from './components/text'; | ||
export { default as UNSAFE_Pressable } from './components/pressable'; | ||
export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive'; |
import React, { type ReactNode, type Ref } from 'react'; | ||
import { UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type RouterLinkComponentProps } from '@atlaskit/app-provider'; | ||
import { type BoxProps } from './box'; | ||
export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & { | ||
export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
/** | ||
@@ -9,4 +10,22 @@ * `children` should be defined to ensure links have text. | ||
children: ReactNode; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from anchor. | ||
*/ | ||
analyticsContext?: Record<string, any>; | ||
}; | ||
declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
/** | ||
@@ -17,5 +36,6 @@ * __UNSAFE_LINK__ | ||
* | ||
* A Link is a primitive component that renders an `<a>` anchor. It utilizes | ||
* the configured router link component in the AppProvider if set. | ||
* Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling. | ||
* | ||
* This component is mostly used by other design system components, such as the [link component](/components/link/usage). | ||
* | ||
* - [Examples](https://atlassian.design/components/primitives/link/examples) | ||
@@ -25,3 +45,3 @@ * - [Code](https://atlassian.design/components/primitives/link/code) | ||
*/ | ||
declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & { | ||
declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & { | ||
/** | ||
@@ -31,2 +51,20 @@ * `children` should be defined to ensure links have text. | ||
children: ReactNode; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string | undefined; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string | undefined; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from anchor. | ||
*/ | ||
analyticsContext?: Record<string, any> | undefined; | ||
} & { | ||
@@ -33,0 +71,0 @@ ref?: React.Ref<HTMLAnchorElement> | undefined; |
@@ -1,4 +0,5 @@ | ||
import { type ReactElement, type ReactNode } from 'react'; | ||
import React, { type ReactNode } from 'react'; | ||
import { UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type BoxProps } from './box'; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & { | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style' | 'onClick'> & { | ||
/** | ||
@@ -10,4 +11,21 @@ * `children` should be defined to ensure buttons are not empty, | ||
isDisabled?: boolean; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from pressable. | ||
*/ | ||
analyticsContext?: Record<string, any>; | ||
}; | ||
type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null; | ||
/** | ||
@@ -24,3 +42,28 @@ * __UNSAFE_PRESSABLE__ | ||
*/ | ||
declare const UNSAFE_PRESSABLE: PressableComponent; | ||
declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
isDisabled?: boolean | undefined; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string | undefined; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string | undefined; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from pressable. | ||
*/ | ||
analyticsContext?: Record<string, any> | undefined; | ||
}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default UNSAFE_PRESSABLE; |
@@ -18,3 +18,5 @@ export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial'; | ||
export type { TextProps } from './components/text'; | ||
export { default as UNSAFE_Pressable } from './components/pressable'; | ||
export type { PressableProps as UNSAFE_PressableProps } from './components/pressable'; | ||
export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive'; | ||
export type { Breakpoint, MediaQuery } from './responsive'; |
import React, { type ReactNode, type Ref } from 'react'; | ||
import { UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type RouterLinkComponentProps } from '@atlaskit/app-provider'; | ||
import { type BoxProps } from './box'; | ||
export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & { | ||
export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
/** | ||
@@ -9,4 +10,22 @@ * `children` should be defined to ensure links have text. | ||
children: ReactNode; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from anchor. | ||
*/ | ||
analyticsContext?: Record<string, any>; | ||
}; | ||
declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
/** | ||
@@ -17,5 +36,6 @@ * __UNSAFE_LINK__ | ||
* | ||
* A Link is a primitive component that renders an `<a>` anchor. It utilizes | ||
* the configured router link component in the AppProvider if set. | ||
* Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling. | ||
* | ||
* This component is mostly used by other design system components, such as the [link component](/components/link/usage). | ||
* | ||
* - [Examples](https://atlassian.design/components/primitives/link/examples) | ||
@@ -25,3 +45,3 @@ * - [Code](https://atlassian.design/components/primitives/link/code) | ||
*/ | ||
declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & { | ||
declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & { | ||
/** | ||
@@ -31,2 +51,20 @@ * `children` should be defined to ensure links have text. | ||
children: ReactNode; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string | undefined; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string | undefined; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from anchor. | ||
*/ | ||
analyticsContext?: Record<string, any> | undefined; | ||
} & { | ||
@@ -33,0 +71,0 @@ ref?: React.Ref<HTMLAnchorElement> | undefined; |
@@ -1,4 +0,5 @@ | ||
import { type ReactElement, type ReactNode } from 'react'; | ||
import React, { type ReactNode } from 'react'; | ||
import { UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type BoxProps } from './box'; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & { | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style' | 'onClick'> & { | ||
/** | ||
@@ -10,4 +11,21 @@ * `children` should be defined to ensure buttons are not empty, | ||
isDisabled?: boolean; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from pressable. | ||
*/ | ||
analyticsContext?: Record<string, any>; | ||
}; | ||
type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null; | ||
/** | ||
@@ -24,3 +42,28 @@ * __UNSAFE_PRESSABLE__ | ||
*/ | ||
declare const UNSAFE_PRESSABLE: PressableComponent; | ||
declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
isDisabled?: boolean | undefined; | ||
/** | ||
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
*/ | ||
onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined; | ||
/** | ||
* An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
interactionName?: string | undefined; | ||
/** | ||
* An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information, | ||
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration). | ||
*/ | ||
componentName?: string | undefined; | ||
/** | ||
* Additional information to be included in the `context` of analytics events that come from pressable. | ||
*/ | ||
analyticsContext?: Record<string, any> | undefined; | ||
}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default UNSAFE_PRESSABLE; |
@@ -18,3 +18,5 @@ export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial'; | ||
export type { TextProps } from './components/text'; | ||
export { default as UNSAFE_Pressable } from './components/pressable'; | ||
export type { PressableProps as UNSAFE_PressableProps } from './components/pressable'; | ||
export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive'; | ||
export type { Breakpoint, MediaQuery } from './responsive'; |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "2.0.3", | ||
"version": "2.1.0", | ||
"description": "Primitives are token-backed low-level building blocks.", | ||
@@ -107,3 +107,6 @@ "publishConfig": { | ||
"dependencies": { | ||
"@atlaskit/analytics-next": "^9.2.0", | ||
"@atlaskit/app-provider": "^1.0.0", | ||
"@atlaskit/ds-lib": "^2.2.0", | ||
"@atlaskit/interaction-context": "^2.1.0", | ||
"@atlaskit/tokens": "^1.38.0", | ||
@@ -121,3 +124,2 @@ "@babel/runtime": "^7.0.0", | ||
"@af/accessibility-testing": "*", | ||
"@atlaskit/ds-lib": "*", | ||
"@atlaskit/ssr": "*", | ||
@@ -124,0 +126,0 @@ "@atlaskit/visual-regression": "*", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1807927
13
14840
11
+ Added@atlaskit/ds-lib@^2.2.0
+ Added@atlaskit/analytics-next@9.3.4(transitive)
+ Added@atlaskit/analytics-next-stable-react-context@1.0.1(transitive)
+ Added@atlaskit/interaction-context@2.1.6(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedreact@16.14.018.2.0(transitive)
+ Addeduse-memo-one@1.1.3(transitive)