Socket
Socket
Sign inDemoInstall

@atlaskit/motion

Package Overview
Dependencies
4
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.0 to 1.2.1

7

CHANGELOG.md
# @atlaskit/motion
## 1.2.1
### Patch Changes
- [`01a461fe433`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01a461fe433) - Internal code change turning on new linting rules.
- Updated dependencies
## 1.2.0

@@ -4,0 +11,0 @@

9

dist/cjs/entering/exiting-persistence.js

@@ -114,3 +114,11 @@ "use strict";

};
/**
* __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)
*/
var ExitingPersistence = /*#__PURE__*/(0, _react.memo)(function (_ref) {

@@ -159,2 +167,3 @@ var _ref$appear = _ref.appear,

return (exitThenEnter ? persistedChildren.current : spliceNewElementsIntoPrevious(children, persistedChildren.current)).map(function (child) {
// eslint-disable-next-line @repo/internal/react/no-children-properties-access
var currentChild = childrenObj[child.key];

@@ -161,0 +170,0 @@

24

dist/cjs/entering/fade-in.js

@@ -10,6 +10,2 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

@@ -25,4 +21,2 @@

var _excluded = ["children", "duration", "entranceDirection", "exitDirection", "distance"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

@@ -93,2 +87,9 @@

/**
* __FadeIn__
*
* Useful for fading in one or more elements.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
var FadeIn = function FadeIn(_ref) {

@@ -102,5 +103,6 @@ var children = _ref.children,

distance = _ref$distance === void 0 ? 'proportional' : _ref$distance,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
onFinish = _ref.onFinish,
isPaused = _ref.isPaused;
var invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, {
duration: duration,

@@ -111,4 +113,6 @@ enteringAnimation: fadeInAnimation(entranceDirection, distance),

return _curves.easeInOut;
}
}, props), children);
},
onFinish: onFinish,
isPaused: isPaused
}, children);
};

@@ -115,0 +119,0 @@

12

dist/cjs/entering/keyframes-motion.js

@@ -112,10 +112,10 @@ "use strict";

ref: staggered.ref,
className: hasAnimationStyles ? css(_objectSpread({
animationName: "".concat((0, _core.keyframes)(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationTimingFunction: animationTimingFunction(state),
className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, (0, _accessibility.prefersReducedMotion)()), {}, {
animationDelay: "".concat(delay, "ms"),
animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),
animationFillMode: isExiting ? 'forwards' : 'backwards',
animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),
animationPlayState: paused ? 'paused' : 'running'
}, (0, _accessibility.prefersReducedMotion)())) : ''
animationName: "".concat((0, _core.keyframes)(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationPlayState: paused ? 'paused' : 'running',
animationTimingFunction: animationTimingFunction(state)
})) : ''
}, state);

@@ -122,0 +122,0 @@ });

8

dist/cjs/entering/shrink-out.js

@@ -24,2 +24,10 @@ "use strict";

/**
* __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)
*/
var ShrinkOut = function ShrinkOut(_ref) {

@@ -26,0 +34,0 @@ var children = _ref.children,

26

dist/cjs/entering/slide-in.js

@@ -10,6 +10,2 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

@@ -25,4 +21,2 @@

var _excluded = ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"];
var slideInAnimation = function slideInAnimation(from, state, fade) {

@@ -51,2 +45,9 @@ var _ref;

/**
* __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)
*/
var SlideIn = function SlideIn(_ref2) {

@@ -60,13 +61,16 @@ var children = _ref2.children,

duration = _ref2$duration === void 0 ? _durations.mediumDurationMs : _ref2$duration,
isPaused = _ref2.isPaused,
onFinish = _ref2.onFinish,
_ref2$animationTiming = _ref2.animationTimingFunction,
animationTimingFunction = _ref2$animationTiming === void 0 ? function (state) {
return state === 'entering' ? _curves.easeOut : _curves.easeIn;
} : _ref2$animationTiming,
props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
} : _ref2$animationTiming;
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, {
duration: duration,
enteringAnimation: slideInAnimation(enterFrom, 'entering', fade),
exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting', fade),
animationTimingFunction: animationTimingFunction
}, props), children);
animationTimingFunction: animationTimingFunction,
isPaused: isPaused,
onFinish: onFinish
}, children);
};

@@ -73,0 +77,0 @@

4

dist/cjs/entering/staggered-entrance.js

@@ -16,2 +16,4 @@ "use strict";

var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _useLayoutEffect = require("../utils/use-layout-effect");

@@ -29,3 +31,3 @@

delay: 0,
ref: function ref() {}
ref: _noop.default
};

@@ -32,0 +34,0 @@ });

