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
|
@@ -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';
|
|
@@ -1151,8 +1151,8 @@ var animationConfig = {
|
|
|
1151
1151
|
transform: "scale(0.95)",
|
|
1152
1152
|
pointerEvents: "none"
|
|
1153
1153
|
},
|
|
1154
|
-
config: function config(
|
|
1155
|
-
return
|
|
1154
|
+
config: function config(_show, _index, state) {
|
|
1155
|
+
return state === "leave" ? {
|
|
1156
1156
|
duration: 80
|
|
1157
1157
|
} : {
|
|
1158
1158
|
duration: 200
|
|
@@ -1163,10 +1163,10 @@ var animationConfig = {
|
|
|
1163
1163
|
var MountTransition = function MountTransition(props) {
|
|
1164
1164
|
return /*#__PURE__*/createElement(Transition, Object.assign({
|
|
1165
1165
|
items: props.visible
|
|
1166
|
-
}, animationConfig, props), function (show,
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1166
|
+
}, animationConfig, props), function (styles, show, _ref, index) {
|
|
1167
|
+
var phase = _ref.phase;
|
|
1168
|
+
if (!show) return null;
|
|
1169
|
+
return props.children(styles, phase, index);
|
|
1170
1170
|
});
|
|
1171
1171
|
};
|
|
1172
1172
|
|
|
@@ -1254,11 +1254,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
1254
1254
|
arrowProps = _ref2.arrowProps;
|
|
1255
1255
|
var popperWrapperStyle = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, style), transitionStyles), {}, {
|
|
1256
1256
|
backgroundColor: colors.white.base,
|
|
1257
|
-
transform:
|
|
1257
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
1258
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
1259
|
+
}),
|
|
1258
1260
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
|
|
1259
1261
|
padding: padding
|
|
1260
1262
|
});
|
|
1261
|
-
return /*#__PURE__*/createElement(
|
|
1263
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1262
1264
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1263
1265
|
ref: ref,
|
|
1264
1266
|
style: popperWrapperStyle,
|
|
@@ -2051,17 +2053,15 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2051
2053
|
pointerEvents: "none"
|
|
2052
2054
|
}, customStyles[position].transitions.leave),
|
|
2053
2055
|
config: animationConfig.config
|
|
2054
|
-
}, function (show) {
|
|
2055
|
-
return show &&
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
}), _this4.state.text);
|
|
2064
|
-
};
|
|
2056
|
+
}, function (styles, show) {
|
|
2057
|
+
return show && /*#__PURE__*/createElement(animated.div, {
|
|
2058
|
+
className: cx(toastWrapper, _this4.props.className),
|
|
2059
|
+
style: _objectSpread$c(_objectSpread$c({
|
|
2060
|
+
backgroundColor: bColor
|
|
2061
|
+
}, styles), customStyles[position].style)
|
|
2062
|
+
}, /*#__PURE__*/createElement("i", {
|
|
2063
|
+
className: iconClass
|
|
2064
|
+
}), _this4.state.text);
|
|
2065
2065
|
});
|
|
2066
2066
|
}
|
|
2067
2067
|
}], [{
|
|
@@ -2181,15 +2181,16 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2181
2181
|
createElement(MountTransition, {
|
|
2182
2182
|
visible: visible
|
|
2183
2183
|
}, function (transitionStyles) {
|
|
2184
|
-
return /*#__PURE__*/createElement(
|
|
2184
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2185
2185
|
style: {
|
|
2186
2186
|
opacity: transitionStyles.opacity
|
|
2187
2187
|
},
|
|
2188
2188
|
className: cx(modalContainer, backDropClassName)
|
|
2189
|
-
}, /*#__PURE__*/createElement(
|
|
2190
|
-
|
|
2189
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
2190
|
+
style: {
|
|
2191
2191
|
transform: transitionStyles.transform
|
|
2192
|
-
},
|
|
2192
|
+
},
|
|
2193
|
+
className: modalClassName
|
|
2193
2194
|
}, children));
|
|
2194
2195
|
}), node);
|
|
2195
2196
|
}
|
|
@@ -3101,10 +3102,12 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
3101
3102
|
arrowProps = _ref2.arrowProps;
|
|
3102
3103
|
var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, style), transitionStyles), {}, {
|
|
3103
3104
|
backgroundColor: popperBackgroundColor,
|
|
3104
|
-
transform:
|
|
3105
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
3106
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
3107
|
+
}),
|
|
3105
3108
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
|
|
3106
3109
|
});
|
|
3107
|
-
return /*#__PURE__*/createElement(
|
|
3110
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
3108
3111
|
className: cx(popperStyle, popperClassName),
|
|
3109
3112
|
ref: ref,
|
|
3110
3113
|
style: wrapperStyle,
|
|
@@ -3884,7 +3887,7 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
3884
3887
|
closeOnOutsideClick = _this$props2.closeOnOutsideClick;
|
|
3885
3888
|
var _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3886
3889
|
width: width
|
|
3887
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3890
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3888
3891
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3889
3892
|
visible: isOpen
|
|
3890
3893
|
}, transitionProps), function (styles) {
|
|
@@ -4778,8 +4781,7 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
4778
4781
|
}, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
|
|
4779
4782
|
testId: testIds.searchBoxId
|
|
4780
4783
|
})), /*#__PURE__*/createElement(MountTransition, {
|
|
4781
|
-
visible: showSuggestions
|
|
4782
|
-
native: true
|
|
4784
|
+
visible: showSuggestions
|
|
4783
4785
|
}, function (transitionStyles) {
|
|
4784
4786
|
return /*#__PURE__*/createElement(animated.div, {
|
|
4785
4787
|
style: transitionStyles,
|