@atlaskit/primitives 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 5.2.0
+
+### Minor Changes
+
+- [#86279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86279) [`0988fda99a0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0988fda99a0d) - Renaming text alignment prop for Text component from `textAlign` to `align`
+
+## 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

package/constellation/text/examples.mdx

@@ -7,6 +7,7 @@ order: 0
 import Basic from '../../examples/constellation/text/basic';
 import ColorInverse from '../../examples/constellation/text/color-inverse';
 import Weight from '../../examples/constellation/text/weight';
+import Align from '../../examples/constellation/text/align';
 import AsElement from '../../examples/constellation/text/as-element';
 
 ## Basic
@@ -15,19 +16,25 @@ Implements the [Atlassian typography system](/foundations/typography/) as a comp
 
 The `size` prop expresses the visual appearance of the text element.
 
-<Example Component={Basic} pacckageName="@atlaskit/primitives" />
+<Example Component={Basic} packageName="@atlaskit/primitives" />
 
 ## Color
 
 Set `color` to change the text color, defaults to `text.color` if not nested in other Text components. When used within a [box component](/components/primitives/box) that has a bold background color, the text color will automatically be inverted.
 
-<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
+<Example Component={ColorInverse} packageName="@atlaskit/primitives" />
 
 ## Weight
 
 Set `weight` to change the font weight.
 
-<Example Component={Weight} pacckageName="@atlaskit/primitives" />
+<Example Component={Weight} packageName="@atlaskit/primitives" />
+
+## Alignment
+
+Set `align` to change the text alignment.
+
+<Example Component={Align} packageName="@atlaskit/primitives" />
 
 ## Rendered HTML tag
 

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.1",
+    packageVersion: "5.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/bleed.js

@@ -8,10 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box'

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.1",
+    packageVersion: "5.2.0",
     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,24 +82,26 @@ 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,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? textAlign : _ref$align,
+    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, {
-    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],
+    ref: ref,
+    css: [resetStyles, _styleMaps.fontStylesMap[size], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
@@ -112,5 +113,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.1",
+    packageVersion: "5.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/bleed.js

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';

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.1",
+    packageVersion: "5.2.0",
     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,25 +72,24 @@ 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,
+  align = 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, {
-    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],
+    ref: ref,
+    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
@@ -102,5 +101,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.1",
+    packageVersion: "5.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/bleed.js

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';

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.1",
+    packageVersion: "5.2.0",
     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,24 +74,26 @@ 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,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? textAlign : _ref$align,
+    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, {
-    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],
+    ref: ref,
+    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
@@ -105,5 +105,5 @@ var Text = function Text(_ref) {
   component : jsx(HasTextAncestorContext.Provider, {
     value: true
   }, component);
-};
+});
 export default Text;

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

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React, { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import type { BasePrimitiveProps } from './types';

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`.
      */
@@ -30,9 +30,13 @@ type TextPropsBase = {
      */
     maxLines?: number;
     /**
-     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
+     * @deprecated The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign;
     /**
      * Text size.
      */
@@ -41,8 +45,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 +66,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" | "align" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

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

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React, { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import type { BasePrimitiveProps } from './types';

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`.
      */
@@ -35,9 +35,13 @@ type TextPropsBase = {
      */
     maxLines?: number;
     /**
-     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
+     * @deprecated The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign;
     /**
      * Text size.
      */
@@ -46,8 +50,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 +71,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" | "align" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"