25

dist/cjs/entering/zoom-in.js

@@ -10,6 +10,2 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));

@@ -19,4 +15,2 @@

var _excluded = ["children", "duration"];
var zoomInAnimation = function zoomInAnimation() {

@@ -50,3 +44,11 @@ return {

};
/**
* __ZoomIn__
*
* Will over zoom an element into position.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
exports.shrinkOutAnimation = shrinkOutAnimation;

@@ -58,4 +60,5 @@

duration = _ref$duration === void 0 ? 125 : _ref$duration,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
isPaused = _ref.isPaused,
onFinish = _ref.onFinish;
return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, {
duration: duration,

@@ -66,4 +69,6 @@ enteringAnimation: zoomInAnimation(),

return 'ease-in-out';
}
}, props), children);
},
isPaused: isPaused,
onFinish: onFinish
}, children);
};

@@ -70,0 +75,0 @@

20

dist/cjs/resizing/height.js

@@ -32,2 +32,13 @@ "use strict";

/**
* __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)
*/
var useResizingHeight = function useResizingHeight() {

@@ -111,3 +122,11 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},

};
/**
* __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)
*/
exports.useResizingHeight = useResizingHeight;

@@ -124,2 +143,3 @@

*/
// eslint-disable-next-line @repo/internal/react/use-noop

@@ -126,0 +146,0 @@

2

dist/cjs/utils/use-unique-id.js

@@ -10,2 +10,4 @@ "use strict";

/* eslint-disable @repo/internal/react/disallow-unstable-values */
/**

@@ -12,0 +14,0 @@ * Will return a unique id that does not change between renders.

2

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

9

dist/es2019/entering/exiting-persistence.js

@@ -100,3 +100,11 @@ import React, { Children, createContext, memo, useContext, useMemo, useRef } from 'react';

};
/**
* __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)
*/
const ExitingPersistence = /*#__PURE__*/memo(({

@@ -143,2 +151,3 @@ appear: appearFromProp = false,

return (exitThenEnter ? persistedChildren.current : spliceNewElementsIntoPrevious(children, persistedChildren.current)).map(child => {
// eslint-disable-next-line @repo/internal/react/no-children-properties-access
const currentChild = childrenObj[child.key];

@@ -145,0 +154,0 @@

19

dist/es2019/entering/fade-in.js

@@ -1,2 +0,1 @@

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';

@@ -58,2 +57,9 @@ import { easeInOut } from '../utils/curves';

/**
* __FadeIn__
*
* Useful for fading in one or more elements.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
const FadeIn = ({

@@ -65,13 +71,16 @@ children,

distance = 'proportional',
...props
onFinish,
isPaused
}) => {
const invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,
enteringAnimation: fadeInAnimation(entranceDirection, distance),
exitingAnimation: fadeOutAnimation(exitDirection || invertedEntranceDirection, distance),
animationTimingFunction: () => easeInOut
}, props), children);
animationTimingFunction: () => easeInOut,
onFinish: onFinish,
isPaused: isPaused
}, children);
};
export default FadeIn;

9

dist/es2019/entering/keyframes-motion.js

@@ -77,10 +77,9 @@ import React, { useEffect, useState } from 'react';

ref: staggered.ref,
className: hasAnimationStyles ? css({
animationName: `${keyframes(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)}`,
animationTimingFunction: animationTimingFunction(state),
className: hasAnimationStyles ? css({ ...prefersReducedMotion(),
animationDelay: `${delay}ms`,
animationDuration: `${isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration}ms`,
animationFillMode: isExiting ? 'forwards' : 'backwards',
animationDuration: `${isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration}ms`,
animationName: `${keyframes(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)}`,
animationPlayState: paused ? 'paused' : 'running',
...prefersReducedMotion()
animationTimingFunction: animationTimingFunction(state)
}) : ''

@@ -87,0 +86,0 @@ }, state));

8

dist/es2019/entering/shrink-out.js

@@ -8,2 +8,10 @@ import { easeIn } from '../utils/curves';

/**
* __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)
*/
const ShrinkOut = ({

@@ -10,0 +18,0 @@ children,

21

dist/es2019/entering/slide-in.js

@@ -1,2 +0,1 @@

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';

@@ -28,2 +27,9 @@ import { easeIn, easeOut } from '../utils/curves';

/**
* __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)
*/
const SlideIn = ({

@@ -35,13 +41,16 @@ children,

duration = mediumDurationMs,
animationTimingFunction = state => state === 'entering' ? easeOut : easeIn,
...props
isPaused,
onFinish,
animationTimingFunction = state => state === 'entering' ? easeOut : easeIn
}) => {
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,
enteringAnimation: slideInAnimation(enterFrom, 'entering', fade),
exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting', fade),
animationTimingFunction: animationTimingFunction
}, props), children);
animationTimingFunction: animationTimingFunction,
isPaused: isPaused,
onFinish: onFinish
}, children);
};
export default SlideIn;

3

dist/es2019/entering/staggered-entrance.js
import React, { createContext, useContext, useRef, useState } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { useLayoutEffect } from '../utils/use-layout-effect';

@@ -7,3 +8,3 @@ import { useUniqueId } from '../utils/use-unique-id';

delay: 0,
ref: () => {}
ref: noop
}));

