Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlaskit/motion

Package Overview
Dependencies
Maintainers
1
Versions
61
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/motion - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

6

CHANGELOG.md
# @atlaskit/motion
## 1.3.0
### Minor Changes
- [`a86726f0b16`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a86726f0b16) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
## 1.2.4

@@ -4,0 +10,0 @@

6

dist/cjs/entering/keyframes-motion.js

@@ -18,3 +18,3 @@ "use strict";

var _core = require("@emotion/core");
var _react2 = require("@emotion/react");

@@ -109,3 +109,3 @@ var _accessibility = require("../utils/accessibility");

}, [onExitFinished, state, isExiting, duration, delay, paused, setTimeout]);
return /*#__PURE__*/_react.default.createElement(_core.ClassNames, null, function (_ref2) {
return /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
var css = _ref2.css;

@@ -118,3 +118,3 @@ return children({

animationFillMode: isExiting ? 'forwards' : 'backwards',
animationName: "".concat((0, _core.keyframes)(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationName: "".concat((0, _react2.keyframes)(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationPlayState: paused ? 'paused' : 'running',

@@ -121,0 +121,0 @@ animationTimingFunction: animationTimingFunction(state)

2

dist/cjs/version.json
{
"name": "@atlaskit/motion",
"version": "1.2.4",
"version": "1.3.0",
"sideEffects": false
}

2

dist/es2019/entering/keyframes-motion.js
import React, { useEffect, useState } from 'react';
import { ClassNames, keyframes } from '@emotion/core';
import { ClassNames, keyframes } from '@emotion/react';
import { prefersReducedMotion } from '../utils/accessibility';

@@ -4,0 +4,0 @@ import { largeDurationMs } from '../utils/durations';

2

dist/es2019/version.json
{
"name": "@atlaskit/motion",
"version": "1.2.4",
"version": "1.3.0",
"sideEffects": false
}

2

dist/esm/entering/keyframes-motion.js

@@ -9,3 +9,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";

import React, { useEffect, useState } from 'react';
import { ClassNames, keyframes } from '@emotion/core';
import { ClassNames, keyframes } from '@emotion/react';
import { prefersReducedMotion } from '../utils/accessibility';

@@ -12,0 +12,0 @@ import { largeDurationMs } from '../utils/durations';

2

dist/esm/version.json
{
"name": "@atlaskit/motion",
"version": "1.2.4",
"version": "1.3.0",
"sideEffects": false
}

6

dist/types-ts4.0/entering/fade-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { KeyframesMotionProps } from './keyframes-motion';
import type { Direction, Distance } from './types';
export declare const fadeInAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
export declare const fadeOutAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
export declare const fadeInAnimation: (direction?: Direction | undefined, distance?: Distance) => CSSObject;
export declare const fadeOutAnimation: (direction?: Direction | undefined, distance?: Distance) => CSSObject;
/**

@@ -8,0 +8,0 @@ * Props for controlling the behavior of the FadeIn animation

6

dist/types-ts4.0/entering/keyframes-motion.d.ts
import React, { Ref } from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { MotionProps, Transition } from './types';

@@ -27,7 +27,7 @@ /**

*/
enteringAnimation: ObjectInterpolation<undefined>;
enteringAnimation: CSSObject;
/**
* CSS keyframes for the exiting animation.
*/
exitingAnimation?: ObjectInterpolation<undefined>;
exitingAnimation?: CSSObject;
/**

@@ -34,0 +34,0 @@ * Duration in `ms`.

4

dist/types-ts4.0/entering/slide-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { AnimationCurve } from '../utils/curves';
import { KeyframesMotionProps } from './keyframes-motion';
import { Direction, Fade, Transition } from './types';
export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => ObjectInterpolation<undefined>;
export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => CSSObject;
export interface SlideInProps extends KeyframesMotionProps {

@@ -8,0 +8,0 @@ /**

6

dist/types-ts4.0/entering/zoom-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { KeyframesMotionProps } from './keyframes-motion';
export declare const zoomInAnimation: () => ObjectInterpolation<undefined>;
export declare const shrinkOutAnimation: () => ObjectInterpolation<undefined>;
export declare const zoomInAnimation: () => CSSObject;
export declare const shrinkOutAnimation: () => CSSObject;
/**

@@ -7,0 +7,0 @@ * __ZoomIn__

6

dist/types/entering/fade-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { KeyframesMotionProps } from './keyframes-motion';
import type { Direction, Distance } from './types';
export declare const fadeInAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
export declare const fadeOutAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
export declare const fadeInAnimation: (direction?: Direction | undefined, distance?: Distance) => CSSObject;
export declare const fadeOutAnimation: (direction?: Direction | undefined, distance?: Distance) => CSSObject;
/**

@@ -8,0 +8,0 @@ * Props for controlling the behavior of the FadeIn animation

6

dist/types/entering/keyframes-motion.d.ts
import React, { Ref } from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { MotionProps, Transition } from './types';

@@ -27,7 +27,7 @@ /**

*/
enteringAnimation: ObjectInterpolation<undefined>;
enteringAnimation: CSSObject;
/**
* CSS keyframes for the exiting animation.
*/
exitingAnimation?: ObjectInterpolation<undefined>;
exitingAnimation?: CSSObject;
/**

@@ -34,0 +34,0 @@ * Duration in `ms`.

4

dist/types/entering/slide-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { AnimationCurve } from '../utils/curves';
import { KeyframesMotionProps } from './keyframes-motion';
import { Direction, Fade, Transition } from './types';
export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => ObjectInterpolation<undefined>;
export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => CSSObject;
export interface SlideInProps extends KeyframesMotionProps {

@@ -8,0 +8,0 @@ /**

6

dist/types/entering/zoom-in.d.ts
import React from 'react';
import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { KeyframesMotionProps } from './keyframes-motion';
export declare const zoomInAnimation: () => ObjectInterpolation<undefined>;
export declare const shrinkOutAnimation: () => ObjectInterpolation<undefined>;
export declare const zoomInAnimation: () => CSSObject;
export declare const shrinkOutAnimation: () => CSSObject;
/**

@@ -7,0 +7,0 @@ * __ZoomIn__

8

package.json
{
"name": "@atlaskit/motion",
"version": "1.2.4",
"version": "1.3.0",
"description": "Atlassian motion variables, components and more.",

@@ -50,3 +50,3 @@ "publishConfig": {

"@babel/runtime": "^7.0.0",
"@emotion/core": "^10.0.9",
"@emotion/react": "^11.7.1",
"bind-event-listener": "^2.1.1"

@@ -58,7 +58,7 @@ },

"devDependencies": {
"@atlaskit/button": "^16.3.0",
"@atlaskit/button": "^16.4.0",
"@atlaskit/docs": "*",
"@atlaskit/focus-ring": "^1.1.0",
"@atlaskit/logo": "^13.10.0",
"@atlaskit/lozenge": "^11.2.0",
"@atlaskit/lozenge": "^11.3.0",
"@atlaskit/section-message": "^6.3.0",

@@ -65,0 +65,0 @@ "@atlaskit/ssr": "*",

373

report.api.md

@@ -1,5 +0,9 @@

## API Report File for "@atlaskit/motion".
## API Report File for "@atlaskit/motion"
> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
<!--
Generated API Report version: 2.0
-->
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

@@ -10,3 +14,3 @@

import { ObjectInterpolation } from '@emotion/core';
import { CSSObject } from '@emotion/react';
import { default as React_2 } from 'react';

@@ -16,3 +20,4 @@ import { ReactNode } from 'react';

declare type AnimationCurve =
// @public (undocumented)
type AnimationCurve =
| 'cubic-bezier(0.15,1,0.3,1)'

@@ -22,127 +27,67 @@ | 'cubic-bezier(0.2,0,0,1)'

declare type CallbackRef = (instance: Element_2) => void;
// @public (undocumented)
type CallbackRef = (instance: Element_2) => void;
/**
* Direction an element enters from or leaves towards
*/
export declare type Direction = 'top' | 'right' | 'bottom' | 'left';
// @public
export type Direction = 'top' | 'right' | 'bottom' | 'left';
/**
* 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';
// @public
type Distance = 'constant' | 'proportional';
/**
* Think of this as the motion equivalent of the @atlaskit/theme `grid()`.
*/
export declare const durationStep = 25;
// @public
export const durationStep = 25;
export declare const easeIn: AnimationCurve;
// @public (undocumented)
export const easeIn: AnimationCurve;
export declare const easeInOut: AnimationCurve;
// @public (undocumented)
export const easeInOut: AnimationCurve;
export declare const easeOut: AnimationCurve;
// @public (undocumented)
export const easeOut: AnimationCurve;
declare type Element_2 = HTMLElement | null;
// @public (undocumented)
type Element_2 = HTMLElement | null;
/**
* Internal data passed to child motions.
*/
declare interface ExitingChildContext {
/**
* Will perform an exit animation instead of an enter animation.
*/
// @public
interface ExitingChildContext {
appear: boolean;
isExiting: boolean;
/**
* Will be called when the animation has completed.
*/
onFinish?: () => void;
/**
* Used to tell the child motions to animate in when initially mounting.
*/
appear: boolean;
}
/**
* __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>;
// @public
export const ExitingPersistence: React_2.FC<ExitingPersistenceProps>;
export declare interface ExitingPersistenceProps {
/**
* Children can be any valid react node.
* Either a single element,
* multiple elements,
* or multiple elements in an array.
*/
// @public (undocumented)
export interface ExitingPersistenceProps {
appear?: boolean;
children?: ReactNode;
/**
* When elements are exiting will exit all elements first and then mount the new ones.
* Defaults to `false`.
*/
exitThenEnter?: boolean;
/**
* When initially mounting if set to `true` all child motions will animate in.
*/
appear?: boolean;
}
/**
* Whether an element will fade on enter, on exit or both
*/
declare type Fade = 'none' | 'in' | 'out' | 'inout';
// @public
type Fade = 'none' | 'in' | 'out' | 'inout';
/**
* __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>;
// @public
export const FadeIn: React_2.FC<FadeKeyframesMotionProps>;
export declare const fadeInAnimation: (
// @public (undocumented)
export const fadeInAnimation: (
direction?: Direction | undefined,
distance?: Distance,
) => ObjectInterpolation<undefined>;
) => CSSObject;
/**
* Props for controlling the behavior of the FadeIn animation
*/
export declare interface FadeKeyframesMotionProps extends KeyframesMotionProps {
/**
* The direction the element will enter from using a slide animation. If undefined, no slide will be applied.
*/
// @public
export interface FadeKeyframesMotionProps extends KeyframesMotionProps {
distance?: Distance;
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;
}
/**
* Use for any programatic motions needed at runtime.
* Will return `true` if the current user prefers reduced motion.
* This is generally set through OS preferences/settings.
*/
export declare const isReducedMotion: () => boolean;
// @public
export const isReducedMotion: () => boolean;
/**
* These are props that motions should use as their external props for consumers.
* See [FadeIn](packages/helpers/motion/src/entering/fade-in.tsx) for an example usage.
*/
declare interface KeyframesMotionProps
// @public
interface KeyframesMotionProps
extends MotionProps<{

@@ -152,41 +97,20 @@ className: string;

}> {
/**
* Can be used to pause the animation before it has finished.
*/
isPaused?: boolean;
}
export declare const largeDurationMs: number;
// @public (undocumented)
export const largeDurationMs: number;
export declare const mediumDurationMs: number;
// @public (undocumented)
export const mediumDurationMs: number;
/**
* Common props all entering motions should make available for consumers.
*/
declare interface MotionProps<TProps extends {}> {
/**
* Duration in `ms`.
* How long the motion will take.
*/
// @public
interface MotionProps<TProps extends {}> {
children: (opts: TProps, state: Transition) => React.ReactNode;
duration?: number;
/**
* Will callback when the motion has finished in the particular direction.
* If it finished entering direction will be `entering`.
* And vice versa for `exiting`.
*/
onFinish?: (state: Transition) => void;
/**
* Children as `function`.
* Will be passed `props` for you to hook up.
* The `state` arg can be used to know if the motion is `entering` or `exiting`.
*/
children: (opts: TProps, state: Transition) => React.ReactNode;
}
/**
* Use for any CSS based motion (animation or transition).
* Always put at the end of your declaration for correct use of the cascade.
* Reduced motion preference is generally set through OS preferences/settings.
*/
export declare const prefersReducedMotion: () => {
// @public
export const prefersReducedMotion: () => {
'@media (prefers-reduced-motion: reduce)': {

@@ -198,10 +122,4 @@ animation: string;

/**
* __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: ({
// @public
export const ResizingHeight: ({
children,

@@ -213,22 +131,5 @@ ...props

declare interface ResizingHeightOpts {
/**
* 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.
*/
// @public (undocumented)
interface ResizingHeightOpts {
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`.
*/
timingFunction?: (

@@ -241,15 +142,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>;
// @public
export const ShrinkOut: React_2.FC<ShrinkOutProps>;
export declare const shrinkOutAnimation: () => ObjectInterpolation<undefined>;
// @public (undocumented)
export const shrinkOutAnimation: () => CSSObject;
export declare interface ShrinkOutProps
// @public (undocumented)
export interface ShrinkOutProps
extends MotionProps<{

@@ -259,117 +155,45 @@ ref: React_2.Ref<any>;

/**
* __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>;
// @public
export const SlideIn: React_2.FC<SlideInProps>;
export declare const slideInAnimation: (
// @public (undocumented)
export const slideInAnimation: (
from: Direction,
state: Transition,
fade: Fade,
) => ObjectInterpolation<undefined>;
) => CSSObject;
declare interface SlideInProps extends KeyframesMotionProps {
/**
* 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.
*/
// @public (undocumented)
interface SlideInProps extends KeyframesMotionProps {
animationTimingFunction?: (state: Transition) => AnimationCurve;
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.
*/
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
*/
fade?: Fade;
/**
* A custom function used to override the default animation timings.
* Returns which animation curve to use depending on the current transitioning state.
*/
animationTimingFunction?: (state: Transition) => AnimationCurve;
}
export declare const smallDurationMs: number;
// @public (undocumented)
export const smallDurationMs: number;
/**
* For a list of elements that need to animate in,
* this should be used in conjunction with entering components.
* This does not need Javascript to execute so it will run immediately for any SSR rendered React apps before the JS has executed.
*
* Will dynamically add delay to each child entering component.
* Unfortunately all entering components _NEED_ to be a direct descendant.
*/
export declare const StaggeredEntrance: React_2.FC<StaggeredEntranceProps>;
// @public
export const StaggeredEntrance: React_2.FC<StaggeredEntranceProps>;
export declare interface StaggeredEntranceProps {
/**
* Delay in ms.
* How long each element group will be staggered.
* This will be multipled by the column and row of the element.
* Defaults to `50`.
*/
// @public (undocumented)
export interface StaggeredEntranceProps {
children: JSX.Element | JSX.Element[];
column?: number;
columns?: number | 'responsive';
delayStep?: number;
/**
* 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';
/**
* Index of the column.
* Useful if you want to have columns inside separate containers.
* Starts from `0`.
*/
column?: number;
/**
* Any valid react child with an entrance motion somewhere in the tree as a descendant.
*/
children: JSX.Element | JSX.Element[];
}
/**
* Direction the motion is going.
*/
export declare type Transition = 'entering' | 'exiting';
// @public
export type Transition = 'entering' | 'exiting';
export declare const useExitingPersistence: () => ExitingChildContext;
// @public (undocumented)
export const useExitingPersistence: () => ExitingChildContext;
/**
* A React hook version of {@link isReducedMotion}.
* Useful for React components that need to re-render if the user's motion
* preference changes at runtime.
*/
export declare const useIsReducedMotion: () => boolean;
// @public
export const useIsReducedMotion: () => boolean;
/**
* __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: ({
// @public
export const useResizingHeight: ({
duration: calcDuration,

@@ -381,14 +205,9 @@ timingFunction: calcTimingFunction,

/**
* __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>;
// @public
export const ZoomIn: React_2.FC<KeyframesMotionProps>;
export declare const zoomInAnimation: () => ObjectInterpolation<undefined>;
// @public (undocumented)
export const zoomInAnimation: () => CSSObject;
export {};
// (No @packageDocumentation comment for this package)
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc