@atlaskit/primitives 1.0.11 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/primitives
 
+## 1.1.0
+
+### Minor Changes
+
+- [`0116391a81e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0116391a81e) - - Support `xcss` in `Pressable`
+  - Remove dependency on `@atlaskit/focus-ring`
+
 ## 1.0.11
 
 ### Patch Changes

package/dist/cjs/components/pressable.js

@@ -1,22 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
-var _baseBox = _interopRequireDefault(require("./internal/base-box"));
-var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
-/** @jsx jsx */
-var defaultStyles = (0, _react2.css)({
+var _react = _interopRequireWildcard(require("react"));
+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"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var defaultStyles = (0, _xcss.xcss)({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+var baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+var focusRingStyles = (0, _xcss.xcss)({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -42,8 +64,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    xcssStyles = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_baseBox.default, (0, _extends2.default)({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  var styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
+  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -55,10 +81,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 var _default = UNSAFE_PRESSABLE;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/es2019/components/pressable.js

@@ -1,13 +1,31 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
-import BaseBox from './internal/base-box';
-const defaultStyles = css({
+import React, { forwardRef } from 'react';
+import { xcss } from '../xcss/xcss';
+import Box from './box';
+const defaultStyles = xcss({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+const baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+const focusRingStyles = xcss({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -32,9 +50,13 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
   isDisabled,
   type = 'button',
   testId,
+  xcss: xcssStyles,
   ...htmlAttributes
 }, ref) => {
-  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  let styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
+  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -46,9 +68,11 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 export default UNSAFE_PRESSABLE;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/esm/components/pressable.js

@@ -1,15 +1,34 @@
 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"];
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
-import BaseBox from './internal/base-box';
-var defaultStyles = css({
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"];
+import React, { forwardRef } from 'react';
+import { xcss } from '../xcss/xcss';
+import Box from './box';
+var defaultStyles = xcss({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+var baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+var focusRingStyles = xcss({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -35,8 +54,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    xcssStyles = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  var styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
+  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -48,9 +71,11 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 export default UNSAFE_PRESSABLE;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/types/components/pressable.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import { type ReactElement, type ReactNode } from 'react';
-import { type BaseBoxProps } from './internal/base-box';
-export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+import { type BoxProps } from './box';
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
     /**
      * `children` should be defined to ensure buttons are not empty,
      * because they should have labels.

package/dist/types-ts4.5/components/pressable.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import { type ReactElement, type ReactNode } from 'react';
-import { type BaseBoxProps } from './internal/base-box';
-export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+import { type BoxProps } from './box';
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
     /**
      * `children` should be defined to ensure buttons are not empty,
      * because they should have labels.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -113,7 +113,6 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",