@@ -10,0 +11,0 @@ export const useStaggeredEntrance = () => {

19

dist/es2019/entering/zoom-in.js

@@ -1,2 +0,1 @@

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';

@@ -25,2 +24,9 @@ import KeyframesMotion from './keyframes-motion';

});
/**
* __ZoomIn__
*
* Will over zoom an element into position.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/

@@ -30,12 +36,15 @@ const ZoomIn = ({

duration = 125,
...props
isPaused,
onFinish
}) => {
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,
enteringAnimation: zoomInAnimation(),
exitingAnimation: shrinkOutAnimation(),
animationTimingFunction: () => 'ease-in-out'
}, props), children);
animationTimingFunction: () => 'ease-in-out',
isPaused: isPaused,
onFinish: onFinish
}, children);
};
export default ZoomIn;

21

dist/es2019/resizing/height.js

@@ -9,2 +9,14 @@ import { useRef } from 'react';

import { useSnapshotBeforeUpdate } from '../utils/use-snapshot-before-update';
/**
* __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 const useResizingHeight = ({

@@ -76,2 +88,10 @@ duration: calcDuration = () => mediumDurationMs,

};
/**
* __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 const ResizingHeight = ({

@@ -87,3 +107,4 @@ children,

*/
// eslint-disable-next-line @repo/internal/react/use-noop
export default (opts => {});

1

dist/es2019/utils/use-unique-id.js

@@ -0,1 +1,2 @@

/* eslint-disable @repo/internal/react/disallow-unstable-values */
import { useRef } from 'react';

