@decisiv/ui-components 1.36.1-alpha.6 → 2.0.1-alpha.101

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/Decisiv/decisiv-design-system/compare/@decisiv/ui-components@1.36.0...@decisiv/ui-components@2.0.0) (2020-08-10)
+
+
+### Bug Fixes
+
+* **ui-components:** forces major version bump in iconix ([8eac13a](https://github.com/Decisiv/decisiv-design-system/commit/8eac13a))
+* forces major version bumps in iconix and ui-components ([717e0b2](https://github.com/Decisiv/decisiv-design-system/commit/717e0b2))
+* forces major version bumps in iconix and ui-components ([cbc72b4](https://github.com/Decisiv/decisiv-design-system/commit/cbc72b4))
+
+
+### BREAKING CHANGES
+
+* **ui-components:** Typography component breaking changes,
+specifically around P shade.
+* Iconix API update for rendering icons in various sizes;
+UI components breaking changes in Typography component, specifically
+around P shade.
+* Iconix API update for rendering icons in various sizes;
+UI components breaking changes in Typography component, specifically
+around P shade.
+
+
+
+
+
 # [1.36.0](https://github.com/Decisiv/decisiv-design-system/compare/@decisiv/ui-components@1.35.0...@decisiv/ui-components@1.36.0) (2020-08-04)
 
 

package/lib/atoms/BaseButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BaseButton/index.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,uEAkBf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BaseButton/index.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,uEAcf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/atoms/BaseButton/index.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var BaseButton = _styledComponents.default.button.withConfig({
   displayName: "BaseButton",
   componentId: "sc-1qmeau6-0"
-})(["font-family:", ";margin:0;overflow:visible;-webkit-appearance:button;&::-moz-focus-inner{border-style:none;padding:0;}&:-moz-focusring{outline:1px dotted ButtonText;}"], _typefaces.default.default);
+})(["font-family:", ";margin:0;overflow:visible;-webkit-appearance:button;&::-moz-focus-inner{border-style:none;padding:0;}"], _typefaces.default.default);
 
 var _default = BaseButton;
 exports.default = _default;

package/lib/atoms/BooleanInput/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/elements.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,WAAW,oEAYvB,CAAC;AAEF,eAAO,MAAM,cAAc,oEAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,2EA4DrB,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/elements.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,WAAW,oEAYvB,CAAC;AAEF,eAAO,MAAM,cAAc,oEAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,2EAoErB,CAAC"}

package/lib/atoms/BooleanInput/elements.js

@@ -9,12 +9,14 @@ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorS
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _designTokens = require("@decisiv/design-tokens");
 
 var _modifiers = require("./modifiers");
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
@@ -40,8 +42,11 @@ exports.RadioCheckMark = RadioCheckMark;
 var Container = _styledComponents.default.div.withConfig({
   displayName: "elements__Container",
   componentId: "sc-1ktbvi9-2"
-})(["align-items:flex-start;display:flex;flex-direction:column;justify-items:center;position:relative;input{&[type='checkbox'],&[type='radio']{box-sizing:border-box;padding:0;}clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px;&:focus + label ", "{border-color:", ";box-shadow:inset 0 0 0 2px ", ";}&:checked + label ", " > *{visibility:visible;}}label{display:flex;align-items:center;&:hover ", "{border-color:", ";}}", " > *{color:", ";}label span{line-height:1.4;margin-left:", ";}label + *{margin-top:", ";}", ";", ";", ";", ";"], StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_objectSpread({}, _designTokens.color.interaction.pacificOcean, {
+})(["align-items:flex-start;display:flex;flex-direction:column;justify-items:center;position:relative;input{&[type='checkbox'],&[type='radio']{box-sizing:border-box;padding:0;}clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px;&:focus + label ", "{border-color:", ";box-shadow:inset 0 0 0 2px ", ";}&:checked + label ", " > *{visibility:visible;}", "}label{display:flex;align-items:center;&:hover ", "{border-color:", ";}}", " > *{color:", ";}label span{line-height:1.4;margin-left:", ";}label + *{margin-top:", ";}", ";", ";", ";", ";"], StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_objectSpread({}, _designTokens.color.interaction.pacificOcean, {
   alpha: 0.4
-})), StyledInput, StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _rem.default)(10), (0, _rem.default)(10), _modifiers.typeModifiers, _modifiers.sizeModifiers, _modifiers.statusModifiers, _modifiers.disabledModifiers);
+})), StyledInput, function (_ref) {
+  var indeterminate = _ref.indeterminate;
+  return indeterminate && (0, _styledComponents.css)(["& + label ", " > *{visibility:visible;}"], StyledInput);
+}, StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), StyledInput, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _rem.default)(10), (0, _rem.default)(10), _modifiers.typeModifiers, _modifiers.sizeModifiers, _modifiers.statusModifiers, _modifiers.disabledModifiers);
 
 exports.Container = Container;

