@atlaskit/primitives 1.6.8 → 1.7.0

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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/link.js +106 -0
  3. package/dist/es2019/components/link.js +94 -0
  4. package/dist/esm/components/link.js +96 -0
  5. package/dist/types/components/link.d.ts +24 -0
  6. package/dist/types-ts4.5/components/link.d.ts +24 -0
  7. package/link/package.json +15 -0
  8. package/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#42130](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42130) [`a64dc3026de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a64dc3026de) - Create the new Link primitive (Unsafe to use, still in Alpha)
8
+
3
9
  ## 1.6.8
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/link.js ADDED
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _appProvider = require("@atlaskit/app-provider");
14
+ var _xcss = require("../xcss/xcss");
15
+ var _box = _interopRequireDefault(require("./box"));
16
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
17
+ 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); }
18
+ 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; }
19
+ // TODO: Duplicated FocusRing styles due to lack of `xcss` support
20
+ // and to prevent additional dependency
21
+ var baseFocusRingStyles = {
22
+ outlineColor: 'color.border.focused',
23
+ outlineWidth: 'border.width.outline',
24
+ outlineStyle: 'solid',
25
+ outlineOffset: 'space.025'
26
+ };
27
+ var focusRingStyles = (0, _xcss.xcss)({
28
+ ':focus-visible': baseFocusRingStyles,
29
+ '@supports not selector(*:focus-visible)': {
30
+ ':focus': baseFocusRingStyles
31
+ },
32
+ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
33
+ ':focus-visible': {
34
+ outline: '1px solid'
35
+ }
36
+ }
37
+ });
38
+ var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
39
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
40
+
41
+ /**
42
+ * __UNSAFE_LINK__
43
+ *
44
+ * @internal Still under development. Do not use.
45
+ *
46
+ * A Link is a primitive component that renders a `<a>` anchor. It utilizes
47
+ * the configured link component in the AppProvider if set.
48
+ *
49
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
50
+ * - [Code](https://atlassian.design/components/primitives/link/code)
51
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
52
+ */
53
+ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
54
+ var href = _ref.href,
55
+ children = _ref.children,
56
+ backgroundColor = _ref.backgroundColor,
57
+ padding = _ref.padding,
58
+ paddingBlock = _ref.paddingBlock,
59
+ paddingBlockStart = _ref.paddingBlockStart,
60
+ paddingBlockEnd = _ref.paddingBlockEnd,
61
+ paddingInline = _ref.paddingInline,
62
+ paddingInlineStart = _ref.paddingInlineStart,
63
+ paddingInlineEnd = _ref.paddingInlineEnd,
64
+ testId = _ref.testId,
65
+ xcssStyles = _ref.xcss,
66
+ target = _ref.target,
67
+ rel = _ref.rel,
68
+ htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
69
+ var RouterLink = (0, _appProvider.useRouterLink)();
70
+
71
+ // Combine default styles with supplied styles. XCSS does not support deep nested arrays
72
+ var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [focusRingStyles, xcssStyles];
73
+ var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
74
+ var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
75
+
76
+ /**
77
+ * Renders a router link if:
78
+ * - a link component is set in the app provider
79
+ * - it's not an external link (starting with http:// or https://)
80
+ * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
81
+ */
82
+ var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
83
+ return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
84
+ // TODO: Box doesn't allow `as` components
85
+ // @ts-expect-error
86
+ as: isRouterLink ? RouterLink : 'a',
87
+ ref: ref,
88
+ testId: testId,
89
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
90
+ href: typeof href === 'string' ? href : undefined,
91
+ target: isExternal && target === undefined ? '_blank' : target,
92
+ rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
93
+ backgroundColor: backgroundColor,
94
+ padding: padding,
95
+ paddingBlock: paddingBlock,
96
+ paddingBlockStart: paddingBlockStart,
97
+ paddingBlockEnd: paddingBlockEnd,
98
+ paddingInline: paddingInline,
99
+ paddingInlineStart: paddingInlineStart,
100
+ paddingInlineEnd: paddingInlineEnd
101
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
102
+ ,
103
+ xcss: styles
104
+ }), children);
105
+ });
106
+ var _default = exports.default = UNSAFE_LINK;
package/dist/es2019/components/link.js ADDED
@@ -0,0 +1,94 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { forwardRef } from 'react';
3
+ import { useRouterLink } from '@atlaskit/app-provider';
4
+ import { xcss } from '../xcss/xcss';
5
+ import Box from './box';
6
+ // TODO: Duplicated FocusRing styles due to lack of `xcss` support
7
+ // and to prevent additional dependency
8
+ const baseFocusRingStyles = {
9
+ outlineColor: 'color.border.focused',
10
+ outlineWidth: 'border.width.outline',
11
+ outlineStyle: 'solid',
12
+ outlineOffset: 'space.025'
13
+ };
14
+ const focusRingStyles = xcss({
15
+ ':focus-visible': baseFocusRingStyles,
16
+ '@supports not selector(*:focus-visible)': {
17
+ ':focus': baseFocusRingStyles
18
+ },
19
+ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
20
+ ':focus-visible': {
21
+ outline: '1px solid'
22
+ }
23
+ }
24
+ });
25
+ const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
26
+ const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
27
+
28
+ /**
29
+ * __UNSAFE_LINK__
30
+ *
31
+ * @internal Still under development. Do not use.
32
+ *
33
+ * A Link is a primitive component that renders a `<a>` anchor. It utilizes
34
+ * the configured link component in the AppProvider if set.
35
+ *
36
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
37
+ * - [Code](https://atlassian.design/components/primitives/link/code)
38
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
39
+ */
40
+ const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
41
+ href,
42
+ children,
43
+ backgroundColor,
44
+ padding,
45
+ paddingBlock,
46
+ paddingBlockStart,
47
+ paddingBlockEnd,
48
+ paddingInline,
49
+ paddingInlineStart,
50
+ paddingInlineEnd,
51
+ testId,
52
+ xcss: xcssStyles,
53
+ target,
54
+ rel,
55
+ ...htmlAttributes
56
+ }, ref) => {
57
+ const RouterLink = useRouterLink();
58
+
59
+ // Combine default styles with supplied styles. XCSS does not support deep nested arrays
60
+ const styles = Array.isArray(xcssStyles) ? [focusRingStyles, ...xcssStyles] : [focusRingStyles, xcssStyles];
61
+ const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
62
+ const isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
63
+
64
+ /**
65
+ * Renders a router link if:
66
+ * - a link component is set in the app provider
67
+ * - it's not an external link (starting with http:// or https://)
68
+ * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
69
+ */
70
+ const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
71
+ return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
72
+ // TODO: Box doesn't allow `as` components
73
+ // @ts-expect-error
74
+ as: isRouterLink ? RouterLink : 'a',
75
+ ref: ref,
76
+ testId: testId,
77
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
78
+ href: typeof href === 'string' ? href : undefined,
79
+ target: isExternal && target === undefined ? '_blank' : target,
80
+ rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
81
+ backgroundColor: backgroundColor,
82
+ padding: padding,
83
+ paddingBlock: paddingBlock,
84
+ paddingBlockStart: paddingBlockStart,
85
+ paddingBlockEnd: paddingBlockEnd,
86
+ paddingInline: paddingInline,
87
+ paddingInlineStart: paddingInlineStart,
88
+ paddingInlineEnd: paddingInlineEnd
89
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
90
+ ,
91
+ xcss: styles
92
+ }), children);
93
+ });
94
+ export default UNSAFE_LINK;
package/dist/esm/components/link.js ADDED
@@ -0,0 +1,96 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
5
+ import React, { forwardRef } from 'react';
6
+ import { useRouterLink } from '@atlaskit/app-provider';
7
+ import { xcss } from '../xcss/xcss';
8
+ import Box from './box';
9
+ // TODO: Duplicated FocusRing styles due to lack of `xcss` support
10
+ // and to prevent additional dependency
11
+ var baseFocusRingStyles = {
12
+ outlineColor: 'color.border.focused',
13
+ outlineWidth: 'border.width.outline',
14
+ outlineStyle: 'solid',
15
+ outlineOffset: 'space.025'
16
+ };
17
+ var focusRingStyles = xcss({
18
+ ':focus-visible': baseFocusRingStyles,
19
+ '@supports not selector(*:focus-visible)': {
20
+ ':focus': baseFocusRingStyles
21
+ },
22
+ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
23
+ ':focus-visible': {
24
+ outline: '1px solid'
25
+ }
26
+ }
27
+ });
28
+ var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
29
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
30
+
31
+ /**
32
+ * __UNSAFE_LINK__
33
+ *
34
+ * @internal Still under development. Do not use.
35
+ *
36
+ * A Link is a primitive component that renders a `<a>` anchor. It utilizes
37
+ * the configured link component in the AppProvider if set.
38
+ *
39
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
40
+ * - [Code](https://atlassian.design/components/primitives/link/code)
41
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
42
+ */
43
+ var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
44
+ var href = _ref.href,
45
+ children = _ref.children,
46
+ backgroundColor = _ref.backgroundColor,
47
+ padding = _ref.padding,
48
+ paddingBlock = _ref.paddingBlock,
49
+ paddingBlockStart = _ref.paddingBlockStart,
50
+ paddingBlockEnd = _ref.paddingBlockEnd,
51
+ paddingInline = _ref.paddingInline,
52
+ paddingInlineStart = _ref.paddingInlineStart,
53
+ paddingInlineEnd = _ref.paddingInlineEnd,
54
+ testId = _ref.testId,
55
+ xcssStyles = _ref.xcss,
56
+ target = _ref.target,
57
+ rel = _ref.rel,
58
+ htmlAttributes = _objectWithoutProperties(_ref, _excluded);
59
+ var RouterLink = useRouterLink();
60
+
61
+ // Combine default styles with supplied styles. XCSS does not support deep nested arrays
62
+ var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [focusRingStyles, xcssStyles];
63
+ var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
64
+ var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
65
+
66
+ /**
67
+ * Renders a router link if:
68
+ * - a link component is set in the app provider
69
+ * - it's not an external link (starting with http:// or https://)
70
+ * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
71
+ */
72
+ var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
73
+ return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
74
+ // TODO: Box doesn't allow `as` components
75
+ // @ts-expect-error
76
+ as: isRouterLink ? RouterLink : 'a',
77
+ ref: ref,
78
+ testId: testId,
79
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
80
+ href: typeof href === 'string' ? href : undefined,
81
+ target: isExternal && target === undefined ? '_blank' : target,
82
+ rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
83
+ backgroundColor: backgroundColor,
84
+ padding: padding,
85
+ paddingBlock: paddingBlock,
86
+ paddingBlockStart: paddingBlockStart,
87
+ paddingBlockEnd: paddingBlockEnd,
88
+ paddingInline: paddingInline,
89
+ paddingInlineStart: paddingInlineStart,
90
+ paddingInlineEnd: paddingInlineEnd
91
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
92
+ ,
93
+ xcss: styles
94
+ }), children);
95
+ });
96
+ export default UNSAFE_LINK;
package/dist/types/components/link.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { type ReactElement, type ReactNode } from 'react';
2
+ import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
+ import { type BoxProps } from './box';
4
+ export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
5
+ /**
6
+ * `children` should be defined to ensure links have text
7
+ */
8
+ children: ReactNode;
9
+ };
10
+ type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
11
+ /**
12
+ * __UNSAFE_LINK__
13
+ *
14
+ * @internal Still under development. Do not use.
15
+ *
16
+ * A Link is a primitive component that renders a `<a>` anchor. It utilizes
17
+ * the configured link component in the AppProvider if set.
18
+ *
19
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
+ * - [Code](https://atlassian.design/components/primitives/link/code)
21
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
+ */
23
+ declare const UNSAFE_LINK: LinkComponent;
24
+ export default UNSAFE_LINK;
package/dist/types-ts4.5/components/link.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { type ReactElement, type ReactNode } from 'react';
2
+ import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
+ import { type BoxProps } from './box';
4
+ export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
5
+ /**
6
+ * `children` should be defined to ensure links have text
7
+ */
8
+ children: ReactNode;
9
+ };
10
+ type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
11
+ /**
12
+ * __UNSAFE_LINK__
13
+ *
14
+ * @internal Still under development. Do not use.
15
+ *
16
+ * A Link is a primitive component that renders a `<a>` anchor. It utilizes
17
+ * the configured link component in the AppProvider if set.
18
+ *
19
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
+ * - [Code](https://atlassian.design/components/primitives/link/code)
21
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
+ */
23
+ declare const UNSAFE_LINK: LinkComponent;
24
+ export default UNSAFE_LINK;
package/link/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@atlaskit/primitives/link",
3
+ "main": "../dist/cjs/components/link.js",
4
+ "module": "../dist/esm/components/link.js",
5
+ "module:es2019": "../dist/es2019/components/link.js",
6
+ "sideEffects": false,
7
+ "types": "../dist/types/components/link.d.ts",
8
+ "typesVersions": {
9
+ ">=4.5 <4.9": {
10
+ "*": [
11
+ "../dist/types-ts4.5/components/link.d.ts"
12
+ ]
13
+ }
14
+ }
15
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.6.8",
3
+ "version": "1.7.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -125,6 +125,7 @@
125
125
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
126
126
  },
127
127
  "dependencies": {
128
+ "@atlaskit/app-provider": "^0.3.0",
128
129
  "@atlaskit/tokens": "^1.28.0",
129
130
  "@babel/runtime": "^7.0.0",
130
131
  "@emotion/react": "^11.7.1",
@@ -191,6 +192,7 @@
191
192
  "./stack": "./src/components/stack.tsx",
192
193
  "./inline": "./src/components/inline.tsx",
193
194
  "./pressable": "./src/components/pressable.tsx",
195
+ "./link": "./src/components/link.tsx",
194
196
  "./responsive": "./src/responsive/index.tsx"
195
197
  },
196
198
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"