pebble-web 2.5.0 → 2.7.0

package/dist/pebble-web.es.js

@@ -994,7 +994,7 @@ const animationConfig = {
     pointerEvents: "none"
   },
   config: (_a, motion) => motion === "leave" ? {
-    duration: 0.1
+    duration: 80
   } : {
     duration: 200
   }
@@ -1205,6 +1205,12 @@ const wrapperStyle$3 = /*#__PURE__*/css( {
   name: "h7juj2-wrapperStyle",
   styles: "margin-bottom:20px;;label:wrapperStyle;"
 } );
+const errorStyle = /*#__PURE__*/css({ ...typography.s.bold,
+  backgroundColor: colors.red.lightest,
+  color: colors.red.darker,
+  textAlign: "left",
+  padding: "11px 30px"
+}, ";label:errorStyle;" + ( "" ));
 
 function getColor(error, success, isUnderlineColor) {
   let color = colors.gray.dark;
@@ -1424,7 +1430,8 @@ class DateInput extends PureComponent {
       inputProps,
       placeholder,
       value: propsValue,
-      disabled
+      disabled,
+      errorMessage
     } = this.props;
     return /*#__PURE__*/createElement(DropDown, {
       dropDownClassName: dropDownClassName,
@@ -1441,7 +1448,7 @@ class DateInput extends PureComponent {
         onChange: noop,
         type: "tel",
         value: value,
-        placeholder: `${placeholder} DD/MM/YYYY`,
+        placeholder: placeholder,
         onClick: () => {
           if (disabled) return;
           toggleDropdown();
@@ -1461,7 +1468,7 @@ class DateInput extends PureComponent {
       modifiers: modifiers
     }, ({
       toggle
-    }) => /*#__PURE__*/createElement(Calendar, Object.assign({
+    }) => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Calendar, Object.assign({
       hideShadow: true,
       className: dateClass,
       selected: propsValue ? new Date(propsValue) : undefined
@@ -1471,7 +1478,9 @@ class DateInput extends PureComponent {
         this.onCalendarDateChange(date);
         toggle();
       }
-    })));
+    })), errorMessage && /*#__PURE__*/createElement("div", {
+      className: errorStyle
+    }, errorMessage)));
   }
 }
 function checkDateInputSupport() {
@@ -3190,7 +3199,6 @@ const closeStyle = /*#__PURE__*/css({
   }
 }, ";label:closeStyle;" + ( "" ));
 const sidebarStyle = /*#__PURE__*/css({
-  transition: `transform 200ms ${constants.animationCurve}`,
   backgroundColor: colors.white.base,
   position: "fixed",
   top: 0,
@@ -3207,13 +3215,17 @@ const sidebarStyle = /*#__PURE__*/css({
 
 const transitionProps = {
   from: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)"
   },
   enter: {
-    opacity: 1
+    opacity: 1,
+    transform: "translateX(0)"
   },
   leave: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)",
+    pointerEvents: "none"
   }
 };
 class SideBar extends PureComponent {
@@ -3255,38 +3267,32 @@ class SideBar extends PureComponent {
       onOutsideClick,
       closeOnOutsideClick
     } = this.props;
-    const _sidebarOverride = /*#__PURE__*/css({
-      width,
-      transform: isOpen ? `translateX(0)` : `translateX(${width}px)`
-    }, ";label:SideBar;" + ( "" ));
-    const _sidebarStyle = cx(_sidebarOverride, sidebarStyle, /*#__PURE__*/css({
-      transform: isOpen ? `translateX(0)` : `translateX(100%)`
+    const _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
+      width
     }, ";label:SideBar;" + ( "" )));
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Transition, Object.assign({
-      items: isOpen
-    }, transitionProps, {
-      config: animationConfig.config
-    }), show => show && (styles => /*#__PURE__*/createElement(animated.div, {
-      style: styles,
+    return /*#__PURE__*/createElement(MountTransition, Object.assign({
+      visible: isOpen
+    }, transitionProps), styles => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
+      style: {
+        opacity: styles.opacity
+      },
       className: sidebarWrapperStyle,
       onClick: onOutsideClick || closeOnOutsideClick ? this.onOutsideClick : undefined,
       "data-testid": "shadowArea"
-    }))), /*#__PURE__*/createElement("div", {
-      className: _sidebarStyle
-    }, /*#__PURE__*/createElement(Transition, Object.assign({
-      items: isOpen
-    }, transitionProps), show => show && (styles => /*#__PURE__*/createElement(animated.div, {
-      style: styles,
+    }), /*#__PURE__*/createElement(animated.div, {
+      className: _sidebarStyle,
+      style: styles
+    }, /*#__PURE__*/createElement("div", {
       className: closeStyle,
       onClick: onClose
     }, /*#__PURE__*/createElement("i", {
       className: "pi pi-close"
-    }), /*#__PURE__*/createElement(Ink, null)))), isOpen && /*#__PURE__*/createElement("div", {
+    }), /*#__PURE__*/createElement(Ink, null)), /*#__PURE__*/createElement("div", {
       style: {
         overflowY: "scroll",
         height: "100vh"
       }
-    }, children)));
+    }, children))));
   }
 }
 SideBar.defaultProps = {