@@ -2,0 +3,0 @@ /**

2

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

9

dist/esm/entering/exiting-persistence.js

@@ -101,3 +101,11 @@ import React, { Children, createContext, memo, useContext, useMemo, useRef } from 'react';

};
/**
* __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)
*/
var ExitingPersistence = /*#__PURE__*/memo(function (_ref) {

@@ -146,2 +154,3 @@ var _ref$appear = _ref.appear,

return (exitThenEnter ? persistedChildren.current : spliceNewElementsIntoPrevious(children, persistedChildren.current)).map(function (child) {
// eslint-disable-next-line @repo/internal/react/no-children-properties-access
var currentChild = childrenObj[child.key];

@@ -148,0 +157,0 @@

22

dist/esm/entering/fade-in.js

@@ -1,5 +0,2 @@

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "duration", "entranceDirection", "exitDirection", "distance"];

@@ -68,2 +65,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

/**
* __FadeIn__
*
* Useful for fading in one or more elements.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
var FadeIn = function FadeIn(_ref) {

@@ -77,6 +81,6 @@ var children = _ref.children,

distance = _ref$distance === void 0 ? 'proportional' : _ref$distance,
props = _objectWithoutProperties(_ref, _excluded);
onFinish = _ref.onFinish,
isPaused = _ref.isPaused;
var invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,

@@ -87,6 +91,8 @@ enteringAnimation: fadeInAnimation(entranceDirection, distance),

return easeInOut;
}
}, props), children);
},
onFinish: onFinish,
isPaused: isPaused
}, children);
};
export default FadeIn;

12

dist/esm/entering/keyframes-motion.js

@@ -90,10 +90,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";

ref: staggered.ref,
className: hasAnimationStyles ? css(_objectSpread({
animationName: "".concat(keyframes(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationTimingFunction: animationTimingFunction(state),
className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, prefersReducedMotion()), {}, {
animationDelay: "".concat(delay, "ms"),
animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),
animationFillMode: isExiting ? 'forwards' : 'backwards',
animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),
animationPlayState: paused ? 'paused' : 'running'
}, prefersReducedMotion())) : ''
animationName: "".concat(keyframes(isExiting ? exitingAnimation || enteringAnimation : enteringAnimation)),
animationPlayState: paused ? 'paused' : 'running',
animationTimingFunction: animationTimingFunction(state)
})) : ''
}, state);

@@ -100,0 +100,0 @@ });

8

dist/esm/entering/shrink-out.js

@@ -9,2 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

/**
* __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)
*/
var ShrinkOut = function ShrinkOut(_ref) {

@@ -11,0 +19,0 @@ var children = _ref.children,

24

dist/esm/entering/slide-in.js

@@ -1,5 +0,2 @@

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"];
import React from 'react';

@@ -30,2 +27,9 @@ import { easeIn, easeOut } from '../utils/curves';

/**
* __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)
*/
var SlideIn = function SlideIn(_ref2) {

@@ -39,16 +43,18 @@ var children = _ref2.children,

duration = _ref2$duration === void 0 ? mediumDurationMs : _ref2$duration,
isPaused = _ref2.isPaused,
onFinish = _ref2.onFinish,
_ref2$animationTiming = _ref2.animationTimingFunction,
animationTimingFunction = _ref2$animationTiming === void 0 ? function (state) {
return state === 'entering' ? easeOut : easeIn;
} : _ref2$animationTiming,
props = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
} : _ref2$animationTiming;
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,
enteringAnimation: slideInAnimation(enterFrom, 'entering', fade),
exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting', fade),
animationTimingFunction: animationTimingFunction
}, props), children);
animationTimingFunction: animationTimingFunction,
isPaused: isPaused,
onFinish: onFinish
}, children);
};
export default SlideIn;

3

dist/esm/entering/staggered-entrance.js
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { createContext, useContext, useRef, useState } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { useLayoutEffect } from '../utils/use-layout-effect';

@@ -9,3 +10,3 @@ import { useUniqueId } from '../utils/use-unique-id';

delay: 0,
ref: function ref() {}
ref: noop
};

@@ -12,0 +13,0 @@ });

22

dist/esm/entering/zoom-in.js

@@ -1,4 +0,1 @@

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "duration"];
import React from 'react';

@@ -31,2 +28,9 @@ import KeyframesMotion from './keyframes-motion';

};
/**
* __ZoomIn__
*
* Will over zoom an element into position.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/

@@ -37,5 +41,5 @@ var ZoomIn = function ZoomIn(_ref) {

duration = _ref$duration === void 0 ? 125 : _ref$duration,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
isPaused = _ref.isPaused,
onFinish = _ref.onFinish;
return /*#__PURE__*/React.createElement(KeyframesMotion, {
duration: duration,

@@ -46,6 +50,8 @@ enteringAnimation: zoomInAnimation(),

return 'ease-in-out';
}
}, props), children);
},
isPaused: isPaused,
onFinish: onFinish
}, children);
};
export default ZoomIn;

21

dist/esm/resizing/height.js

@@ -12,2 +12,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

import { useSnapshotBeforeUpdate } from '../utils/use-snapshot-before-update';
/**
* __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 var useResizingHeight = function useResizingHeight() {

@@ -91,2 +103,10 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},

};
/**
* __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 var ResizingHeight = function ResizingHeight(_ref2) {

@@ -102,3 +122,4 @@ var children = _ref2.children,

*/
// eslint-disable-next-line @repo/internal/react/use-noop
export default (function (opts) {});

1

dist/esm/utils/use-unique-id.js

@@ -0,1 +1,2 @@

/* eslint-disable @repo/internal/react/disallow-unstable-values */
import { useRef } from 'react';

@@ -2,0 +3,0 @@ /**

2

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

7

dist/types/entering/exiting-persistence.d.ts

@@ -37,4 +37,11 @@ import React, { ReactNode } from 'react';

}
/**
* __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)
*/
declare const ExitingPersistence: React.FC<ExitingPersistenceProps>;
export declare const useExitingPersistence: () => ExitingChildContext;
export default ExitingPersistence;

7

dist/types/entering/fade-in.d.ts

