pebble-web 2.26.1 → 3.0.0-alpha.1
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 +2 -2
- 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
|
@@ -9,7 +9,7 @@ import addDays from 'date-fns/addDays';
|
|
|
9
9
|
import startOfDay from 'date-fns/startOfDay';
|
|
10
10
|
import endOfDay from 'date-fns/endOfDay';
|
|
11
11
|
import isSameDay from 'date-fns/isSameDay';
|
|
12
|
-
import { Transition, animated } from 'react-spring
|
|
12
|
+
import { Transition, animated } from 'react-spring';
|
|
13
13
|
import { Manager, Reference, Popper } from 'react-popper';
|
|
14
14
|
import { Rifm } from 'rifm';
|
|
15
15
|
import format from 'date-fns/format';
|
|
@@ -1102,7 +1102,7 @@ const animationConfig = {
|
|
|
1102
1102
|
transform: "scale(0.95)",
|
|
1103
1103
|
pointerEvents: "none"
|
|
1104
1104
|
},
|
|
1105
|
-
config: (
|
|
1105
|
+
config: (_show, _index, state) => state === "leave" ? {
|
|
1106
1106
|
duration: 80
|
|
1107
1107
|
} : {
|
|
1108
1108
|
duration: 200
|
|
@@ -1112,7 +1112,12 @@ const animationConfig = {
|
|
|
1112
1112
|
const MountTransition = props => {
|
|
1113
1113
|
return /*#__PURE__*/createElement(Transition, Object.assign({
|
|
1114
1114
|
items: props.visible
|
|
1115
|
-
}, animationConfig, props), (
|
|
1115
|
+
}, animationConfig, props), (styles, show, {
|
|
1116
|
+
phase
|
|
1117
|
+
}, index) => {
|
|
1118
|
+
if (!show) return null;
|
|
1119
|
+
return props.children(styles, phase, index);
|
|
1120
|
+
});
|
|
1116
1121
|
};
|
|
1117
1122
|
|
|
1118
1123
|
class DropDown extends PureComponent {
|
|
@@ -1189,11 +1194,11 @@ class DropDown extends PureComponent {
|
|
|
1189
1194
|
const popperWrapperStyle = { ...style,
|
|
1190
1195
|
...transitionStyles,
|
|
1191
1196
|
backgroundColor: colors.white.base,
|
|
1192
|
-
transform: `${style.transform || ""} ${
|
|
1197
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
1193
1198
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`,
|
|
1194
1199
|
padding
|
|
1195
1200
|
};
|
|
1196
|
-
return /*#__PURE__*/createElement(
|
|
1201
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1197
1202
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1198
1203
|
ref: ref,
|
|
1199
1204
|
style: popperWrapperStyle,
|
|
@@ -1912,7 +1917,7 @@ class Toast extends PureComponent {
|
|
|
1912
1917
|
...customStyles[position].transitions.leave
|
|
1913
1918
|
},
|
|
1914
1919
|
config: animationConfig.config
|
|
1915
|
-
}, show => show &&
|
|
1920
|
+
}, (styles, show) => show && /*#__PURE__*/createElement(animated.div, {
|
|
1916
1921
|
className: cx(toastWrapper, this.props.className),
|
|
1917
1922
|
style: {
|
|
1918
1923
|
backgroundColor: bColor,
|
|
@@ -1921,7 +1926,7 @@ class Toast extends PureComponent {
|
|
|
1921
1926
|
}
|
|
1922
1927
|
}, /*#__PURE__*/createElement("i", {
|
|
1923
1928
|
className: iconClass
|
|
1924
|
-
}), this.state.text))
|
|
1929
|
+
}), this.state.text));
|
|
1925
1930
|
}
|
|
1926
1931
|
}
|
|
1927
1932
|
|
|
@@ -2004,15 +2009,16 @@ class Modal extends PureComponent {
|
|
|
2004
2009
|
/*#__PURE__*/
|
|
2005
2010
|
createElement(MountTransition, {
|
|
2006
2011
|
visible: visible
|
|
2007
|
-
}, transitionStyles => /*#__PURE__*/createElement(
|
|
2012
|
+
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
2008
2013
|
style: {
|
|
2009
2014
|
opacity: transitionStyles.opacity
|
|
2010
2015
|
},
|
|
2011
2016
|
className: cx(modalContainer, backDropClassName)
|
|
2012
|
-
}, /*#__PURE__*/createElement(
|
|
2013
|
-
|
|
2017
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
2018
|
+
style: {
|
|
2014
2019
|
transform: transitionStyles.transform
|
|
2015
|
-
},
|
|
2020
|
+
},
|
|
2021
|
+
className: modalClassName
|
|
2016
2022
|
}, children))), node);
|
|
2017
2023
|
}
|
|
2018
2024
|
}
|
|
@@ -2852,10 +2858,10 @@ class PebblePopper extends PureComponent {
|
|
|
2852
2858
|
const wrapperStyle = { ...style,
|
|
2853
2859
|
...transitionStyles,
|
|
2854
2860
|
backgroundColor: popperBackgroundColor,
|
|
2855
|
-
transform: `${style.transform || ""} ${
|
|
2861
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
2856
2862
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`
|
|
2857
2863
|
};
|
|
2858
|
-
return /*#__PURE__*/createElement(
|
|
2864
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2859
2865
|
className: cx(popperStyle, popperClassName),
|
|
2860
2866
|
ref: ref,
|
|
2861
2867
|
style: wrapperStyle,
|
|
@@ -3551,7 +3557,7 @@ class SideBar extends PureComponent {
|
|
|
3551
3557
|
} = this.props;
|
|
3552
3558
|
const _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3553
3559
|
width
|
|
3554
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3560
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3555
3561
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3556
3562
|
visible: isOpen
|
|
3557
3563
|
}, transitionProps), styles => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
|
|
@@ -4412,8 +4418,7 @@ class TypeAhead extends PureComponent {
|
|
|
4412
4418
|
}, { ...this.props,
|
|
4413
4419
|
testId: testIds.searchBoxId
|
|
4414
4420
|
}), /*#__PURE__*/createElement(MountTransition, {
|
|
4415
|
-
visible: showSuggestions
|
|
4416
|
-
native: true
|
|
4421
|
+
visible: showSuggestions
|
|
4417
4422
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
4418
4423
|
style: transitionStyles,
|
|
4419
4424
|
className: cx(optionsWrapper$1, dropdownClassName)
|