@gympass/yoga 7.72.4 → 7.73.1

package/cjs/Datepicker/web/Calendar.js

@@ -62,12 +62,12 @@ var getDayFieldColor = function getDayFieldColor(selected, disabled, colors, aux
   return colors.stamina;
 };
 
-var toUTCDate = function toUTCDate(date) {
-  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).getTime();
+var toUTCTime = function toUTCTime(date) {
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
 
 var isSameDate = function isSameDate(firstDate, secondDate) {
-  return firstDate.getDate() === secondDate.getDate() && firstDate.getMonth() === secondDate.getMonth() && firstDate.getFullYear() === secondDate.getFullYear();
+  return firstDate.getUTCDate() === secondDate.getUTCDate() && firstDate.getUTCMonth() === secondDate.getUTCMonth() && firstDate.getUTCFullYear() === secondDate.getUTCFullYear();
 };
 
 var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
@@ -80,11 +80,11 @@ var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
       month = aux.month;
   var currentDate = (_Date = new Date(Date.UTC(year, month, val))) == null ? void 0 : _Date.getTime();
 
-  if (currentDate === toUTCDate(startDate) && endDate) {
+  if (currentDate === toUTCTime(startDate) && endDate) {
     return radii.circle + "px " + radii.sharp + "px " + radii.sharp + "px " + radii.circle + "px";
   }
 
-  if (currentDate === toUTCDate(endDate) && startDate) {
+  if (currentDate === toUTCTime(endDate) && startDate) {
     return radii.sharp + "px " + radii.circle + "px " + radii.circle + "px " + radii.sharp + "px";
   }
 
@@ -152,31 +152,31 @@ function Calendar(_ref6) {
     return new Date(Date.UTC(year, month, 0)).getUTCDate();
   };
 
-  var toUTCDateDay = function toUTCDateDay(day) {
-    return new Date(Date.UTC(year, month, day)).getTime();
+  var toUTCTimeByDay = function toUTCTimeByDay(day) {
+    return Date.UTC(year, month, day);
   };
 
   var isEqual = function isEqual(day) {
-    var utcDate = new Date(Date.UTC(year, month, day));
+    var utcDate = new Date(toUTCTimeByDay(day));
     return startDate && isSameDate(startDate, utcDate) || endDate && isSameDate(endDate, utcDate);
   };
 
   var inRange = function inRange(day) {
-    return startDate && startDate.getTime() <= toUTCDateDay(day) && endDate && endDate.getTime() >= toUTCDateDay(day);
+    return startDate && toUTCTime(startDate) <= toUTCTimeByDay(day) && endDate && endDate.getTime() >= toUTCTimeByDay(day);
   };
 
   var isDisabled = function isDisabled(day) {
-    var local = new Date(Date.UTC(year, month, day));
+    var local = Date.UTC(year, month, day);
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate());
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate());
+    var pastDatesDisabled = disablePastDates && local < nowUTC || disablePastFrom && local < toUTCTime(disablePastFrom);
+    var futureDateDisabled = disableFutureDates && local > nowUTC || disableFutureFrom && local > toUTCTime(disableFutureFrom);
     return pastDatesDisabled || futureDateDisabled;
   };
 
   var _onClick = function onClick(day) {
     var selectedDate = new Date(Date.UTC(year, month, day));
-    if (isDisabled(day) || startDate && selectedDate.getTime() === toUTCDate(startDate)) return;
+    if (isDisabled(day)) return;
 
     if (type === 'single') {
       onSelectSingle(selectedDate);

package/cjs/Tag/web/Informative.js

@@ -15,7 +15,7 @@ var _Tag = _interopRequireDefault(require("./Tag"));
 
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _excluded = ["children", "icon", "theme", "small"];
+var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
 
 var _templateObject;
 
@@ -52,10 +52,12 @@ var TagInformative = function TagInformative(_ref2) {
       text = _ref2$theme$yoga.colors.text,
       tag = _ref2$theme$yoga.components.tag,
       small = _ref2.small,
+      ellipsis = _ref2.ellipsis,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Informative, _extends({
-    small: small
+    small: small,
+    ellipsis: ellipsis
   }, props), icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     as: icon,
     size: small ? tag.icon.size.small : tag.icon.size["default"],
@@ -75,12 +77,16 @@ TagInformative.propTypes = {
   children: _propTypes.node.isRequired,
 
   /** The tag's size */
-  small: _propTypes.bool
+  small: _propTypes.bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: _propTypes.bool
 };
 TagInformative.defaultProps = {
   icon: undefined,
   small: false,
-  variant: 'neutral'
+  variant: 'neutral',
+  ellipsis: false
 };
 TagInformative.displayName = 'Tag.Informative';
 

package/cjs/Tag/web/Tag.js

@@ -17,9 +17,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
   var variant = _ref.variant,
       small = _ref.small,
+      ellipsis = _ref.ellipsis,
       _ref$theme$yoga = _ref.theme.yoga,
       _ref$theme$yoga$color = _ref$theme$yoga.colors,
       text = _ref$theme$yoga$color.text,
@@ -34,8 +35,8 @@ var StyledTag = _styledComponents["default"].div(_templateObject || (_templateOb
     dark: elements.selectionAndIcons
   } : _ref$theme$yoga$color4,
       tag = _ref$theme$yoga.components.tag;
-  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n   \n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, _yogaSystem.margins);
+  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n\n    " + (ellipsis ? "\n      display: block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    " : "") + "\n\n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
+}, _yogaSystem.margins, _yogaSystem.maxWidth);
 /** Tags should be keywords to categorize or organize an item. */
 
 
@@ -49,11 +50,15 @@ Tag.propTypes = {
   children: _propTypes.node.isRequired,
 
   /** Can send small to use this variant */
-  small: _propTypes.bool
+  small: _propTypes.bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: _propTypes.bool
 };
 Tag.defaultProps = {
   variant: '',
-  small: false
+  small: false,
+  ellipsis: false
 };
 var _default = Tag;
 exports["default"] = _default;

package/esm/Datepicker/web/Calendar.js

@@ -43,12 +43,12 @@ var getDayFieldColor = function getDayFieldColor(selected, disabled, colors, aux
   return colors.stamina;
 };
 
-var toUTCDate = function toUTCDate(date) {
-  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).getTime();
+var toUTCTime = function toUTCTime(date) {
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
 
 var isSameDate = function isSameDate(firstDate, secondDate) {
-  return firstDate.getDate() === secondDate.getDate() && firstDate.getMonth() === secondDate.getMonth() && firstDate.getFullYear() === secondDate.getFullYear();
+  return firstDate.getUTCDate() === secondDate.getUTCDate() && firstDate.getUTCMonth() === secondDate.getUTCMonth() && firstDate.getUTCFullYear() === secondDate.getUTCFullYear();
 };
 
 var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
@@ -61,11 +61,11 @@ var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
       month = aux.month;
   var currentDate = (_Date = new Date(Date.UTC(year, month, val))) == null ? void 0 : _Date.getTime();
 
-  if (currentDate === toUTCDate(startDate) && endDate) {
+  if (currentDate === toUTCTime(startDate) && endDate) {
     return radii.circle + "px " + radii.sharp + "px " + radii.sharp + "px " + radii.circle + "px";
   }
 
-  if (currentDate === toUTCDate(endDate) && startDate) {
+  if (currentDate === toUTCTime(endDate) && startDate) {
     return radii.sharp + "px " + radii.circle + "px " + radii.circle + "px " + radii.sharp + "px";
   }
 
@@ -132,31 +132,31 @@ function Calendar(_ref6) {
     return new Date(Date.UTC(year, month, 0)).getUTCDate();
   };
 
-  var toUTCDateDay = function toUTCDateDay(day) {
-    return new Date(Date.UTC(year, month, day)).getTime();
+  var toUTCTimeByDay = function toUTCTimeByDay(day) {
+    return Date.UTC(year, month, day);
   };
 
   var isEqual = function isEqual(day) {
-    var utcDate = new Date(Date.UTC(year, month, day));
+    var utcDate = new Date(toUTCTimeByDay(day));
     return startDate && isSameDate(startDate, utcDate) || endDate && isSameDate(endDate, utcDate);
   };
 
   var inRange = function inRange(day) {
-    return startDate && startDate.getTime() <= toUTCDateDay(day) && endDate && endDate.getTime() >= toUTCDateDay(day);
+    return startDate && toUTCTime(startDate) <= toUTCTimeByDay(day) && endDate && endDate.getTime() >= toUTCTimeByDay(day);
   };
 
   var isDisabled = function isDisabled(day) {
-    var local = new Date(Date.UTC(year, month, day));
+    var local = Date.UTC(year, month, day);
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate());
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate());
+    var pastDatesDisabled = disablePastDates && local < nowUTC || disablePastFrom && local < toUTCTime(disablePastFrom);
+    var futureDateDisabled = disableFutureDates && local > nowUTC || disableFutureFrom && local > toUTCTime(disableFutureFrom);
     return pastDatesDisabled || futureDateDisabled;
   };
 
   var _onClick = function onClick(day) {
     var selectedDate = new Date(Date.UTC(year, month, day));
-    if (isDisabled(day) || startDate && selectedDate.getTime() === toUTCDate(startDate)) return;
+    if (isDisabled(day)) return;
 
     if (type === 'single') {
       onSelectSingle(selectedDate);

package/esm/Tag/web/Informative.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "icon", "theme", "small"];
+var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
 
 var _templateObject;
 
@@ -35,10 +35,12 @@ var TagInformative = function TagInformative(_ref2) {
       text = _ref2$theme$yoga.colors.text,
       tag = _ref2$theme$yoga.components.tag,
       small = _ref2.small,
+      ellipsis = _ref2.ellipsis,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(Informative, _extends({
-    small: small
+    small: small,
+    ellipsis: ellipsis
   }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     as: icon,
     size: small ? tag.icon.size.small : tag.icon.size["default"],
@@ -58,12 +60,16 @@ TagInformative.propTypes = {
   children: node.isRequired,
 
   /** The tag's size */
-  small: bool
+  small: bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool
 };
 TagInformative.defaultProps = {
   icon: undefined,
   small: false,
-  variant: 'neutral'
+  variant: 'neutral',
+  ellipsis: false
 };
 TagInformative.displayName = 'Tag.Informative';
 export default withTheme(TagInformative);

package/esm/Tag/web/Tag.js

@@ -5,10 +5,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import React from 'react';
 import styled from 'styled-components';
 import { oneOf, node, bool } from 'prop-types';
-import { margins } from '@gympass/yoga-system';
-var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+import { margins, maxWidth } from '@gympass/yoga-system';
+var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
   var variant = _ref.variant,
       small = _ref.small,
+      ellipsis = _ref.ellipsis,
       _ref$theme$yoga = _ref.theme.yoga,
       _ref$theme$yoga$color = _ref$theme$yoga.colors,
       text = _ref$theme$yoga$color.text,
@@ -23,8 +24,8 @@ var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplate
     dark: elements.selectionAndIcons
   } : _ref$theme$yoga$color4,
       tag = _ref$theme$yoga.components.tag;
-  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n   \n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, margins);
+  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n\n    " + (ellipsis ? "\n      display: block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    " : "") + "\n\n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
+}, margins, maxWidth);
 /** Tags should be keywords to categorize or organize an item. */
 
 var Tag = function Tag(props) {
@@ -37,10 +38,14 @@ Tag.propTypes = {
   children: node.isRequired,
 
   /** Can send small to use this variant */
-  small: bool
+  small: bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool
 };
 Tag.defaultProps = {
   variant: '',
-  small: false
+  small: false,
+  ellipsis: false
 };
 export default Tag;

package/esm/Tag/web/Tag.test.js

@@ -76,4 +76,31 @@ describe('<Tag />', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('should match snapshot with ellipsis prop', function () {
+    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Default with ellipsis"))),
+        container = _render8.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with variant, informative type and ellipsis prop', function () {
+    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "success",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Success with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "attention",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Attention with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "informative",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Informative with ellipsis"))),
+        container = _render9.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.72.4",
+  "version": "7.73.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "56a1fbb6108c24a4c9e4610e7ae93c1bcd7b245d",
+  "gitHead": "a3dd6190c1e10982f2c9f680eadce5e6544bb632",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"