@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
140 lines (137 loc) • 6.94 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
_excluded2 = ["className"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { forwardRef, useCallback, useContext } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import noop from '@atlaskit/ds-lib/noop';
import InteractionContext from '@atlaskit/interaction-context';
import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
import { parseXcss } from '../xcss/xcss';
// This duplicates FocusRing styles from `@atlaskit/focus-ring`.
var focusRingStyles = css({
'&:focus, &:focus-visible': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
outlineColor: borderColorMap['color.border.focused'],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
outlineOffset: positiveSpaceMap['space.025'],
outlineStyle: 'solid',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
outlineWidth: borderWidthMap['border.width.outline']
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:focus:not(:focus-visible)': {
outline: 'none'
},
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
'&:focus-visible': {
outline: '1px solid'
}
}
});
var baseStyles = css({
boxSizing: 'border-box',
appearance: 'none',
border: 'none'
});
var enabledStyles = css({
cursor: 'pointer'
});
var disabledStyles = css({
cursor: 'not-allowed'
});
/**
* __Pressable__
*
* A primitive for building custom buttons.
*
* - [Examples](https://atlassian.design/components/primitives/pressable/examples)
* - [Code](https://atlassian.design/components/primitives/pressable/code)
* - [Usage](https://atlassian.design/components/primitives/pressable/usage)
*/
var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
backgroundColor = _ref.backgroundColor,
padding = _ref.padding,
paddingBlock = _ref.paddingBlock,
paddingBlockStart = _ref.paddingBlockStart,
paddingBlockEnd = _ref.paddingBlockEnd,
paddingInline = _ref.paddingInline,
paddingInlineStart = _ref.paddingInlineStart,
paddingInlineEnd = _ref.paddingInlineEnd,
isDisabled = _ref.isDisabled,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'button' : _ref$type,
_ref$onClick = _ref.onClick,
providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
interactionName = _ref.interactionName,
componentName = _ref.componentName,
analyticsContext = _ref.analyticsContext,
style = _ref.style,
testId = _ref.testId,
xcss = _ref.xcss,
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: "14.2.1",
analyticsData: analyticsContext,
actionSubject: 'button'
});
// This is to remove className from safeHtmlAttributes
// @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
var _spreadClass = htmlAttributes.className,
safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
var resolvedStyles = parseXcss(xcss);
return (
// eslint-disable-next-line @atlaskit/design-system/no-html-button
jsx("button", _extends({
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
ref: ref
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: resolvedStyles.static
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, safeHtmlAttributes, {
// eslint-disable-next-line react/button-has-type
type: type,
onClick: onClick,
disabled: isDisabled,
css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
backgroundColor && backgroundColorStylesMap[backgroundColor],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
padding && paddingStylesMap.padding[padding],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingInline && paddingStylesMap.paddingInline[paddingInline],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
resolvedStyles.emotion],
"data-testid": testId
}), children)
);
});
export default Pressable;