@@ -27,3 +27,10 @@ import React from 'react';

}
/**
* __FadeIn__
*
* Useful for fading in one or more elements.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
declare const FadeIn: React.FC<FadeKeyframesMotionProps>;
export default FadeIn;

8

dist/types/entering/shrink-out.d.ts

@@ -7,3 +7,11 @@ import React from 'react';

}
/**
* __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)
*/
declare const ShrinkOut: React.FC<ShrinkOutProps>;
export default ShrinkOut;

13

dist/types/entering/slide-in.d.ts

@@ -11,3 +11,3 @@ import React from 'react';

* E.g. `"right"` will slide in from the right to the left.
*
* If `exitTo` is not set, exiting will reverse this motion.

@@ -20,3 +20,3 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.

* E.g. `"right"` will slide out to the right.
*
* If this is not set, exiting will reverse the entrance motion.

@@ -28,3 +28,3 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.

* Whether an element will fade on enter, on exit or both.
*
* `'none'` is the default and will cause the element to not fade,

@@ -42,3 +42,10 @@ * `'in'` will cause the element to fade on enter,

}
/**
* __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)
*/
declare const SlideIn: React.FC<SlideInProps>;
export default SlideIn;

12

dist/types/entering/staggered-entrance.d.ts

@@ -11,8 +11,8 @@ import React, { Ref } from 'react';

/**
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"`.
*/

@@ -19,0 +19,0 @@ columns?: number | 'responsive';

7

dist/types/entering/zoom-in.d.ts

@@ -6,3 +6,10 @@ import React from 'react';

export declare const shrinkOutAnimation: () => ObjectInterpolation<undefined>;
/**
* __ZoomIn__
*
* Will over zoom an element into position.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motions)
*/
declare const ZoomIn: React.FC<KeyframesMotionProps>;
export default ZoomIn;

22

dist/types/resizing/height.d.ts

@@ -7,3 +7,3 @@ /// <reference types="react" />

* 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.

@@ -21,3 +21,3 @@ * Design specifications are still a work in progress.

* 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`.

@@ -27,5 +27,23 @@ */

}
/**
* __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: ({ duration: calcDuration, timingFunction: calcTimingFunction, }?: ResizingHeightOpts) => {
ref: CallbackRef;
};
/**
* __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: ({ children, ...props }: ResizingHeightOpts & {

@@ -32,0 +50,0 @@ children: (opts: {

25

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

@@ -18,12 +18,12 @@ "publishConfig": {

".": "./src/index.tsx",
"./types": "./src/entry-points/types.ts",
"./curves": "./src/entry-points/curves.ts",
"./durations": "./src/entry-points/durations.ts",
"./accessibility": "./src/entry-points/accessibility.ts",
"./exiting-persistence": "./src/entry-points/exiting-persistence.ts",
"./fade-in": "./src/entry-points/fade-in.ts",
"./slide-in": "./src/entry-points/slide-in.ts",
"./zoom-in": "./src/entry-points/zoom-in.ts",
"./shrink-out": "./src/entry-points/shrink-out.ts",
"./staggered-entrance": "./src/entry-points/staggered-entrance.ts"
"./types": "./src/entry-points/types.tsx",
"./curves": "./src/entry-points/curves.tsx",
"./durations": "./src/entry-points/durations.tsx",
"./accessibility": "./src/entry-points/accessibility.tsx",
"./exiting-persistence": "./src/entry-points/exiting-persistence.tsx",
"./fade-in": "./src/entry-points/fade-in.tsx",
"./slide-in": "./src/entry-points/slide-in.tsx",
"./zoom-in": "./src/entry-points/zoom-in.tsx",
"./shrink-out": "./src/entry-points/shrink-out.tsx",
"./staggered-entrance": "./src/entry-points/staggered-entrance.tsx"
},

@@ -40,2 +40,3 @@ "atlaskit:src": "src/index.tsx",

"dependencies": {
"@atlaskit/ds-lib": "^2.1.0",
"@babel/runtime": "^7.0.0",

@@ -57,2 +58,3 @@ "@emotion/core": "^10.0.9",

"@atlaskit/theme": "^12.1.0",
"@atlaskit/tokens": "^0.10.0",
"@atlaskit/tooltip": "^17.5.0",

@@ -82,2 +84,3 @@ "@atlaskit/visual-regression": "*",

"dom-events": "use-bind-event-listener",
"design-system": "v1",
"theming": "tokens",

@@ -84,0 +87,0 @@ "deprecation": "no-deprecated-imports",

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc