baseui 0.0.0-next-4847bd9 → 0.0.0-next-96b59fd

package/button/styled-components.js

@@ -90,7 +90,7 @@ var EndEnhancer = (0, _styles.styled)('div', function (_ref2) {
   var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return _defineProperty({
     display: 'flex'
-  }, marginDirection, $theme.sizing.scale500);
+  }, marginDirection, $theme.sizing.scale300);
 });
 exports.EndEnhancer = EndEnhancer;
 EndEnhancer.displayName = "EndEnhancer";
@@ -100,7 +100,7 @@ var StartEnhancer = (0, _styles.styled)('div', function (_ref4) {
   var marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return _defineProperty({
     display: 'flex'
-  }, marginDirection, $theme.sizing.scale500);
+  }, marginDirection, $theme.sizing.scale300);
 });
 exports.StartEnhancer = StartEnhancer;
 StartEnhancer.displayName = "StartEnhancer";

package/button/styled-components.js.flow

@@ -72,7 +72,7 @@ export const EndEnhancer = styled<SharedStylePropsT>('div', ({ $theme }) => {
   const marginDirection: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     display: 'flex',
-    [marginDirection]: $theme.sizing.scale500,
+    [marginDirection]: $theme.sizing.scale300,
   };
 });
 
@@ -80,7 +80,7 @@ export const StartEnhancer = styled<SharedStylePropsT>('div', ({ $theme }) => {
   const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     display: 'flex',
-    [marginDirection]: $theme.sizing.scale500,
+    [marginDirection]: $theme.sizing.scale300,
   };
 });
 

package/button-timed/button-timed.js

@@ -53,28 +53,38 @@ var ButtonTimed = function ButtonTimed(props) {
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = React.useState(initialTime * 1000),
+  var _React$useState = React.useState(Date.now()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      timeRemaining = _React$useState2[0],
-      setTimeRemaining = _React$useState2[1];
+      startTime = _React$useState2[0],
+      setStartTime = _React$useState2[1];
 
+  var _React$useState3 = React.useState(initialTime * 1000),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      timeRemaining = _React$useState4[0],
+      setTimeRemaining = _React$useState4[1];
+
+  React.useEffect(function () {
+    if (!paused) {
+      setStartTime(Date.now() - (initialTime * 1000 - timeRemaining));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [paused, initialTime]);
   React.useEffect(function () {
-    var timerId = setTimeout(function () {
-      if (timeRemaining > 0 && !paused) {
-        setTimeRemaining(function (seconds) {
-          return seconds - 100;
-        });
+    var intervalId = setInterval(function () {
+      if (!paused) {
+        var elapsed = Date.now() - startTime;
+        var remaining = Math.max(initialTime * 1000 - elapsed, 0);
+        setTimeRemaining(remaining);
+
+        if (remaining === 0) {
+          onClickProp();
+        }
       }
     }, 100);
-
-    if (timeRemaining === 0) {
-      onClickProp();
-    }
-
     return function () {
-      return clearTimeout(timerId);
+      return clearInterval(intervalId);
     };
-  }, [timeRemaining, paused]);
+  }, [startTime, paused, onClickProp, initialTime]);
 
   var onClick = function onClick() {
     setTimeRemaining(0);

package/button-timed/utils.js

@@ -11,19 +11,19 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-function roundUpToNearestInt(num) {
-  var cleanedNum = Math.trunc(num * 10) / 10;
-  return Math.ceil(cleanedNum);
-}
-
 function padTo2Digits(num) {
   return num.toString().padStart(2, '0');
 }
 
 var formatTime = function formatTime(totalMilliseconds) {
-  var totalSeconds = totalMilliseconds / 1000;
+  var totalSeconds = Math.floor(totalMilliseconds / 1000); // If there are remaining milliseconds, consider it as an extra second.
+
+  if (totalMilliseconds % 1000 > 0) {
+    totalSeconds += 1;
+  }
+
   var minutes = Math.floor(totalSeconds / 60);
-  var seconds = roundUpToNearestInt(totalSeconds % 60);
+  var seconds = Math.floor(totalSeconds % 60);
   return "".concat(minutes, ":").concat(padTo2Digits(seconds));
 };
 

package/es/button/styled-components.js

@@ -86,7 +86,7 @@ export const EndEnhancer = styled('div', ({
   const marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     display: 'flex',
-    [marginDirection]: $theme.sizing.scale500
+    [marginDirection]: $theme.sizing.scale300
   };
 });
 EndEnhancer.displayName = "EndEnhancer";
@@ -97,7 +97,7 @@ export const StartEnhancer = styled('div', ({
   const marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     display: 'flex',
-    [marginDirection]: $theme.sizing.scale500
+    [marginDirection]: $theme.sizing.scale300
   };
 });
 StartEnhancer.displayName = "StartEnhancer";

package/es/button-timed/button-timed.js

@@ -23,20 +23,28 @@ const ButtonTimed = props => {
     overrides = {},
     ...restProps
   } = props;
+  const [startTime, setStartTime] = React.useState(Date.now());
   const [timeRemaining, setTimeRemaining] = React.useState(initialTime * 1000);
   React.useEffect(() => {
-    const timerId = setTimeout(() => {
-      if (timeRemaining > 0 && !paused) {
-        setTimeRemaining(seconds => seconds - 100);
-      }
-    }, 100);
+    if (!paused) {
+      setStartTime(Date.now() - (initialTime * 1000 - timeRemaining));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    if (timeRemaining === 0) {
-      onClickProp();
-    }
+  }, [paused, initialTime]);
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (!paused) {
+        const elapsed = Date.now() - startTime;
+        const remaining = Math.max(initialTime * 1000 - elapsed, 0);
+        setTimeRemaining(remaining);
 
-    return () => clearTimeout(timerId);
-  }, [timeRemaining, paused]);
+        if (remaining === 0) {
+          onClickProp();
+        }
+      }
+    }, 100);
+    return () => clearInterval(intervalId);
+  }, [startTime, paused, onClickProp, initialTime]);
 
   const onClick = () => {
     setTimeRemaining(0);

package/es/button-timed/utils.js

@@ -4,18 +4,18 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-function roundUpToNearestInt(num) {
-  const cleanedNum = Math.trunc(num * 10) / 10;
-  return Math.ceil(cleanedNum);
-}
-
 function padTo2Digits(num) {
   return num.toString().padStart(2, '0');
 }
 
 export const formatTime = totalMilliseconds => {
-  const totalSeconds = totalMilliseconds / 1000;
+  let totalSeconds = Math.floor(totalMilliseconds / 1000); // If there are remaining milliseconds, consider it as an extra second.
+
+  if (totalMilliseconds % 1000 > 0) {
+    totalSeconds += 1;
+  }
+
   const minutes = Math.floor(totalSeconds / 60);
-  const seconds = roundUpToNearestInt(totalSeconds % 60);
+  const seconds = Math.floor(totalSeconds % 60);
   return `${minutes}:${padTo2Digits(seconds)}`;
 };

package/esm/button/styled-components.js

@@ -86,7 +86,7 @@ export var EndEnhancer = styled('div', function (_ref2) {
   var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return _defineProperty({
     display: 'flex'
-  }, marginDirection, $theme.sizing.scale500);
+  }, marginDirection, $theme.sizing.scale300);
 });
 EndEnhancer.displayName = "EndEnhancer";
 EndEnhancer.displayName = 'EndEnhancer';
