ak-layer - npm Package Compare versions

Comparing version 62.0.4 to 62.1.0

CHANGELOG.md

@@ -1,6 +0,22 @@
-<a name="62.0.4"></a>
-## 62.0.4 (2016-12-06)
+<a name="62.1.0"></a>
+# 62.1.0 (2016-12-07)
 
 
 
+<a name="ak-layer@62.1.0"></a>
+# ak-layer@62.1.0 (2016-12-07)
+
+
+### Bug Fixes
+
+* Upgrade icon usage to use the new React component to fix the display of the previous component. ([211e528](https://bitbucket.org/atlassian/atlaskit/commits/211e528))
+* **component:** Gives field a negative left margin so that things align with field content rather th ([4bc09bc](https://bitbucket.org/atlassian/atlaskit/commits/4bc09bc))
+
+
+### Features
+
+* **component:** Adds onFlippedChange callback to Layer ([477c32b](https://bitbucket.org/atlassian/atlaskit/commits/477c32b))
+
+
+
 <a name="ak-layer@62.0.3"></a>
@@ -7,0 +23,0 @@ ## ak-layer@62.0.3 (2016-12-06)

dist/bundle-cjs.js

@@ -88,3 +88,6 @@ module.exports = /******/
                 position: null,
-                transform: null
+                transform: null,
+                flipped: !1,
+                actualPosition: null,
+                originalPosition: null
             }, _this;
@@ -103,2 +106,11 @@ }
         }, {
+            key: "componentDidUpdate",
+            value: function(prevProps, prevState) {
+                prevState.flipped !== this.state.flipped && this.props.onFlippedChange({
+                    flipped: this.state.flipped,
+                    actualPosition: this.state.actualPosition,
+                    originalPosition: this.state.originalPosition
+                });
+            }
+        }, {
             key: "componentWillUnmount",
@@ -145,4 +157,9 @@ value: function() {
                             _this2.setState({
-                                position: state.offsets.popper.position,
-                                transform: "translate3d(" + left + "px, " + top + "px, 0px)"
+                                // position: fixed or absolute
+                                cssPosition: state.offsets.popper.position,
+                                transform: "translate3d(" + left + "px, " + top + "px, 0px)",
+                                // state.flipped is either true or undefined
+                                flipped: !!state.flipped,
+                                actualPosition: state.position,
+                                originalPosition: state.originalPosition
                             });
@@ -157,3 +174,3 @@ }
             value: function() {
-                var _this3 = this, _state = this.state, position = _state.position, transform = _state.transform;
+                var _this3 = this, _state = this.state, cssPosition = _state.cssPosition, transform = _state.transform;
                 return _react2.default.createElement("div", null, _react2.default.createElement("div", {
@@ -170,3 +187,3 @@ ref: function(_ref) {
                         left: 0,
-                        position: position,
+                        position: cssPosition,
                         transform: transform
@@ -250,2 +267,25 @@ }
         content: _react.PropTypes.node,
+        /**
+	   * @description Callback that is used to know when the `flipped` state of Layer changes. This
+	   * occurs when placing a Layered element in the requested position would cause Layer to be
+	   * rendered outside of the boundariesElement (usually viewport).
+	   *
+	   * The callback will be passed an object with the following properties:
+	   * | Key       | Type    | Description                                                      |
+	   * | --------- | ------- | ---------------------------------------------------------------- |
+	   * | flipped   | boolean | whether the Layer has been moved away from its original position |
+	   * | actualPosition      | string  | the current position of the Layer ("top left", etc)    |
+	   * | originalPosition    | string | the position that Layer originally tried to position to |
+	   *
+	   * @memberof Layer
+	   * @instance
+	   * @type Function
+	   * @example @html
+	   * const handleFlipChange = ({ flipped, actualPosition, originalPosition }) => { ... };
+	   *
+	   * ReactDOM.render(<Layer position="right middle" onFlippedChange={handleFlipChange}>
+	   *   <div>I'm the target!</div>
+	   * </Layer>, container);
+	   */
+        onFlippedChange: _react.PropTypes.func,
         children: _react.PropTypes.node
@@ -258,2 +298,3 @@ }, Layer.defaultProps = {
         content: null,
+        onFlippedChange: function() {},
         children: null
@@ -260,0 +301,0 @@ }, exports.default = Layer;

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(t){function e(i){if(o[i])return o[i].exports;var n=o[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){t.exports=o(1)},function(t,e,o){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=o(2),r=i(n),p=o(3),s=i(p),a=o(4),l=i(a),f=o(5),u=i(f),d=o(6),c=i(d),m=o(7),h=i(m),b=o(8),v=i(b),P=o(9),g=function(t){function e(t){(0,s.default)(this,e);var o=(0,u.default)(this,(e.__proto__||(0,r.default)(e)).call(this,t));return o.state={position:null,transform:null},o}return(0,c.default)(e,t),(0,l.default)(e,[{key:"componentDidMount",value:function(){this.applyPopper(this.props)}},{key:"componentWillReceiveProps",value:function(t){this.applyPopper(t)}},{key:"componentWillUnmount",value:function(){this.popper&&this.popper.destroy()}},{key:"applyPopper",value:function(t){var e=this;if(this.targetRef&&this.contentRef){this.popper&&this.popper.destroy();var o=this.targetRef.firstChild;this.popper=new v.default(o,this.contentRef,{placement:(0,P.positionPropToPopperPosition)(t.position),boundariesElement:this.props.boundariesElement,modifiers:{applyStyle:{enabled:!1},hide:{enabled:!1},offset:{enabled:!0,offset:this.props.offset},flip:{enabled:this.props.autoPosition,flipVariations:!0},preventOverflow:{enabled:this.props.autoPosition,moveWithTarget:!0}}});var i=function(t){if(t){var o=Math.round(t.offsets.popper.left),i=Math.round(t.offsets.popper.top);e.setState({position:t.offsets.popper.position,transform:"translate3d("+o+"px, "+i+"px, 0px)"})}};this.popper.onCreate(i),this.popper.onUpdate(i)}}},{key:"render",value:function(){var t=this,e=this.state,o=e.position,i=e.transform;return h.default.createElement("div",null,h.default.createElement("div",{ref:function(e){return t.targetRef=e}},this.props.children),h.default.createElement("div",{ref:function(e){return t.contentRef=e},style:{top:0,left:0,position:o,transform:i}},this.props.content))}}]),e}(m.PureComponent);g.propTypes={position:m.PropTypes.oneOf(P.POSITION_ATTRIBUTE_ENUM.values),boundariesElement:m.PropTypes.oneOf(["viewport","window"]),autoPosition:m.PropTypes.bool,offset:m.PropTypes.string,content:m.PropTypes.node,children:m.PropTypes.node},g.defaultProps={position:P.POSITION_ATTRIBUTE_ENUM.default,boundariesElement:"viewport",autoPosition:!0,offset:"0 0",content:null,children:null},e.default=g},function(t,e){t.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(t,e){t.exports=require("babel-runtime/helpers/classCallCheck")},function(t,e){t.exports=require("babel-runtime/helpers/createClass")},function(t,e){t.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(t,e){t.exports=require("babel-runtime/helpers/inherits")},function(t,e){t.exports=require("react")},function(t,e){t.exports=require("popper.js")},function(t,e){"use strict";function o(t){return i[t]?i[t].position:i[n.default].position}Object.defineProperty(e,"__esModule",{value:!0});var i={"top left":{position:"top-start",animation:"top"},"top center":{position:"top",animation:"top"},"top right":{position:"top-end",animation:"top"},"right top":{position:"right-start",animation:"right"},"right middle":{position:"right",animation:"right"},"right bottom":{position:"right-end",animation:"right"},"bottom left":{position:"bottom-start",animation:"bottom"},"bottom center":{position:"bottom",animation:"bottom"},"bottom right":{position:"bottom-end",animation:"bottom"},"left top":{position:"left-start",animation:"left"},"left middle":{position:"left",animation:"left"},"left bottom":{position:"left-end",animation:"left"}},n={values:["top left","top center","top right","right top","right middle","right bottom","bottom left","bottom center","bottom right","left top","left middle","left bottom"],default:"right middle"};e.positionPropToPopperPosition=o,e.POSITION_ATTRIBUTE_ENUM=n}]);
+module.exports=function(t){function o(i){if(e[i])return e[i].exports;var n=e[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var e={};return o.m=t,o.c=e,o.p="",o(0)}([function(t,o,e){t.exports=e(1)},function(t,o,e){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(o,"__esModule",{value:!0});var n=e(2),p=i(n),r=e(3),s=i(r),a=e(4),l=i(a),f=e(5),u=i(f),d=e(6),c=i(d),h=e(7),m=i(h),b=e(8),P=i(b),g=e(9),v=function(t){function o(t){(0,s.default)(this,o);var e=(0,u.default)(this,(o.__proto__||(0,p.default)(o)).call(this,t));return e.state={position:null,transform:null,flipped:!1,actualPosition:null,originalPosition:null},e}return(0,c.default)(o,t),(0,l.default)(o,[{key:"componentDidMount",value:function(){this.applyPopper(this.props)}},{key:"componentWillReceiveProps",value:function(t){this.applyPopper(t)}},{key:"componentDidUpdate",value:function(t,o){o.flipped!==this.state.flipped&&this.props.onFlippedChange({flipped:this.state.flipped,actualPosition:this.state.actualPosition,originalPosition:this.state.originalPosition})}},{key:"componentWillUnmount",value:function(){this.popper&&this.popper.destroy()}},{key:"applyPopper",value:function(t){var o=this;if(this.targetRef&&this.contentRef){this.popper&&this.popper.destroy();var e=this.targetRef.firstChild;this.popper=new P.default(e,this.contentRef,{placement:(0,g.positionPropToPopperPosition)(t.position),boundariesElement:this.props.boundariesElement,modifiers:{applyStyle:{enabled:!1},hide:{enabled:!1},offset:{enabled:!0,offset:this.props.offset},flip:{enabled:this.props.autoPosition,flipVariations:!0},preventOverflow:{enabled:this.props.autoPosition,moveWithTarget:!0}}});var i=function(t){if(t){var e=Math.round(t.offsets.popper.left),i=Math.round(t.offsets.popper.top);o.setState({cssPosition:t.offsets.popper.position,transform:"translate3d("+e+"px, "+i+"px, 0px)",flipped:!!t.flipped,actualPosition:t.position,originalPosition:t.originalPosition})}};this.popper.onCreate(i),this.popper.onUpdate(i)}}},{key:"render",value:function(){var t=this,o=this.state,e=o.cssPosition,i=o.transform;return m.default.createElement("div",null,m.default.createElement("div",{ref:function(o){return t.targetRef=o}},this.props.children),m.default.createElement("div",{ref:function(o){return t.contentRef=o},style:{top:0,left:0,position:e,transform:i}},this.props.content))}}]),o}(h.PureComponent);v.propTypes={position:h.PropTypes.oneOf(g.POSITION_ATTRIBUTE_ENUM.values),boundariesElement:h.PropTypes.oneOf(["viewport","window"]),autoPosition:h.PropTypes.bool,offset:h.PropTypes.string,content:h.PropTypes.node,onFlippedChange:h.PropTypes.func,children:h.PropTypes.node},v.defaultProps={position:g.POSITION_ATTRIBUTE_ENUM.default,boundariesElement:"viewport",autoPosition:!0,offset:"0 0",content:null,onFlippedChange:function(){},children:null},o.default=v},function(t,o){t.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(t,o){t.exports=require("babel-runtime/helpers/classCallCheck")},function(t,o){t.exports=require("babel-runtime/helpers/createClass")},function(t,o){t.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(t,o){t.exports=require("babel-runtime/helpers/inherits")},function(t,o){t.exports=require("react")},function(t,o){t.exports=require("popper.js")},function(t,o){"use strict";function e(t){return i[t]?i[t].position:i[n.default].position}Object.defineProperty(o,"__esModule",{value:!0});var i={"top left":{position:"top-start",animation:"top"},"top center":{position:"top",animation:"top"},"top right":{position:"top-end",animation:"top"},"right top":{position:"right-start",animation:"right"},"right middle":{position:"right",animation:"right"},"right bottom":{position:"right-end",animation:"right"},"bottom left":{position:"bottom-start",animation:"bottom"},"bottom center":{position:"bottom",animation:"bottom"},"bottom right":{position:"bottom-end",animation:"bottom"},"left top":{position:"left-start",animation:"left"},"left middle":{position:"left",animation:"left"},"left bottom":{position:"left-end",animation:"left"}},n={values:["top left","top center","top right","right top","right middle","right bottom","bottom left","bottom center","bottom right","left top","left middle","left bottom"],default:"right middle"};o.positionPropToPopperPosition=e,o.POSITION_ATTRIBUTE_ENUM=n}]);

dist/bundle.js

@@ -91,3 +91,6 @@ !function(root, factory) {
                     position: null,
-                    transform: null
+                    transform: null,
+                    flipped: !1,
+                    actualPosition: null,
+                    originalPosition: null
                 }, _this;
@@ -106,2 +109,11 @@ }
             }, {
+                key: "componentDidUpdate",
+                value: function(prevProps, prevState) {
+                    prevState.flipped !== this.state.flipped && this.props.onFlippedChange({
+                        flipped: this.state.flipped,
+                        actualPosition: this.state.actualPosition,
+                        originalPosition: this.state.originalPosition
+                    });
+                }
+            }, {
                 key: "componentWillUnmount",
@@ -148,4 +160,9 @@ value: function() {
                                 _this2.setState({
-                                    position: state.offsets.popper.position,
-                                    transform: "translate3d(" + left + "px, " + top + "px, 0px)"
+                                    // position: fixed or absolute
+                                    cssPosition: state.offsets.popper.position,
+                                    transform: "translate3d(" + left + "px, " + top + "px, 0px)",
+                                    // state.flipped is either true or undefined
+                                    flipped: !!state.flipped,
+                                    actualPosition: state.position,
+                                    originalPosition: state.originalPosition
                                 });
@@ -160,3 +177,3 @@ }
                 value: function() {
-                    var _this3 = this, _state = this.state, position = _state.position, transform = _state.transform;
+                    var _this3 = this, _state = this.state, cssPosition = _state.cssPosition, transform = _state.transform;
                     return _react2.default.createElement("div", null, _react2.default.createElement("div", {
@@ -173,3 +190,3 @@ ref: function(_ref) {
                             left: 0,
-                            position: position,
+                            position: cssPosition,
                             transform: transform
@@ -253,2 +270,25 @@ }
             content: _react.PropTypes.node,
+            /**
+	   * @description Callback that is used to know when the `flipped` state of Layer changes. This
+	   * occurs when placing a Layered element in the requested position would cause Layer to be
+	   * rendered outside of the boundariesElement (usually viewport).
+	   *
+	   * The callback will be passed an object with the following properties:
+	   * | Key       | Type    | Description                                                      |
+	   * | --------- | ------- | ---------------------------------------------------------------- |
+	   * | flipped   | boolean | whether the Layer has been moved away from its original position |
+	   * | actualPosition      | string  | the current position of the Layer ("top left", etc)    |
+	   * | originalPosition    | string | the position that Layer originally tried to position to |
+	   *
+	   * @memberof Layer
+	   * @instance
+	   * @type Function
+	   * @example @html
+	   * const handleFlipChange = ({ flipped, actualPosition, originalPosition }) => { ... };
+	   *
+	   * ReactDOM.render(<Layer position="right middle" onFlippedChange={handleFlipChange}>
+	   *   <div>I'm the target!</div>
+	   * </Layer>, container);
+	   */
+            onFlippedChange: _react.PropTypes.func,
             children: _react.PropTypes.node
@@ -261,2 +301,3 @@ }, Layer.defaultProps = {
             content: null,
+            onFlippedChange: function() {},
             children: null
@@ -263,0 +304,0 @@ }, exports.default = Layer;

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("popper.js")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","popper.js"],t):"object"==typeof exports?exports.akLayer=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("popper.js")):e.akLayer=t(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["popper.js"])}(this,function(e,t,o,r,i,n,p){return function(e){function t(r){if(o[r])return o[r].exports;var i=o[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=o(2),n=r(i),p=o(3),s=r(p),l=o(4),a=r(l),u=o(5),f=r(u),c=o(6),b=r(c),h=o(7),m=r(h),d=o(8),y=r(d),v=o(9),P=function(e){function t(e){(0,s.default)(this,t);var o=(0,f.default)(this,(t.__proto__||(0,n.default)(t)).call(this,e));return o.state={position:null,transform:null},o}return(0,b.default)(t,e),(0,a.default)(t,[{key:"componentDidMount",value:function(){this.applyPopper(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.applyPopper(e)}},{key:"componentWillUnmount",value:function(){this.popper&&this.popper.destroy()}},{key:"applyPopper",value:function(e){var t=this;if(this.targetRef&&this.contentRef){this.popper&&this.popper.destroy();var o=this.targetRef.firstChild;this.popper=new y.default(o,this.contentRef,{placement:(0,v.positionPropToPopperPosition)(e.position),boundariesElement:this.props.boundariesElement,modifiers:{applyStyle:{enabled:!1},hide:{enabled:!1},offset:{enabled:!0,offset:this.props.offset},flip:{enabled:this.props.autoPosition,flipVariations:!0},preventOverflow:{enabled:this.props.autoPosition,moveWithTarget:!0}}});var r=function(e){if(e){var o=Math.round(e.offsets.popper.left),r=Math.round(e.offsets.popper.top);t.setState({position:e.offsets.popper.position,transform:"translate3d("+o+"px, "+r+"px, 0px)"})}};this.popper.onCreate(r),this.popper.onUpdate(r)}}},{key:"render",value:function(){var e=this,t=this.state,o=t.position,r=t.transform;return m.default.createElement("div",null,m.default.createElement("div",{ref:function(t){return e.targetRef=t}},this.props.children),m.default.createElement("div",{ref:function(t){return e.contentRef=t},style:{top:0,left:0,position:o,transform:r}},this.props.content))}}]),t}(h.PureComponent);P.propTypes={position:h.PropTypes.oneOf(v.POSITION_ATTRIBUTE_ENUM.values),boundariesElement:h.PropTypes.oneOf(["viewport","window"]),autoPosition:h.PropTypes.bool,offset:h.PropTypes.string,content:h.PropTypes.node,children:h.PropTypes.node},P.defaultProps={position:v.POSITION_ATTRIBUTE_ENUM.default,boundariesElement:"viewport",autoPosition:!0,offset:"0 0",content:null,children:null},t.default=P},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t){e.exports=r},function(e,t){e.exports=i},function(e,t){e.exports=n},function(e,t){e.exports=p},function(e,t){"use strict";function o(e){return r[e]?r[e].position:r[i.default].position}Object.defineProperty(t,"__esModule",{value:!0});var r={"top left":{position:"top-start",animation:"top"},"top center":{position:"top",animation:"top"},"top right":{position:"top-end",animation:"top"},"right top":{position:"right-start",animation:"right"},"right middle":{position:"right",animation:"right"},"right bottom":{position:"right-end",animation:"right"},"bottom left":{position:"bottom-start",animation:"bottom"},"bottom center":{position:"bottom",animation:"bottom"},"bottom right":{position:"bottom-end",animation:"bottom"},"left top":{position:"left-start",animation:"left"},"left middle":{position:"left",animation:"left"},"left bottom":{position:"left-end",animation:"left"}},i={values:["top left","top center","top right","right top","right middle","right bottom","bottom left","bottom center","bottom right","left top","left middle","left bottom"],default:"right middle"};t.positionPropToPopperPosition=o,t.POSITION_ATTRIBUTE_ENUM=i}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("popper.js")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","popper.js"],t):"object"==typeof exports?exports.akLayer=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("popper.js")):e.akLayer=t(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["popper.js"])}(this,function(e,t,o,i,r,n,p){return function(e){function t(i){if(o[i])return o[i].exports;var r=o[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(2),n=i(r),p=o(3),s=i(p),l=o(4),a=i(l),u=o(5),f=i(u),c=o(6),d=i(c),h=o(7),b=i(h),m=o(8),P=i(m),g=o(9),y=function(e){function t(e){(0,s.default)(this,t);var o=(0,f.default)(this,(t.__proto__||(0,n.default)(t)).call(this,e));return o.state={position:null,transform:null,flipped:!1,actualPosition:null,originalPosition:null},o}return(0,d.default)(t,e),(0,a.default)(t,[{key:"componentDidMount",value:function(){this.applyPopper(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.applyPopper(e)}},{key:"componentDidUpdate",value:function(e,t){t.flipped!==this.state.flipped&&this.props.onFlippedChange({flipped:this.state.flipped,actualPosition:this.state.actualPosition,originalPosition:this.state.originalPosition})}},{key:"componentWillUnmount",value:function(){this.popper&&this.popper.destroy()}},{key:"applyPopper",value:function(e){var t=this;if(this.targetRef&&this.contentRef){this.popper&&this.popper.destroy();var o=this.targetRef.firstChild;this.popper=new P.default(o,this.contentRef,{placement:(0,g.positionPropToPopperPosition)(e.position),boundariesElement:this.props.boundariesElement,modifiers:{applyStyle:{enabled:!1},hide:{enabled:!1},offset:{enabled:!0,offset:this.props.offset},flip:{enabled:this.props.autoPosition,flipVariations:!0},preventOverflow:{enabled:this.props.autoPosition,moveWithTarget:!0}}});var i=function(e){if(e){var o=Math.round(e.offsets.popper.left),i=Math.round(e.offsets.popper.top);t.setState({cssPosition:e.offsets.popper.position,transform:"translate3d("+o+"px, "+i+"px, 0px)",flipped:!!e.flipped,actualPosition:e.position,originalPosition:e.originalPosition})}};this.popper.onCreate(i),this.popper.onUpdate(i)}}},{key:"render",value:function(){var e=this,t=this.state,o=t.cssPosition,i=t.transform;return b.default.createElement("div",null,b.default.createElement("div",{ref:function(t){return e.targetRef=t}},this.props.children),b.default.createElement("div",{ref:function(t){return e.contentRef=t},style:{top:0,left:0,position:o,transform:i}},this.props.content))}}]),t}(h.PureComponent);y.propTypes={position:h.PropTypes.oneOf(g.POSITION_ATTRIBUTE_ENUM.values),boundariesElement:h.PropTypes.oneOf(["viewport","window"]),autoPosition:h.PropTypes.bool,offset:h.PropTypes.string,content:h.PropTypes.node,onFlippedChange:h.PropTypes.func,children:h.PropTypes.node},y.defaultProps={position:g.POSITION_ATTRIBUTE_ENUM.default,boundariesElement:"viewport",autoPosition:!0,offset:"0 0",content:null,onFlippedChange:function(){},children:null},t.default=y},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=p},function(e,t){"use strict";function o(e){return i[e]?i[e].position:i[r.default].position}Object.defineProperty(t,"__esModule",{value:!0});var i={"top left":{position:"top-start",animation:"top"},"top center":{position:"top",animation:"top"},"top right":{position:"top-end",animation:"top"},"right top":{position:"right-start",animation:"right"},"right middle":{position:"right",animation:"right"},"right bottom":{position:"right-end",animation:"right"},"bottom left":{position:"bottom-start",animation:"bottom"},"bottom center":{position:"bottom",animation:"bottom"},"bottom right":{position:"bottom-end",animation:"bottom"},"left top":{position:"left-start",animation:"left"},"left middle":{position:"left",animation:"left"},"left bottom":{position:"left-end",animation:"left"}},r={values:["top left","top center","top right","right top","right middle","right bottom","bottom left","bottom center","bottom right","left top","left middle","left bottom"],default:"right middle"};t.positionPropToPopperPosition=o,t.POSITION_ATTRIBUTE_ENUM=r}])});

package.json

 {
   "name": "ak-layer",
-  "version": "62.0.4",
+  "version": "62.1.0",
   "description": "A React layer component responsible for the position of an element on a page",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

README.md

@@ -5,3 +5,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
 [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
-[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.0.4)
+[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.1.0)
 
@@ -14,7 +14,7 @@ # Layer
 
-![Example of Layer](https://bytebucket.org/atlassian/atlaskit/raw/495f2a67f680f966ad33e3911faa94bfa38b6842/packages/ak-layer/docs/layer.png)
+![Example of Layer](https://bytebucket.org/atlassian/atlaskit/raw/0a2b7e7eba6deab80a3a8458e1080d77e832eeb0/packages/ak-layer/docs/layer.png)
 
 ## Try it out
 
-Interact with a [live demo of the ak-layer component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-layer/62.0.4/).
+Interact with a [live demo of the ak-layer component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-layer/62.1.0/).
 
@@ -58,2 +58,3 @@ ## Installation
     *  [layer.content](#Layer+content) : <code>ReactElement</code>
+    *  [layer.onFlippedChange](#Layer+onFlippedChange) : <code>function</code>
 
@@ -145,3 +146,26 @@ <a name="new_Layer_new"></a>
 ```
+<a name="Layer+onFlippedChange"></a>
 
+### layer.onFlippedChange : <code>function</code>
+Callback that is used to know when the `flipped` state of Layer changes. This
+occurs when placing a Layered element in the requested position would cause Layer to be
+rendered outside of the boundariesElement (usually viewport).
+
+The callback will be passed an object with the following properties:
+| Key       | Type    | Description                                                      |
+| --------- | ------- | ---------------------------------------------------------------- |
+| flipped   | boolean | whether the Layer has been moved away from its original position |
+| actualPosition      | string  | the current position of the Layer ("top left", etc)    |
+| originalPosition    | string | the position that Layer originally tried to position to |
+
+**Kind**: instance property of <code>[Layer](#Layer)</code>  
+**HTML Example**
+```js
+const handleFlipChange = ({ flipped, actualPosition, originalPosition }) => { ... };
+
+ReactDOM.render(<Layer position="right middle" onFlippedChange={handleFlipChange}>
+  <div>I'm the target!</div>
+</Layer>, container);
+```
+
 ## Support and feedback
@@ -155,3 +179,3 @@
 
-Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.0.4).
+Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.1.0).
 
@@ -158,0 +182,0 @@ Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).

New alerts

License Policy Violation

License

This 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

License

This 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

68391

increased by11.36%

Lines of code

784

increased by11.68%

Number of lines in readme file

184

increased by15%

No dependency changes