@atlaskit/motion
Advanced tools
@atlaskit/motion - npm Package Compare versions
Comparing version 1.2.3 to 1.2.4
| # @atlaskit/motion | ||
| ## 1.2.4 | ||
| ### Patch Changes | ||
| - [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations. | ||
| ## 1.2.3 | ||
@@ -4,0 +10,0 @@ |
| { | ||
| "name": "@atlaskit/motion", | ||
| "version": "1.2.3", | ||
| "version": "1.2.4", | ||
| "sideEffects": false | ||
| } |
| { | ||
| "name": "@atlaskit/motion", | ||
| "version": "1.2.3", | ||
| "version": "1.2.4", | ||
| "sideEffects": false | ||
| } |
| { | ||
| "name": "@atlaskit/motion", | ||
| "version": "1.2.3", | ||
| "version": "1.2.4", | ||
| "sideEffects": false | ||
| } |
| { | ||
| "name": "@atlaskit/motion", | ||
| "version": "1.2.3", | ||
| "version": "1.2.4", | ||
| "description": "Atlassian motion variables, components and more.", | ||
@@ -18,3 +18,4 @@ "publishConfig": { | ||
| "*": [ | ||
| "dist/types-ts4.0/*" | ||
| "dist/types-ts4.0/*", | ||
| "dist/types-ts4.0/index.d.ts" | ||
| ] | ||
@@ -39,2 +40,3 @@ } | ||
| "atlassian": { | ||
| "disableProductCI": true, | ||
| "team": "Design System Team", | ||
@@ -59,10 +61,10 @@ "releaseModel": "scheduled", | ||
| "@atlaskit/docs": "*", | ||
| "@atlaskit/focus-ring": "^1.0.0", | ||
| "@atlaskit/logo": "^13.9.0", | ||
| "@atlaskit/focus-ring": "^1.1.0", | ||
| "@atlaskit/logo": "^13.10.0", | ||
| "@atlaskit/lozenge": "^11.2.0", | ||
| "@atlaskit/section-message": "^6.2.0", | ||
| "@atlaskit/section-message": "^6.3.0", | ||
| "@atlaskit/ssr": "*", | ||
| "@atlaskit/theme": "^12.2.0", | ||
| "@atlaskit/tokens": "^0.10.0", | ||
| "@atlaskit/tooltip": "^17.5.0", | ||
| "@atlaskit/tooltip": "^17.6.0", | ||
| "@atlaskit/visual-regression": "*", | ||
@@ -92,2 +94,3 @@ "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1", | ||
| "design-system": "v1", | ||
| "design-tokens": "spacing", | ||
| "theming": "tokens", | ||
@@ -94,0 +97,0 @@ "deprecation": "no-deprecated-imports", |
@@ -1,5 +0,7 @@ | ||
| ## API Report File for "@atlaskit/motion" | ||
| ## API Report File for "@atlaskit/motion". | ||
| > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). | ||
| > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/). | ||
| [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports) | ||
| ```ts | ||
@@ -26,2 +28,9 @@ /// <reference types="react" /> | ||
| /** | ||
| * The distance the element moves in a direction-based animation. | ||
| * A `proportional` distance is based on the size of the element. | ||
| * A `constant` distance will always move the same amount, regardless of size. | ||
| */ | ||
| declare type Distance = 'constant' | 'proportional'; | ||
| /** | ||
| * Think of this as the motion equivalent of the @atlaskit/theme `grid()`. | ||
@@ -57,2 +66,9 @@ */ | ||
| /** | ||
| * __ExitingPersistence__ | ||
| * | ||
| * Useful for enabling elements to persist and animate away when they are removed from the DOM. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions) | ||
| */ | ||
| export declare const ExitingPersistence: React_2.FC<ExitingPersistenceProps>; | ||
@@ -84,16 +100,35 @@ | ||
| /** | ||
| * __FadeIn__ | ||
| * | ||
| * Useful for fading in one or more elements. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions) | ||
| */ | ||
| export declare const FadeIn: React_2.FC<FadeKeyframesMotionProps>; | ||
| export declare const fadeInAnimation: ( | ||
| movement?: Direction | undefined, | ||
| direction?: Direction | undefined, | ||
| distance?: Distance, | ||
| ) => ObjectInterpolation<undefined>; | ||
| /** | ||
| * Props for controlling the behaviour of the FadeIn animation | ||
| * Props for controlling the behavior of the FadeIn animation | ||
| */ | ||
| export declare interface FadeKeyframesMotionProps extends KeyframesMotionProps { | ||
| /** | ||
| * Sets an entering and exiting motion | ||
| * The direction the element will enter from using a slide animation. If undefined, no slide will be applied. | ||
| */ | ||
| entranceDirection?: Direction; | ||
| /** | ||
| * The direction the element will exit to using a slide animation. | ||
| * If undefined but `entranceDirection` is set, it will exit to the opposite side by default. | ||
| */ | ||
| exitDirection?: Direction; | ||
| /** | ||
| * The distance the element moves in a direction-based animation. | ||
| * A `proportional` distance is based on the size of the element. | ||
| * A `constant` distance will always move the same amount, regardless of size. | ||
| */ | ||
| distance?: Distance; | ||
| } | ||
@@ -162,2 +197,9 @@ | ||
| /** | ||
| * __ResizingHeight__ | ||
| * | ||
| * Component which consumes the useResizingHook() under-the-hood. Its props are the same as the hooks opts. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/resizing-motions) | ||
| */ | ||
| export declare const ResizingHeight: ({ | ||
@@ -172,20 +214,20 @@ children, | ||
| /** | ||
| * Duration as a `function`. | ||
| * Will receive previous and next `height` and return the `duration`. | ||
| * By default this will match the [ADG specifications](https://atlassian.design) for how long motion should take. | ||
| * Design specifications are still a work in progress. | ||
| */ | ||
| * Duration as a `function`. | ||
| * Will receive previous and next `height` and return the `duration`. | ||
| * | ||
| * By default this will match the [ADG specifications](https://atlassian.design) for how long motion should take. | ||
| * Design specifications are still a work in progress. | ||
| */ | ||
| duration?: (prevHeight: number, nextHeight: number) => number; | ||
| /** | ||
| * Timing function as a `function`. | ||
| * This is handy for changing the curve depending on the user interaction. | ||
| * Does the user interact [directly or indirectly](/packages/helpers/motion/docs/variables)? | ||
| * You'll want to use an appropriate curve. | ||
| * Will receive previous and next `height`, | ||
| * `duration`, | ||
| * and return the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function). | ||
| * By default this will assume indirect motion using `easeInOut`. | ||
| */ | ||
| * Timing function as a `function`. | ||
| * This is handy for changing the curve depending on the user interaction. | ||
| * Does the user interact [directly or indirectly](/packages/helpers/motion/docs/variables)? | ||
| * You'll want to use an appropriate curve. | ||
| * Will receive previous and next `height`, | ||
| * `duration`, | ||
| * and return the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function). | ||
| * | ||
| * By default this will assume indirect motion using `easeInOut`. | ||
| */ | ||
| timingFunction?: ( | ||
@@ -198,2 +240,10 @@ prevHeight: number, | ||
| /** | ||
| * __ShrinkOut__ | ||
| * | ||
| * Will shrink an element down to nothing when exiting. | ||
| * Works best with flex children as collapsing margins can come with undesired behaviour. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions) | ||
| */ | ||
| export declare const ShrinkOut: React_2.FC<ShrinkOutProps>; | ||
@@ -208,2 +258,9 @@ | ||
| /** | ||
| * __SlideIn__ | ||
| * | ||
| * Will slide an element into position, generally used for things that appear from outside of the viewport into view. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions) | ||
| */ | ||
| export declare const SlideIn: React_2.FC<SlideInProps>; | ||
@@ -219,25 +276,25 @@ | ||
| /** | ||
| * Direction the element will slide in from. | ||
| * E.g. `"right"` will slide in from the right to the left. | ||
| * If `exitTo` is not set, exiting will reverse this motion. | ||
| * E.g. if `enterFrom: "right"`, will slide out to the right. | ||
| */ | ||
| * Direction the element will slide in from. | ||
| * E.g. `"right"` will slide in from the right to the left. | ||
| * | ||
| * If `exitTo` is not set, exiting will reverse this motion. | ||
| * E.g. if `enterFrom: "right"`, will slide out to the right. | ||
| */ | ||
| enterFrom: Direction; | ||
| /** | ||
| * Direction the element will slide out towards. | ||
| * E.g. `"right"` will slide out to the right. | ||
| * If this is not set, exiting will reverse the entrance motion. | ||
| * E.g. if `enterFrom: "right"`, will slide out to the right. | ||
| */ | ||
| * Direction the element will slide out towards. | ||
| * E.g. `"right"` will slide out to the right. | ||
| * | ||
| * If this is not set, exiting will reverse the entrance motion. | ||
| * E.g. if `enterFrom: "right"`, will slide out to the right. | ||
| */ | ||
| exitTo?: Direction; | ||
| /** | ||
| * Whether an element will fade on enter, on exit or both. | ||
| * `'none'` is the default and will cause the element to not fade, | ||
| * `'in'` will cause the element to fade on enter, | ||
| * `'out'` will cause the element to fade on exit, | ||
| * `'inout'` will cause the element to fade on both | ||
| */ | ||
| * Whether an element will fade on enter, on exit or both. | ||
| * | ||
| * `'none'` is the default and will cause the element to not fade, | ||
| * `'in'` will cause the element to fade on enter, | ||
| * `'out'` will cause the element to fade on exit, | ||
| * `'inout'` will cause the element to fade on both | ||
| */ | ||
| fade?: Fade; | ||
@@ -272,9 +329,9 @@ /** | ||
| /** | ||
| Number of columns the children elements will be displayed over. | ||
| Use `"responsive"` to have it calculate dynamically on the client side. | ||
| **NOTE:** This has a big caveat that the elements will be invisible until the client side Javascript executes. | ||
| If you have a fixed grid or list, set this to a specific number. | ||
| Defaults to `"responsive"`. | ||
| */ | ||
| * Number of columns the children elements will be displayed over. | ||
| * Use `"responsive"` to have it calculate dynamically on the client side. | ||
| * | ||
| * __NOTE:__ This has a big caveat that the elements will be invisible until the client side Javascript executes. | ||
| * If you have a fixed grid or list, set this to a specific number. | ||
| * Defaults to `"responsive"`. | ||
| */ | ||
| columns?: number | 'responsive'; | ||
@@ -307,2 +364,13 @@ /** | ||
| /** | ||
| * __useResizingHeight__ | ||
| * | ||
| * useResizingHeight animates height changes over state changes. If the height hasn't changed nothing will happen. | ||
| * | ||
| * __WARNING__: Potentially janky. This hook animates height which is | ||
| * [notoriously unperformant](https://firefox-source-docs.mozilla.org/performance/bestpractices.html#Get_familiar_with_the_pipeline_that_gets_pixels_to_the_screen). | ||
| * Test your app over low powered devices, you may want to avoid this if you can see it impacting FPS. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/resizing-motions) | ||
| */ | ||
| export declare const useResizingHeight: ({ | ||
@@ -315,2 +383,9 @@ duration: calcDuration, | ||
| /** | ||
| * __ZoomIn__ | ||
| * | ||
| * Will over zoom an element into position. | ||
| * | ||
| * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions) | ||
| */ | ||
| export declare const ZoomIn: React_2.FC<KeyframesMotionProps>; | ||
@@ -317,0 +392,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.53%
208623
No dependency changes