package/lib/atoms/BooleanInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,sBAAsB,EACvB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AA+ExB,QAAA,MAAM,mBAAmB,EAAE,sBAAsB,CAC/C,YAAY,EACZ,KAAK,CACqB,CAAC;AAE7B,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,sBAAsB,EACvB,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AA4GxB,QAAA,MAAM,mBAAmB,EAAE,sBAAsB,CAC/C,YAAY,EACZ,KAAK,CACqB,CAAC;AAE7B,eAAe,mBAAmB,CAAC"}

package/lib/atoms/BooleanInput/index.js

@@ -10,8 +10,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Check = _interopRequireDefault(require("@decisiv/iconix/lib/components/Check"));
 
+var _Minus = _interopRequireDefault(require("@decisiv/iconix/lib/components/Minus"));
+
 var _Message = _interopRequireDefault(require("../../components/Message"));
 
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
 var _elements = require("./elements");
@@ -50,14 +58,17 @@ var BooleanInput = function BooleanInput(props, ref) {
       className = props.className,
       disabled = props.disabled,
       id = props.id,
+      required = props.required,
+      requiredMessageProp = props.requiredMessage,
       label = props.label,
       readOnly = props.readOnly,
       size = props.size,
       status = props.status,
       inputRef = props.inputRef,
+      indeterminate = props.indeterminate,
       providedType = props.type,
       warningMessage = props.warningMessage,
-      rest = _objectWithoutProperties(props, ["aria-describedby", "className", "disabled", "id", "label", "readOnly", "size", "status", "inputRef", "type", "warningMessage"]);
+      rest = _objectWithoutProperties(props, ["aria-describedby", "className", "disabled", "id", "required", "requiredMessage", "label", "readOnly", "size", "status", "inputRef", "indeterminate", "type", "warningMessage"]);
 
   var type = !validTypes.includes(providedType) ? 'checkbox' : providedType;
   var uuid = (0, _useUniqueId.default)(id, 'input-');
@@ -65,8 +76,10 @@ var BooleanInput = function BooleanInput(props, ref) {
     return (label || '').trim();
   }, [label]);
   var Mark = (0, _react.useMemo)(function () {
-    return marks[type];
-  }, [type]);
+    return indeterminate && type === 'checkbox' ? _Minus.default : marks[type];
+  }, [type, indeterminate]);
+  var translate = (0, _useTranslations.default)();
+  var requiredMessage = translate(requiredMessageProp, 'textField.requiredMessage');
   var warningMessageId = (0, _useUniqueId.default)(undefined, 'input-warning-', [warningMessage]);
   return _react.default.createElement(_elements.Container, {
     className: className,
@@ -75,9 +88,11 @@ var BooleanInput = function BooleanInput(props, ref) {
     ref: ref,
     size: size,
     status: status,
-    warningMessage: warningMessage
+    warningMessage: warningMessage,
+    indeterminate: indeterminate
   }, _react.default.createElement("input", _extends({}, rest, {
     "aria-describedby": warningMessage ? "".concat(ariaDescribedBy || '', " ").concat(warningMessageId) : ariaDescribedBy,
+    required: required,
     ref: inputRef,
     id: uuid,
     type: type // Checkbox/Radio inputs don't support read-only,
@@ -93,7 +108,13 @@ var BooleanInput = function BooleanInput(props, ref) {
   }, _react.default.createElement(_elements.StyledInput, null, _react.default.createElement(Mark, {
     size: size === 'small' ? 'small' : 'medium',
     "aria-hidden": true
-  })), text && _react.default.createElement("span", null, text)), warningMessage && _react.default.createElement(_Message.default, {
+  })), text && _react.default.createElement("span", null, text, required && _react.default.createElement(_Tooltip.default, {
+    placement: "top",
+    target: _react.default.createElement(_RequiredIcon.default, {
+      marginTop: "-3px",
+      "aria-label": requiredMessage
+    })
+  }, requiredMessage))), warningMessage && _react.default.createElement(_Message.default, {
     id: warningMessageId,
     intent: "warning"
   }, warningMessage));

package/lib/atoms/BooleanInput/index.test.js

@@ -95,35 +95,46 @@ describe('BooleanInput', function () {
         var input = container.querySelector('input');
         expect(input.checked).toBe(true);
       });
-      it('renders correctly with status warning', function () {
+      it('renders correctly when required', function () {
         var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
           id: "input",
           type: type,
-          status: "warning"
+          required: true,
+          label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         })),
             container = _render8.container;
 
         expect(container).toMatchSnapshot();
       });
-      it('renders correctly with a warning message', function () {
+      it('renders correctly with status warning', function () {
         var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
           id: "input",
           type: type,
-          warningMessage: "warning message"
+          status: "warning"
         })),
             container = _render9.container;
 
         expect(container).toMatchSnapshot();
       });
