@atlaskit/tile 1.1.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/tile
 
+## 2.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/tile.compiled.css

@@ -142,6 +142,7 @@
 ._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
 ._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
 ._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
+._s7n4nkob{vertical-align:middle}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/cjs/tile.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf _s7n4nkob",
   border: "_189ee4h9 _1dqonqa1 _1h6d1l7x",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"

package/dist/es2019/tile.compiled.css

@@ -142,6 +142,7 @@
 ._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
 ._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
 ._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
+._s7n4nkob{vertical-align:middle}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/es2019/tile.js

@@ -4,7 +4,7 @@ import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 const styles = {
-  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf _s7n4nkob",
   border: "_189ee4h9 _1dqonqa1 _1h6d1l7x",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"

package/dist/esm/tile.compiled.css

@@ -142,6 +142,7 @@
 ._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
 ._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
 ._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
+._s7n4nkob{vertical-align:middle}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/esm/tile.js

@@ -4,7 +4,7 @@ import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 var styles = {
-  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf _s7n4nkob",
   border: "_189ee4h9 _1dqonqa1 _1h6d1l7x",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"

package/package.json

@@ -19,21 +19,13 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <5.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/skeleton": "^3.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -43,11 +35,12 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -88,7 +81,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "A tile is a rounded square that takes an asset and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

package/skeleton/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/skeleton.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/skeleton.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/skeleton.d.ts"
 }

package/tile/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/tile.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/tile.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/tile.d.ts"
 }

package/tile.docs.tsx

@@ -1,30 +1,32 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Tile',
-		description:
-			'A tile is a versatile, foundational container with baked-in sizing and radii properties for displaying elements in a tile shape.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Tile',
-			package: '@atlaskit/tile',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		examples: [
-			{
-				name: 'Basic',
-				description: 'Basic tile example',
-				source: path.resolve(__dirname, './examples/basic.tsx'),
+			description:
+				'A tile is a versatile, foundational container with baked-in sizing and radii properties for displaying elements in a tile shape.',
+			status: 'general-availability',
+			import: {
+				name: 'Tile',
+				package: '@atlaskit/tile',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['tile', 'icon', 'container', 'avatar', 'asset', 'emoji', 'logo', 'shape'],
-		categories: ['images and icons', 'layout'],
-	},
-];
+			examples: [
+				{
+					name: 'Basic',
+					description: 'Basic tile example',
+					source: path.resolve(__dirname, './examples/basic.tsx'),
+				},
+			],
+			keywords: ['tile', 'icon', 'container', 'avatar', 'asset', 'emoji', 'logo', 'shape'],
+			categories: ['images and icons', 'layout'],
+		},
+	],
+};
 
 export default documentation;

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/entry-points/skeleton.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../skeleton';
-export { type TileSkeletonProps } from '../types';

package/dist/types-ts4.5/entry-points/tile.d.ts

@@ -1 +0,0 @@
-export { default } from '../tile';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { TileProps, TileSkeletonProps } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './entry-points/tile';
-export { type TileProps } from './entry-points/types';
-export { default as TileSkeleton, type TileSkeletonProps } from './entry-points/skeleton';

package/dist/types-ts4.5/skeleton.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { TileSkeletonProps } from './types';
-/**
- * __Tile Skeleton__
- *
- * A tile skeleton is the loading state for the tile component.
- *
- */
-export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: TileSkeletonProps): React.JSX.Element;

package/dist/types-ts4.5/tile.d.ts

@@ -1,8 +0,0 @@
-import { type TileProps } from './types';
-/**
- * __Tile__
- *
- * A tile is a rounded square that takes an asset and represents a noun.
- *
- */
-export default function Tile(props: TileProps): JSX.Element;

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

@@ -1,70 +0,0 @@
-export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'transparent' | 'white' | 'black';
-export type TileProps = {
-    /**
-     * The label for the icon.
-     *
-     * If the tile is decorative, this can be set to an empty string.
-     */
-    label: string;
-    /**
-     * The size of the tile.
-     *
-     * - `xxsmall`: 16px
-     * - `xsmall`: 20px
-     * - `small`: 24px
-     * - `medium`: 32px
-     * - `large`: 40px
-     * - `xlarge`: 48px
-     */
-    size?: TileSize;
-    /**
-     * Whether the tile applies internal inset / padding. Used to provide appropriate spacing for assets when needed. Defaults to `true`.
-     */
-    isInset?: boolean;
-    /**
-     * Whether the tile has a border.
-     *
-     * Defaults to `false`.
-     */
-    hasBorder?: boolean;
-    /**
-     * The background color of the tile.
-     *
-     * Accepts design tokens representing background color.
-     * Defaults to `color.background.neutral`.
-     */
-    backgroundColor?: TileBackgroundColor;
-    /**
-     * The asset to be displayed inside the tile.
-     * This should represent a noun.
-     */
-    children?: React.ReactNode;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-};
-export type TileSkeletonProps = {
-    /**
-     * Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
-     */
-    color?: string;
-    /**
-     * Overrides the default shimmering ending color of skeleton.
-     */
-    shimmeringEndColor?: string;
-    /**
-     * Enables the shimmering animation.
-     */
-    isShimmering?: boolean;
-    size?: TileProps['size'];
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-};