@atlaskit/primitives 1.7.0 → 1.8.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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/link.js +28 -21
  3. package/dist/es2019/components/link.js +25 -19
  4. package/dist/esm/components/link.js +26 -19
  5. package/dist/types/components/link.d.ts +13 -6
  6. package/dist/types-ts4.5/components/link.d.ts +13 -6
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Link primitive will now throw an error if a router link configuration object is passed to the `href` prop when there is not a router link component set in the AppProvider
8
+
9
+ ### Patch Changes
10
+
11
+ - [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Fixes a bug where Link primitive was not passing through router link configuration objects
12
+ - Updated dependencies
13
+
3
14
  ## 1.7.0
4
15
 
5
16
  ### Minor Changes
package/dist/cjs/components/link.js CHANGED
@@ -1,21 +1,23 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
4
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
10
11
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
13
  var _react = _interopRequireWildcard(require("react"));
14
+ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
13
15
  var _appProvider = require("@atlaskit/app-provider");
14
16
  var _xcss = require("../xcss/xcss");
15
17
  var _box = _interopRequireDefault(require("./box"));
16
18
  var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
17
19
  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; }
20
+ 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; }
19
21
  // TODO: Duplicated FocusRing styles due to lack of `xcss` support
20
22
  // and to prevent additional dependency
21
23
  var baseFocusRingStyles = {
@@ -37,20 +39,7 @@ var focusRingStyles = (0, _xcss.xcss)({
37
39
  });
38
40
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
39
41
  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) {
42
+ var Link = function Link(_ref, ref) {
54
43
  var href = _ref.href,
55
44
  children = _ref.children,
56
45
  backgroundColor = _ref.backgroundColor,
@@ -80,14 +69,17 @@ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
80
69
  * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
81
70
  */
82
71
  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
72
+ var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
73
+ (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
74
+ return /*#__PURE__*/_react.default.createElement(_box.default
75
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
76
+ , (0, _extends2.default)({}, htmlAttributes, {
77
+ // @ts-expect-error (TODO: Box doesn't allow `as` components)
86
78
  as: isRouterLink ? RouterLink : 'a',
87
79
  ref: ref,
88
80
  testId: testId,
89
81
  "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
90
- href: typeof href === 'string' ? href : undefined,
82
+ href: !isRouterLink && typeof href !== 'string' ? undefined : href,
91
83
  target: isExternal && target === undefined ? '_blank' : target,
92
84
  rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
93
85
  backgroundColor: backgroundColor,
@@ -102,5 +94,20 @@ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
102
94
  ,
103
95
  xcss: styles
104
96
  }), children);
105
- });
97
+ };
98
+
99
+ // Workarounds to support generic types with forwardRef
100
+ /**
101
+ * __UNSAFE_LINK__
102
+ *
103
+ * @internal Still under development. Do not use.
104
+ *
105
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
106
+ * the configured router link component in the AppProvider if set.
107
+ *
108
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
109
+ * - [Code](https://atlassian.design/components/primitives/link/code)
110
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
111
+ */
112
+ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(Link);
106
113
  var _default = exports.default = UNSAFE_LINK;
package/dist/es2019/components/link.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef } from 'react';
3
+ import invariant from 'tiny-invariant';
3
4
  import { useRouterLink } from '@atlaskit/app-provider';
4
5
  import { xcss } from '../xcss/xcss';
5
6
  import Box from './box';
@@ -24,20 +25,7 @@ const focusRingStyles = xcss({
24
25
  });
25
26
  const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