@@ -95,7 +95,7 @@ export var StartEnhancer = styled('div', function (_ref4) {
   var marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return _defineProperty({
     display: 'flex'
-  }, marginDirection, $theme.sizing.scale500);
+  }, marginDirection, $theme.sizing.scale300);
 });
 StartEnhancer.displayName = "StartEnhancer";
 StartEnhancer.displayName = 'StartEnhancer';

package/esm/button-timed/button-timed.js

@@ -42,28 +42,38 @@ var ButtonTimed = function ButtonTimed(props) {
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = React.useState(initialTime * 1000),
+  var _React$useState = React.useState(Date.now()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      timeRemaining = _React$useState2[0],
-      setTimeRemaining = _React$useState2[1];
+      startTime = _React$useState2[0],
+      setStartTime = _React$useState2[1];
 
+  var _React$useState3 = React.useState(initialTime * 1000),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      timeRemaining = _React$useState4[0],
+      setTimeRemaining = _React$useState4[1];
+
+  React.useEffect(function () {
+    if (!paused) {
+      setStartTime(Date.now() - (initialTime * 1000 - timeRemaining));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [paused, initialTime]);
   React.useEffect(function () {
-    var timerId = setTimeout(function () {
-      if (timeRemaining > 0 && !paused) {
-        setTimeRemaining(function (seconds) {
-          return seconds - 100;
-        });
+    var intervalId = setInterval(function () {
+      if (!paused) {
+        var elapsed = Date.now() - startTime;
+        var remaining = Math.max(initialTime * 1000 - elapsed, 0);
+        setTimeRemaining(remaining);
+
+        if (remaining === 0) {
+          onClickProp();
+        }
       }
     }, 100);
-
-    if (timeRemaining === 0) {
-      onClickProp();
-    }
-
     return function () {
-      return clearTimeout(timerId);
+      return clearInterval(intervalId);
     };
-  }, [timeRemaining, paused]);
+  }, [startTime, paused, onClickProp, initialTime]);
 
   var onClick = function onClick() {
     setTimeRemaining(0);

package/esm/button-timed/utils.js

@@ -4,18 +4,18 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-function roundUpToNearestInt(num) {
-  var cleanedNum = Math.trunc(num * 10) / 10;
-  return Math.ceil(cleanedNum);
-}
-
 function padTo2Digits(num) {
   return num.toString().padStart(2, '0');
 }
 
 export var formatTime = function formatTime(totalMilliseconds) {
-  var totalSeconds = totalMilliseconds / 1000;
+  var totalSeconds = Math.floor(totalMilliseconds / 1000); // If there are remaining milliseconds, consider it as an extra second.
+
+  if (totalMilliseconds % 1000 > 0) {
+    totalSeconds += 1;
+  }
+
   var minutes = Math.floor(totalSeconds / 60);
-  var seconds = roundUpToNearestInt(totalSeconds % 60);
+  var seconds = Math.floor(totalSeconds % 60);
   return "".concat(minutes, ":").concat(padTo2Digits(seconds));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-4847bd9",
+  "version": "0.0.0-next-96b59fd",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",