pebble-web 2.23.0 → 2.24.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/shared/MountTransition.d.ts +4 -4
- package/dist/pebble-web.dev.js +37 -35
- package/dist/pebble-web.dev.js.map +1 -1
- package/dist/pebble-web.es.dev.js +21 -16
- package/dist/pebble-web.es.dev.js.map +1 -1
- package/dist/pebble-web.es.js +20 -15
- package/dist/pebble-web.es.js.map +1 -1
- package/dist/pebble-web.js +36 -34
- package/dist/pebble-web.js.map +1 -1
- package/dist/pebble-web.module.dev.js +31 -29
- package/dist/pebble-web.module.dev.js.map +1 -1
- package/dist/pebble-web.module.js +30 -28
- package/dist/pebble-web.module.js.map +1 -1
- package/dist/pebble-web.umd.dev.js +3329 -1832
- package/dist/pebble-web.umd.dev.js.map +1 -1
- package/dist/pebble-web.umd.js +3340 -1843
- package/dist/pebble-web.umd.js.map +1 -1
- package/dist/utils/animation.d.ts +6 -18
- package/package.json +4 -4
- package/src/components/DropDown.tsx +6 -6
- package/src/components/Modal.tsx +10 -11
- package/src/components/Popper.tsx +6 -5
- package/src/components/Sidebar.tsx +1 -1
- package/src/components/Toast.tsx +4 -5
- package/src/components/TypeAhead.tsx +2 -2
- package/src/components/__tests__/__snapshots__/popper.test.tsx.snap +1 -1
- package/src/components/shared/MountTransition.tsx +25 -14
- package/src/utils/animation.ts +13 -4
|
@@ -17,7 +17,7 @@ import addDays from 'date-fns/addDays';
|
|
|
17
17
|
import startOfDay from 'date-fns/startOfDay';
|
|
18
18
|
import endOfDay from 'date-fns/endOfDay';
|
|
19
19
|
import isSameDay from 'date-fns/isSameDay';
|
|
20
|
-
import { Transition, animated } from 'react-spring
|
|
20
|
+
import { Transition, animated } from 'react-spring';
|
|
21
21
|
import { Manager, Reference, Popper } from 'react-popper';
|
|
22
22
|
import { Rifm } from 'rifm';
|
|
23
23
|
import format from 'date-fns/format';
|
|
@@ -1059,8 +1059,8 @@ var animationConfig = {
|
|
|
1059
1059
|
transform: "scale(0.95)",
|
|
1060
1060
|
pointerEvents: "none"
|
|
1061
1061
|
},
|
|
1062
|
-
config: function config(
|
|
1063
|
-
return
|
|
1062
|
+
config: function config(_show, _index, state) {
|
|
1063
|
+
return state === "leave" ? {
|
|
1064
1064
|
duration: 80
|
|
1065
1065
|
} : {
|
|
1066
1066
|
duration: 200
|
|
@@ -1071,10 +1071,10 @@ var animationConfig = {
|
|
|
1071
1071
|
var MountTransition = function MountTransition(props) {
|
|
1072
1072
|
return /*#__PURE__*/createElement(Transition, Object.assign({
|
|
1073
1073
|
items: props.visible
|
|
1074
|
-
}, animationConfig, props), function (show,
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1074
|
+
}, animationConfig, props), function (styles, show, _ref, index) {
|
|
1075
|
+
var phase = _ref.phase;
|
|
1076
|
+
if (!show) return null;
|
|
1077
|
+
return props.children(styles, phase, index);
|
|
1078
1078
|
});
|
|
1079
1079
|
};
|
|
1080
1080
|
|
|
@@ -1160,11 +1160,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
1160
1160
|
arrowProps = _ref2.arrowProps;
|
|
1161
1161
|
var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
|
|
1162
1162
|
backgroundColor: colors.white.base,
|
|
1163
|
-
transform:
|
|
1163
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
1164
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
1165
|
+
}),
|
|
1164
1166
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
|
|
1165
1167
|
padding: padding
|
|
1166
1168
|
});
|
|
1167
|
-
return /*#__PURE__*/createElement(
|
|
1169
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1168
1170
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1169
1171
|
ref: ref,
|
|
1170
1172
|
style: popperWrapperStyle,
|
|
@@ -1914,17 +1916,15 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
1914
1916
|
pointerEvents: "none"
|
|
1915
1917
|
}, customStyles[position].transitions.leave),
|
|
1916
1918
|
config: animationConfig.config
|
|
1917
|
-
}, function (show) {
|
|
1918
|
-
return show &&
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
}), _this2.state.text);
|
|
1927
|
-
};
|
|
1919
|
+
}, function (styles, show) {
|
|
1920
|
+
return show && /*#__PURE__*/createElement(animated.div, {
|
|
1921
|
+
className: cx(toastWrapper, _this2.props.className),
|
|
1922
|
+
style: _objectSpread$b(_objectSpread$b({
|
|
1923
|
+
backgroundColor: bColor
|
|
1924
|
+
}, styles), customStyles[position].style)
|
|
1925
|
+
}, /*#__PURE__*/createElement("i", {
|
|
1926
|
+
className: iconClass
|
|
1927
|
+
}), _this2.state.text);
|
|
1928
1928
|
});
|
|
1929
1929
|
}
|
|
1930
1930
|
}], [{
|
|
@@ -2042,15 +2042,16 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2042
2042
|
createElement(MountTransition, {
|
|
2043
2043
|
visible: visible
|
|
2044
2044
|
}, function (transitionStyles) {
|
|
2045
|
-
return /*#__PURE__*/createElement(
|
|
2045
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2046
2046
|
style: {
|
|
2047
2047
|
opacity: transitionStyles.opacity
|
|
2048
2048
|
},
|
|
2049
2049
|
className: cx(modalContainer, backDropClassName)
|
|
2050
|
-
}, /*#__PURE__*/createElement(
|
|
2051
|
-
|
|
2050
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
2051
|
+
style: {
|
|
2052
2052
|
transform: transitionStyles.transform
|
|
2053
|
-
},
|
|
2053
|
+
},
|
|
2054
|
+
className: modalClassName
|
|
2054
2055
|
}, children));
|
|
2055
2056
|
}), node);
|
|
2056
2057
|
}
|
|
@@ -2931,10 +2932,12 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2931
2932
|
arrowProps = _ref2.arrowProps;
|
|
2932
2933
|
var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
|
|
2933
2934
|
backgroundColor: popperBackgroundColor,
|
|
2934
|
-
transform:
|
|
2935
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
2936
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
2937
|
+
}),
|
|
2935
2938
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
|
|
2936
2939
|
});
|
|
2937
|
-
return /*#__PURE__*/createElement(
|
|
2940
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2938
2941
|
className: cx(popperStyle, popperClassName),
|
|
2939
2942
|
ref: ref,
|
|
2940
2943
|
style: wrapperStyle,
|
|
@@ -3693,7 +3696,7 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
3693
3696
|
closeOnOutsideClick = _this$props2.closeOnOutsideClick;
|
|
3694
3697
|
var _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3695
3698
|
width: width
|
|
3696
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3699
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3697
3700
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3698
3701
|
visible: isOpen
|
|
3699
3702
|
}, transitionProps), function (styles) {
|
|
@@ -4580,8 +4583,7 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
4580
4583
|
onFocus: this.onFocus,
|
|
4581
4584
|
value: value
|
|
4582
4585
|
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4583
|
-
visible: showSuggestions
|
|
4584
|
-
native: true
|
|
4586
|
+
visible: showSuggestions
|
|
4585
4587
|
}, function (transitionStyles) {
|
|
4586
4588
|
return /*#__PURE__*/createElement(animated.div, {
|
|
4587
4589
|
style: transitionStyles,
|