+      it('renders correctly with a warning message', function () {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+          id: "input",
+          type: type,
+          warningMessage: "warning message"
+        })),
+            container = _render10.container;
+
+        expect(container).toMatchSnapshot();
+      });
     });
   });
   it('falls back to type "checkbox" when provided an invalid type', function () {
-    var _render10 = (0, _react2.render)( // @ts-ignore invalid type
+    var _render11 = (0, _react2.render)( // @ts-ignore invalid type
     _react.default.createElement(_.default, {
       type: "foo",
       "data-testid": "input"
     })),
-        getByTestId = _render10.getByTestId;
+        getByTestId = _render11.getByTestId;
 
     expect(getByTestId('input').getAttribute('type')).toBe('checkbox');
   });

package/lib/atoms/BooleanInput/types.d.ts

@@ -8,10 +8,13 @@ export interface Props extends BaseProps {
     inputRef?: Ref<InputRef>;
     label?: string;
     readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
     ref?: Ref<ContainerRef>;
     size?: 'normal' | 'small';
     status?: 'normal' | 'warning';
     type: 'checkbox' | 'radio';
+    indeterminate?: boolean;
     value?: string | number;
     warningMessage?: string;
 }
@@ -21,6 +24,7 @@ export interface Modifiers {
     size?: 'normal' | 'small';
     status?: 'normal' | 'warning';
     warningMessage?: string;
+    indeterminate?: boolean;
 }
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/atoms/BooleanInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,oBAAY,QAAQ,GAAG,gBAAgB,CAAC;AACxC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAE1C,aAAK,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,oBAAY,QAAQ,GAAG,gBAAgB,CAAC;AACxC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAE1C,aAAK,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/lib/atoms/BooleanInput/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/atoms/Calendar/hooks/useCalendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/Calendar/hooks/useCalendar/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,YAAY,EACZ,mBAAmB,EAIpB,MAAM,aAAa,CAAC;AAyBrB,iBAAS,WAAW,CAAC,OAAO,GAAE,mBAAwB,GAAG,YAAY,CAkKpE;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/Calendar/hooks/useCalendar/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,YAAY,EACZ,mBAAmB,EAIpB,MAAM,aAAa,CAAC;AAyBrB,iBAAS,WAAW,CAAC,OAAO,GAAE,mBAAwB,GAAG,YAAY,CAmKpE;AAED,eAAe,WAAW,CAAC"}

package/lib/atoms/Calendar/hooks/useCalendar/index.js

@@ -66,8 +66,9 @@ function useCalendar() {
   var singleDate = clickedDate || (Array.isArray(date) ? date[0] : date); // Ensures we are working with a JavaScript date object.
 
   var dateForViewMonth = (0, _utils.buildJSDate)(singleDate); // Dates are mutable. Ew...
+  // Set the date to the first day of the month to avoid issues when navigating to february
 
-  dateForViewMonth.setMonth(dateForViewMonth.getMonth() + monthOffset);
+  dateForViewMonth.setMonth(dateForViewMonth.getMonth() + monthOffset, 1);
   var setCurrentActiveDate = (0, _react.useCallback)(function (newCurrentActiveDate) {
     return function () {
       updateCalendarState({

package/lib/atoms/Calendar/hooks/useCalendar/index.test.js

@@ -78,12 +78,11 @@ describe('useCalendar', function () {
     expect(displayMonth.month).toEqual(2);
   });
   it('provides a function for navigating to the next month', function () {
+    var date = new Date('2020/01/31');
+
     var _renderHook4 = (0, _reactHooks.renderHook)(function () {
       return (0, _.default)({
-        date: {
-          year: 2020,
-          month: 1
-        }
+        date: date
       });
     }),
         result = _renderHook4.result;
@@ -218,14 +217,14 @@ describe('useCalendar', function () {
           result = _renderHook8.result;
 
       var selectedDisplayDate = (0, _flatten.default)(result.current.dateMatrix).find(function (displayDate) {
-        return displayDate && displayDate.date === 7;
+        return !!displayDate && displayDate.date === 7;
       });
       (0, _reactHooks.act)(function () {
         // setSelected is a curried call.
         result.current.setSelected(selectedDisplayDate)();
       });
       expect((0, _flatten.default)(result.current.dateMatrix).find(function (displayDate) {
-        return displayDate && displayDate.date === 7;
+        return !!displayDate && displayDate.date === 7;
       }).isSelected).toBe(true);
     });
     it('calls the onChange option with the new value', function () {

package/lib/atoms/Calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,cAAc,EAAgB,cAAc,EAAE,MAAM,SAAS,CAAC;AAIvE,UAAU,iBAAiB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACpD;AAED,wBAAgB,gBAAgB,IAAI,iBAAiB,CA0BpD;AAoDD,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAyJpD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,cAAc,EAAgB,cAAc,EAAE,MAAM,SAAS,CAAC;AAIvE,UAAU,iBAAiB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACpD;AAED,wBAAgB,gBAAgB,IAAI,iBAAiB,CA0BpD;AA0DD,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqLpD;AAED,eAAe,QAAQ,CAAC"}

package/lib/atoms/Calendar/index.js

@@ -12,12 +12,16 @@ var _range = _interopRequireDefault(require("lodash/range"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _ArrowLeft = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowLeft"));
 
 var _ArrowRight = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowRight"));
 
 var _Button = _interopRequireDefault(require("../../components/Button"));
 
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
 var _Flex = _interopRequireDefault(require("../../components/Flex"));
 
 var _Grid = _interopRequireDefault(require("../../components/Grid"));
@@ -117,9 +121,14 @@ function getSelectedRangeModifier(currentDisplayDate, selectedDates) {
   return undefined;
 }
 
+var LabelWrapper = (0, _styledComponents.default)(_Typography.P).withConfig({
+  displayName: "Calendar__LabelWrapper",
+  componentId: "sc-13y7p8y-0"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+
 function Calendar(props) {
   var focusOnRender = props.focusOnRender,
-      minWidth = props.minWidth,
+      width = props.width,
       selected = props.selected,
       viewMonth = props.viewMonth;
 
@@ -137,10 +146,23 @@ function Calendar(props) {
 
   var translate = (0, _useTranslations.default)();
 
+  var labelRef = _react.default.useRef(null);
+
   var firstRender = _react.default.useRef(true);
 
   var firstTabbableElementRef = _react.default.useRef(null);
 
+  var today = (0, _utils.buildJSDate)(new Date());
+  var displayedMonth = dateMatrix[1][1] && dateMatrix[1][1].month;
+  var displayedYear = dateMatrix[1][1] && dateMatrix[1][1].year;
+  var isCurrentMonth = today.getMonth() + 1 === displayedMonth;
+  var isCurrentYear = today.getFullYear() === displayedYear;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTooltip = _useState2[0],
+      setShowTooltip = _useState2[1];
+
   _react.default.useEffect(function () {
     if (focusOnRender && firstRender) {
       firstRender.current = false; // @ts-ignore
@@ -149,13 +171,30 @@ function Calendar(props) {
     }
   }, [focusOnRender]);
 
+  _react.default.useLayoutEffect(function () {
+    var elem = labelRef.current;
+
+    if (elem && elem.clientWidth < elem.scrollWidth) {
+      setShowTooltip(true);
+    } else {
+      setShowTooltip(false);
+    }
+  }, [label]);
+
   return _react.default.createElement(_Grid.default.Container, {
     paddingY: 1
   }, _react.default.createElement(_Grid.default.Row, {
     alignment: "middle",
-    minWidth: minWidth,
+    minWidth: "300px",
+    width: width,
     paddingBottom: 1
-  }, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, null, label)), _react.default.createElement(_Flex.default, {
+  }, _react.default.createElement(_Grid.default.Column, {
+    maxWidth: "calc(100% - 112px)"
+  }, _react.default.createElement(LabelWrapper, {
+    ref: labelRef
+  }, label), showTooltip && _react.default.createElement(_Tooltip.default, {
+    target: labelRef
+  }, label)), _react.default.createElement(_Flex.default, {
     paddingRight: 1
   }, _react.default.createElement(_Button.default, {
     "aria-label": "",
@@ -163,7 +202,8 @@ function Calendar(props) {
     ref: firstTabbableElementRef,
     text: translate(undefined, 'calendar.today'),
     size: "small",
-    variant: "ghost"
+    variant: "ghost",
+    disabled: isCurrentMonth && isCurrentYear
   })), _react.default.createElement(_Flex.default, {
     paddingRight: 1
   }, _react.default.createElement(_Button.default, {
@@ -184,7 +224,7 @@ function Calendar(props) {
   }, _react.default.createElement(_DateGrid.default, null, _react.default.createElement("table", null, _react.default.createElement("thead", null, _react.default.createElement("tr", null, (0, _range.default)(0, 7).map(function (dayOfWeekIndex) {
     return _react.default.createElement("th", {
       key: "".concat(label, "-day-of-week-header-idx-").concat(dayOfWeekIndex)
-    }, _react.default.createElement(_Typography.P, {
+    }, _react.default.createElement(LabelWrapper, {
       as: "span",
       size: "small",
       shade: 1
@@ -215,7 +255,7 @@ function Calendar(props) {
           disabled: isDisabled,
           "aria-disabled": isDisabled,
           type: "button"
-        }, _react.default.createElement(_Typography.P, {
+        }, _react.default.createElement(LabelWrapper, {
           as: "span",
           color: "inherit"
         }, day.date))));