26
27
  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(({
28
+ const Link = ({
41
29
  href,
42
30
  children,
43
31
  backgroundColor,
@@ -68,14 +56,17 @@ const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
68
56
  * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
69
57
  */
70
58
  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
59
+ const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
60
+ invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
61
+ return /*#__PURE__*/React.createElement(Box
62
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
63
+ , _extends({}, htmlAttributes, {
64
+ // @ts-expect-error (TODO: Box doesn't allow `as` components)
74
65
  as: isRouterLink ? RouterLink : 'a',
75
66
  ref: ref,
76
67
  testId: testId,
77
68
  "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
78
- href: typeof href === 'string' ? href : undefined,
69
+ href: !isRouterLink && typeof href !== 'string' ? undefined : href,
79
70
  target: isExternal && target === undefined ? '_blank' : target,
80
71
  rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
81
72
  backgroundColor: backgroundColor,
@@ -90,5 +81,20 @@ const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
90
81
  ,
91
82
  xcss: styles
92
83
  }), children);
93
- });
84
+ };
85
+
86
+ // Workarounds to support generic types with forwardRef
87
+ /**
88
+ * __UNSAFE_LINK__
89
+ *
90
+ * @internal Still under development. Do not use.
91
+ *
92
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
93
+ * the configured router link component in the AppProvider if set.
94
+ *
95
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
96
+ * - [Code](https://atlassian.design/components/primitives/link/code)
97
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
98
+ */
99
+ const UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
94
100
  export default UNSAFE_LINK;
package/dist/esm/components/link.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _typeof from "@babel/runtime/helpers/typeof";
2
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
5
  var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
5
6
  import React, { forwardRef } from 'react';
7
+ import invariant from 'tiny-invariant';
6
8
  import { useRouterLink } from '@atlaskit/app-provider';
7
9
  import { xcss } from '../xcss/xcss';
8
10
  import Box from './box';
@@ -27,20 +29,7 @@ var focusRingStyles = xcss({
27
29
  });
28
30
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
29
31
  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) {
32
+ var Link = function Link(_ref, ref) {
44
33
  var href = _ref.href,
45
34
  children = _ref.children,
46
35
  backgroundColor = _ref.backgroundColor,
@@ -70,14 +59,17 @@ var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
70
59
  * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
71
60
  */
72
61
  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
62
+ var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
63
+ invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
64
+ return /*#__PURE__*/React.createElement(Box
65
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
66
+ , _extends({}, htmlAttributes, {
67
+ // @ts-expect-error (TODO: Box doesn't allow `as` components)
76
68
  as: isRouterLink ? RouterLink : 'a',
77
69
  ref: ref,
78
70
  testId: testId,
79
71
  "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
80
- href: typeof href === 'string' ? href : undefined,
72
+ href: !isRouterLink && typeof href !== 'string' ? undefined : href,
81
73
  target: isExternal && target === undefined ? '_blank' : target,
82
74
  rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
83
75
  backgroundColor: backgroundColor,
@@ -92,5 +84,20 @@ var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
92
84
  ,
93
85
  xcss: styles
94
86
  }), children);
95
- });
87
+ };
88
+
89
+ // Workarounds to support generic types with forwardRef
90
+ /**
91
+ * __UNSAFE_LINK__
92
+ *
93
+ * @internal Still under development. Do not use.
94
+ *
95
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
96
+ * the configured router link component in the AppProvider if set.
97
+ *
98
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
99
+ * - [Code](https://atlassian.design/components/primitives/link/code)
100
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
101
+ */
102
+ var UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
96
103
  export default UNSAFE_LINK;
package/dist/types/components/link.d.ts CHANGED
@@ -1,24 +1,31 @@
1
- import { type ReactElement, type ReactNode } from 'react';
1
+ import React, { type ReactNode, type Ref } from 'react';
2
2
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
3
  import { type BoxProps } from './box';
4
- export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
4
+ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
5
5
  /**
6
6
  * `children` should be defined to ensure links have text
7
7
  */
8
8
  children: ReactNode;
9
9
  };
10
- type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
10
+ 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;
11
11
  /**
12
12
  * __UNSAFE_LINK__
13
13
  *
14
14
  * @internal Still under development. Do not use.
15
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.
16
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
17
+ * the configured router link component in the AppProvider if set.
18
18
  *
19
19
  * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
20
  * - [Code](https://atlassian.design/components/primitives/link/code)
21
21
  * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
22
  */
23
- declare const UNSAFE_LINK: LinkComponent;
23
+ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
24
+ /**
25
+ * `children` should be defined to ensure links have text
26
+ */
27
+ children: ReactNode;
28
+ } & {
29
+ ref?: React.Ref<HTMLAnchorElement> | undefined;
30
+ }) => ReturnType<typeof Link>;
24
31
  export default UNSAFE_LINK;
package/dist/types-ts4.5/components/link.d.ts CHANGED
@@ -1,24 +1,31 @@
1
- import { type ReactElement, type ReactNode } from 'react';
1
+ import React, { type ReactNode, type Ref } from 'react';
2
2
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
3
  import { type BoxProps } from './box';
4
- export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
4
+ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
5
5
  /**
6
6
  * `children` should be defined to ensure links have text
7
7
  */
8
8
  children: ReactNode;
9
9
  };
10
- type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
10
+ 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;
11
11
  /**
12
12
  * __UNSAFE_LINK__
13
13
  *
14
14
  * @internal Still under development. Do not use.
15
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.
16
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
17
+ * the configured router link component in the AppProvider if set.
18
18
  *
19
19
  * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
20
  * - [Code](https://atlassian.design/components/primitives/link/code)
21
21
  * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
22
  */
23
- declare const UNSAFE_LINK: LinkComponent;
23
+ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
24
+ /**
25
+ * `children` should be defined to ensure links have text
26
+ */
27
+ children: ReactNode;
28
+ } & {
29
+ ref?: React.Ref<HTMLAnchorElement> | undefined;
30
+ }) => ReturnType<typeof Link>;
24
31
  export default UNSAFE_LINK;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -125,7 +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
+ "@atlaskit/app-provider": "^0.4.0",
129
129
  "@atlaskit/tokens": "^1.28.0",
130
130
  "@babel/runtime": "^7.0.0",
131
131
  "@emotion/react": "^11.7.1",