@atlaskit/primitives 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 5.1.2
+
+### Patch Changes
+
+- [#80174](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80174) [`2a4fd6ccba31`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a4fd6ccba31) - Add forwardRef to text component
+
+## 5.1.1
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+- Updated dependencies
+
 ## 5.1.0
 
 ### Minor Changes

package/anchor/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/anchor.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/anchor.d.ts"
       ]

package/box/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/box.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/box.d.ts"
       ]

package/dist/cjs/components/anchor.js

@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/text.js

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
-var _excluded = ["children"];
 /** @jsx jsx */
+
 var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
 // Long term we should remove those instances from the reset - it should be a reset to 0.
@@ -83,23 +82,23 @@ var useColor = function useColor(colorProp, hasTextAncestor) {
  *
  * @internal
  */
-var Text = function Text(_ref) {
-  var children = _ref.children,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
-    colorProp = props.color,
-    textAlign = props.textAlign,
-    testId = props.testId,
-    id = props.id,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    weight = props.weight,
-    maxLines = props.maxLines;
+var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    colorProp = _ref.color,
+    textAlign = _ref.textAlign,
+    testId = _ref.testId,
+    id = _ref.id,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    weight = _ref.weight,
+    maxLines = _ref.maxLines,
+    children = _ref.children;
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
+    ref: ref,
     css: [resetStyles, _styleMaps.fontStylesMap[size], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
@@ -112,5 +111,5 @@ var Text = function Text(_ref) {
   component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
     value: true
   }, component);
-};
+});
 var _default = exports.default = Text;

package/dist/es2019/components/anchor.js

@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/text.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { createContext, useContext } from 'react';
+import { createContext, forwardRef, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
@@ -72,24 +72,22 @@ const useColor = (colorProp, hasTextAncestor) => {
  *
  * @internal
  */
-const Text = ({
-  children,
-  ...props
-}) => {
-  const {
-    as: Component = 'span',
-    color: colorProp,
-    textAlign,
-    testId,
-    id,
-    size = 'medium',
-    weight,
-    maxLines
-  } = props;
+const Text = /*#__PURE__*/forwardRef(({
+  as: Component = 'span',
+  color: colorProp,
+  textAlign,
+  testId,
+  id,
+  size = 'medium',
+  weight,
+  maxLines,
+  children
+}, ref) => {
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
   const hasTextAncestor = useHasTextAncestor();
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
+    ref: ref,
     css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
@@ -102,5 +100,5 @@ const Text = ({
   component : jsx(HasTextAncestorContext.Provider, {
     value: true
   }, component);
-};
+});
 export default Text;

package/dist/esm/components/anchor.js

@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.1.0",
+    packageVersion: "5.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/text.js

@@ -1,7 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
 /** @jsx jsx */
-import { createContext, useContext } from 'react';
+import { createContext, forwardRef, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
@@ -76,23 +74,23 @@ var useColor = function useColor(colorProp, hasTextAncestor) {
  *
  * @internal
  */
-var Text = function Text(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
-    colorProp = props.color,
-    textAlign = props.textAlign,
-    testId = props.testId,
-    id = props.id,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    weight = props.weight,
-    maxLines = props.maxLines;
+var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    colorProp = _ref.color,
+    textAlign = _ref.textAlign,
+    testId = _ref.testId,
+    id = _ref.id,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    weight = _ref.weight,
+    maxLines = _ref.maxLines,
+    children = _ref.children;
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
+    ref: ref,
     css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
@@ -105,5 +103,5 @@ var Text = function Text(_ref) {
   component : jsx(HasTextAncestorContext.Provider, {
     value: true
   }, component);
-};
+});
 export default Text;

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

@@ -40,30 +40,7 @@ declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ h
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
-    /**
-     * `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;
-} & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof Anchor>;
 export default UNSAFE_ANCHOR;

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

@@ -1,10 +1,10 @@
 /** @jsx jsx */
-import { FC, ReactNode } from 'react';
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
-type TextPropsBase = {
+type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */
@@ -41,8 +41,12 @@ type TextPropsBase = {
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
 };
-export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
+export type TextProps<T extends ElementType = 'span'> = TextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;
@@ -58,5 +62,5 @@ declare const textAlignMap: {
  *
  * @internal
  */
-declare const Text: FC<TextProps>;
+declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

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

@@ -40,30 +40,7 @@ declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ h
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
-    /**
-     * `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;
-} & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof Anchor>;
 export default UNSAFE_ANCHOR;

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, ReactNode } from 'react';
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
@@ -9,7 +9,7 @@ declare const asAllowlist: readonly [
     "em"
 ];
 type AsElement = (typeof asAllowlist)[number];
-type TextPropsBase = {
+type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */
@@ -46,8 +46,12 @@ type TextPropsBase = {
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
 };
-export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
+export type TextProps<T extends ElementType = 'span'> = TextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;
@@ -63,5 +67,5 @@ declare const textAlignMap: {
  *
  * @internal
  */
-declare const Text: FC<TextProps>;
+declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

package/inline/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/inline.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/inline.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -124,7 +124,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/app-provider": "^1.0.0",
-    "@atlaskit/css": "^0.0.4",
+    "@atlaskit/css": "^0.0.5",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/tokens": "^1.42.0",
@@ -149,7 +149,7 @@
     "prettier": "^2.8.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/pressable/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/pressable.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/pressable.d.ts"
       ]

package/responsive/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/responsive/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/responsive/index.d.ts"
       ]

package/stack/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/stack.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/stack.d.ts"
       ]

package/text/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/components/text.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/components/text.d.ts"
       ]