@decisiv/ui-components 2.0.1-alpha.8 → 2.0.1-alpha.97

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/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;AAaf,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AAsGxB,QAAA,MAAM,mBAAmB,EAAE,sBAAsB,CAC/C,YAAY,EACZ,KAAK,CACqB,CAAC;AAE7B,eAAe,mBAAmB,CAAC"}

package/lib/atoms/BooleanInput/index.js

@@ -12,6 +12,12 @@ var _Check = _interopRequireDefault(require("@decisiv/iconix/lib/components/Chec
 
 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,6 +56,8 @@ 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,
@@ -57,7 +65,7 @@ var BooleanInput = function BooleanInput(props, ref) {
       inputRef = props.inputRef,
       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", "type", "warningMessage"]);
 
   var type = !validTypes.includes(providedType) ? 'checkbox' : providedType;
   var uuid = (0, _useUniqueId.default)(id, 'input-');
@@ -67,6 +75,8 @@ var BooleanInput = function BooleanInput(props, ref) {
   var Mark = (0, _react.useMemo)(function () {
     return marks[type];
   }, [type]);
+  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,
@@ -78,6 +88,7 @@ var BooleanInput = function BooleanInput(props, ref) {
     warningMessage: warningMessage
   }, _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 +104,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,6 +8,8 @@ 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';

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,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"}

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":";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,CAkKpD;AAED,eAAe,QAAQ,CAAC"}

package/lib/atoms/Calendar/index.js

@@ -141,6 +141,12 @@ function Calendar(props) {
 
   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;
+
   _react.default.useEffect(function () {
     if (focusOnRender && firstRender) {
       firstRender.current = false; // @ts-ignore
@@ -163,7 +169,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, {

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

@@ -72,27 +72,57 @@ describe('Calendar', function () {
     })),
         queryByText = _render2.queryByText;
 
-    expect(queryByText('Today')).toBeInTheDocument();
+    expect(queryByText('Go to Today')).toBeInTheDocument();
 
-    _react2.fireEvent.click(queryByText('Today'));
+    _react2.fireEvent.click(queryByText('Go to Today'));
 
     var today = new Date();
     expect(queryByText("".concat(months[today.getMonth()], " ").concat(today.getFullYear()))).toBeInTheDocument();
   });
+  it('renders the "go to today" button as disabled if its in the current month', function () {
+    var _render3 = render(_react.default.createElement(_.default, null)),
+        queryByText = _render3.queryByText;
+
+    expect(queryByText('Go to Today').closest('button')).toHaveAttribute('disabled');
+  });
+  it('renders the "go to today" button as enabled if its not in the current month', function () {
+    var _render4 = render(_react.default.createElement(_.default, {
+      viewMonth: {
+        year: 2020,
+        month: 1
+      }
+    })),
+        queryByText = _render4.queryByText;
+
+    expect(queryByText('Go to Today').closest('button')).not.toHaveAttribute('disabled');
+  });
+  it('renders the "go to today" button as enabled if its in the current month of a different year', function () {
+    var today = new Date();
+
+    var _render5 = render(_react.default.createElement(_.default, {
+      viewMonth: {
+        year: today.getFullYear() - 1,
+        month: today.getMonth()
+      }
+    })),
+        queryByText = _render5.queryByText;
+
+    expect(queryByText('Go to Today').closest('button')).not.toHaveAttribute('disabled');
+  });
   it('renders a button to view the previous month', function () {
     var _rtlRender = (0, _react2.render)(_react.default.createElement(_ArrowLeft.default, null)),
         svgContainer = _rtlRender.container;
 
     var arrowLeftPathD = svgContainer.querySelector('svg path').getAttribute('d');
 
-    var _render3 = render(_react.default.createElement(_.default, {
+    var _render6 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByLabelText = _render3.queryByLabelText,
-        queryByText = _render3.queryByText;
+        queryByLabelText = _render6.queryByLabelText,
+        queryByText = _render6.queryByText;
 
     var viewPrevMonthButton = queryByLabelText(/view previous month/i);
     expect(viewPrevMonthButton).toBeInTheDocument();
@@ -108,14 +138,14 @@ describe('Calendar', function () {
 
     var arrowRightPathD = svgContainer.querySelector('svg path').getAttribute('d');
 
-    var _render4 = render(_react.default.createElement(_.default, {
+    var _render7 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByLabelText = _render4.queryByLabelText,
-        queryByText = _render4.queryByText;
+        queryByLabelText = _render7.queryByLabelText,
+        queryByText = _render7.queryByText;
 
     var viewNextMonthButton = queryByLabelText(/view next month/i);
     expect(viewNextMonthButton).toBeInTheDocument();
@@ -126,13 +156,13 @@ describe('Calendar', function () {
     expect(queryByText('February 2020')).toBeInTheDocument();
   });
   it('renders a header for each day of the week', function () {
-    var _render5 = render(_react.default.createElement(_.default, {
+    var _render8 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByText = _render5.queryByText;
+        queryByText = _render8.queryByText;
 
     var _iteratorNormalCompletion = true;
     var _didIteratorError = false;
@@ -159,13 +189,13 @@ describe('Calendar', function () {
     }
   });
   it('renders a date button for every day of the month', function () {
-    var _render6 = render(_react.default.createElement(_.default, {
+    var _render9 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 2
       }
     })),
-        queryByText = _render6.queryByText; // 2020 is a leap year.
+        queryByText = _render9.queryByText; // 2020 is a leap year.
 
 
     var datesInFebruary2020 = (0, _range.default)(1, 30);
@@ -204,10 +234,10 @@ describe('Calendar', function () {
       var today = new Date();
       var selected = new Date(today.getFullYear(), today.getMonth() - 1, 1);
 
-      var _render7 = render(_react.default.createElement(_.default, {
+      var _render10 = render(_react.default.createElement(_.default, {
         selected: selected
       })),
-          queryByText = _render7.queryByText;
+          queryByText = _render10.queryByText;
 
       expect(queryByText("".concat(months[selected.getMonth()], " ").concat(selected.getFullYear()))).toBeInTheDocument();
     });
@@ -215,10 +245,10 @@ describe('Calendar', function () {
       var today = new Date();
       var selected = new Date(today.getFullYear() + 1, today.getMonth() + 2, 1);
 
-      var _render8 = render(_react.default.createElement(_.default, {
+      var _render11 = render(_react.default.createElement(_.default, {
         selected: selected
       })),
-          queryByText = _render8.queryByText;
+          queryByText = _render11.queryByText;
 
       _react2.fireEvent.click(queryByText(/today/i));
 
@@ -229,14 +259,14 @@ describe('Calendar', function () {
     it('selects the clicked date', function () {
       var onChange = jest.fn();
 
-      var _render9 = render(_react.default.createElement(_.default, {
+      var _render12 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render9.queryByText;
+          queryByText = _render12.queryByText;
 
       var date = 7;
       var selectedDate = (0, _utils.buildJSDate)({
@@ -257,14 +287,14 @@ describe('Calendar', function () {
     it('clears the selected date if already selected', function () {
       var onChange = jest.fn();
 
-      var _render10 = render(_react.default.createElement(_.default, {
+      var _render13 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render10.queryByText;
+          queryByText = _render13.queryByText;
 
       var date = 7;
       var selectedDate = (0, _utils.buildJSDate)({
@@ -294,7 +324,7 @@ describe('Calendar', function () {
         date: date
       });
 
-      var _render11 = render(_react.default.createElement(_.default, {
+      var _render14 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
@@ -302,7 +332,7 @@ describe('Calendar', function () {
         },
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, selectedDate]]
       })),
-          queryByText = _render11.queryByText;
+          queryByText = _render14.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === String(date);
@@ -318,14 +348,14 @@ describe('Calendar', function () {
     it('initializes the calendar with the default selected value', function () {
       var defaultSelected = new Date(2020, 1, 7);
 
-      var _render12 = render(_react.default.createElement(_.default, {
+      var _render15 = render(_react.default.createElement(_.default, {
         defaultSelected: defaultSelected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render12.queryByText;
+          queryByText = _render15.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -335,15 +365,15 @@ describe('Calendar', function () {
     it('does NOT update selected value when default selected prop changes', function () {
       var defaultSelected = new Date(2020, 1, 7);
 
-      var _render13 = render(_react.default.createElement(_.default, {
+      var _render16 = render(_react.default.createElement(_.default, {
         defaultSelected: defaultSelected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render13.queryByText,
-          rerender = _render13.rerender;
+          queryByText = _render16.queryByText,
+          rerender = _render16.rerender;
 
       var newDefaultSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -367,14 +397,14 @@ describe('Calendar', function () {
     it('initializes the calendar with the selected value', function () {
       var selected = new Date(2020, 1, 7);
 
-      var _render14 = render(_react.default.createElement(_.default, {
+      var _render17 = render(_react.default.createElement(_.default, {
         selected: selected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render14.queryByText;
+          queryByText = _render17.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -384,15 +414,15 @@ describe('Calendar', function () {
     it('updates selected value when selected prop changes', function () {
       var selected = new Date(2020, 1, 7);
 
-      var _render15 = render(_react.default.createElement(_.default, {
+      var _render18 = render(_react.default.createElement(_.default, {
         selected: selected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render15.queryByText,
-          rerender = _render15.rerender;
+          queryByText = _render18.queryByText,
+          rerender = _render18.rerender;
 
       var newSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -415,7 +445,7 @@ describe('Calendar', function () {
       var onChange = jest.fn();
       var selected = new Date(2020, 1, 7);
 
-      var _render16 = render(_react.default.createElement(_.default, {
+      var _render19 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         selected: selected,
         viewMonth: {
@@ -423,7 +453,7 @@ describe('Calendar', function () {
           month: 2
         }
       })),
-          rerender = _render16.rerender;
+          rerender = _render19.rerender;
 
       var newSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -440,7 +470,7 @@ describe('Calendar', function () {
       var onChange = jest.fn();
       var selected = new Date(2020, 1, 7);
 
-      var _render17 = render(_react.default.createElement(_.default, {
+      var _render20 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         selected: selected,
         viewMonth: {
@@ -448,7 +478,7 @@ describe('Calendar', function () {
           month: 2
         }
       })),
-          queryByText = _render17.queryByText;
+          queryByText = _render20.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -468,7 +498,7 @@ describe('Calendar', function () {
   describe('date range', function () {
     it('highlights the active date range', function () {
       // disabled date is added to ensure range styles overrides disabled styles
-      var _render18 = render(_react.default.createElement(_.default, {
+      var _render21 = render(_react.default.createElement(_.default, {
         variant: "range",
         viewMonth: {
           year: 2020,
@@ -477,7 +507,7 @@ describe('Calendar', function () {
         selected: [new Date(2020, 1, 15)],
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, new Date(2020, 1, 16)]]
       })),
-          queryByText = _render18.queryByText;
+          queryByText = _render21.queryByText;
 
       _react2.fireEvent.mouseOver(queryByText('20')); // TODO test for start and end date styles, currently linear gradient is not supported
       // https://github.com/testing-library/jest-dom/issues/170
@@ -517,7 +547,7 @@ describe('Calendar', function () {
     });
     it('highlights the selected date range', function () {
       // disabled date is added to ensure range styles overrides disabled styles
-      var _render19 = render(_react.default.createElement(_.default, {
+      var _render22 = render(_react.default.createElement(_.default, {
         variant: "range",
         viewMonth: {
           year: 2020,
@@ -526,7 +556,7 @@ describe('Calendar', function () {
         selected: [new Date(2020, 1, 15), new Date(2020, 1, 20)],
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, new Date(2020, 1, 16)]]
       })),
-          queryByText = _render19.queryByText; // TODO test for start and end date styles, currently linear gradient is not supported
+          queryByText = _render22.queryByText; // TODO test for start and end date styles, currently linear gradient is not supported
       // https://github.com/testing-library/jest-dom/issues/170
 
 

package/lib/atoms/Calendar/types.js

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

package/lib/atoms/InputField/Containers.d.ts

@@ -40,7 +40,7 @@ export declare const InputFieldContainer: import("styled-components").StyledComp
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -205,6 +205,9 @@ interface InputContainerProps extends FlexComponentProps {
     hasWarning?: boolean;
     isFocused?: boolean;
     readOnly?: boolean;
+    hiddenLabel: boolean;
+    isTextArea: boolean;
+    multiple: boolean;
 }
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -242,7 +245,7 @@ export declare const InputContainer: import("styled-components").StyledComponent
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -435,7 +438,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -594,6 +597,8 @@ export declare const IconContainer: import("styled-components").StyledComponent<
 }> & {
     alignItems: string;
     justifyContent: string;
+} & {
+    hiddenLabel: boolean;
 }, "alignItems" | "justifyContent">;
 export declare const InputInnerContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -631,7 +636,7 @@ export declare const InputInnerContainer: import("styled-components").StyledComp
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -790,9 +795,9 @@ export declare const InputInnerContainer: import("styled-components").StyledComp
 }> & {
     flex: number;
     flexWrap: string;
-    paddingLeft: number;
 } & {
     hasIcon?: boolean | undefined;
-}, "flexWrap" | "paddingLeft" | "flex">;
+    hiddenLabel: boolean;
+}, "flexWrap" | "flex">;
 export {};
 //# sourceMappingURL=Containers.d.ts.map