@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.210

package/lib/components/SelectDate/index.js

@@ -25,6 +25,8 @@ var _isDate = _interopRequireDefault(require("lodash/isDate"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
@@ -41,6 +43,8 @@ var _useTranslations = _interopRequireDefault(require("../../utils/useTranslatio
 
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
 var _Calendar = _interopRequireWildcard(require("../../atoms/Calendar"));
 
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
@@ -63,6 +67,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -83,6 +93,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function SelectDate(props, ref) {
   var clearButtonLabel = props.clearButtonLabel,
+      containerSelector = props.containerSelector,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -90,6 +101,8 @@ function SelectDate(props, ref) {
       onChange = props.onChange,
       onClick = props.onClick,
       onKeyDown = props.onKeyDown,
+      onShow = props.onShow,
+      onHide = props.onHide,
       propValue = props.value,
       disabledDateRules = props.disabledDateRules,
       zIndex = props.zIndex;
@@ -212,8 +225,23 @@ function SelectDate(props, ref) {
       setIsPopoverVisible(false);
     }
   }, [isPopoverVisible]);
-  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
+  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover, {
+    capture: true
+  });
   var inputContainerRefs = (0, _compact.default)([inputContainerRef, popoverTargetRef]);
+  /**
+   * Triggers onShow/onHide callbacks representing wether the Popover is open or not.
+   */
+
+  (0, _useUpdateEffect.default)(function () {
+    if (isPopoverVisible) {
+      onShow && onShow();
+    }
+
+    if (!isPopoverVisible) {
+      onHide && onHide();
+    }
+  }, [isPopoverVisible, onShow, onHide]);
   return _react.default.createElement(_InputField.default, _extends({}, (0, _omit.default)(props, ['onChange']), {
     "aria-live": "assertive",
     cursor: "default",
@@ -255,12 +283,13 @@ function SelectDate(props, ref) {
       showArrow: false,
       target: popoverTargetRef,
       visible: isPopoverVisible,
-      zIndex: zIndex
+      zIndex: zIndex,
+      containerSelector: containerSelector
     }, _react.default.createElement(_Grid.default.Container, {
       ref: popoverContentRef
     }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Calendar.default, {
       focusOnRender: focusCalendarOnRender.current,
-      minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+      width: "".concat((dimensions.width || 0) + 1, "px"),
       onChange: handleChangeValue,
       selected: selectedDate || undefined,
       disabledDateRules: disabledDateRules
@@ -281,7 +310,9 @@ function SelectDate(props, ref) {
 }
 
 var SelectDateWithRef = (0, _react.forwardRef)(SelectDate);
-SelectDateWithRef.propTypes = _schema.default.propTypes;
+SelectDateWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  icon: _propTypes.default.elementType
+});
 SelectDateWithRef.displayName = 'SelectDate';
 var _default = SelectDateWithRef;
 exports.default = _default;

package/lib/components/SelectDate/index.test.js

@@ -82,16 +82,36 @@ describe('SelectDate', function () {
 
     expect(queryByText(defaultProps.label)).toBeInTheDocument();
   });
+  describe('when label is hidden', function () {
+    it('does not display the label element', function () {
+      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        hideLabel: true
+      }))),
+          getByText = _render2.getByText;
+
+      expect(getByText(defaultProps.label, {
+        selector: 'span'
+      })).not.toBeVisible();
+    });
+    it('does display the input related to the label', function () {
+      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        hideLabel: true
+      }))),
+          getByLabelText = _render3.getByLabelText;
+
+      expect(getByLabelText(defaultProps.label)).toBeVisible();
+    });
+  });
   it('renders the calendar icon', function () {
     var _rtlRender = (0, _react2.render)(_react.default.createElement(_Calendar.default, null)),
         iconContainer = _rtlRender.container;
 
     var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
 
-    var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+    var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
       icon: _Calendar.default
     }))),
-        container = _render2.container; // There will be other icons rendered as well, like the expanded indicator.
+        container = _render4.container; // There will be other icons rendered as well, like the expanded indicator.
     // The Calendar icon should be first in the render tree.
 
 
@@ -104,8 +124,8 @@ describe('SelectDate', function () {
 
     var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
 
-    var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-        container = _render3.container; // With no value rendered and no icon prop provided, the expanded indicator
+    var _render5 = render(_react.default.createElement(_.default, defaultProps)),
+        container = _render5.container; // With no value rendered and no icon prop provided, the expanded indicator
     // will be first in the render tree.
 
 
@@ -119,10 +139,10 @@ describe('SelectDate', function () {
 
       var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
 
-      var _render4 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render4.baseElement,
-          container = _render4.container,
-          queryByText = _render4.queryByText;
+      var _render6 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render6.baseElement,
+          container = _render6.container,
+          queryByText = _render6.queryByText;
 
       expect((0, _react2.queryByText)(baseElement, /today/i)).not.toBeInTheDocument();
       var label = queryByText(defaultProps.label);
@@ -133,12 +153,49 @@ describe('SelectDate', function () {
       expect(expandedIconPathD).toEqual(iconPathD);
       expect((0, _react2.queryByText)(baseElement, /today/i)).toBeInTheDocument();
     });
+    it('triggers onShow callback', function () {
+      var onShow = jest.fn();
+
+      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onShow: onShow
+      }))),
+          queryByText = _render7.queryByText;
+
+      expect(onShow).not.toHaveBeenCalled();
+      var label = queryByText(defaultProps.label);
+
+      _react2.fireEvent.click(label);
+
+      expect(onShow).toHaveBeenCalled();
+    });
+    it('triggers onHide callback', function () {
+      var onHide = jest.fn();
+
+      var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onHide: onHide
+      }))),
+          queryByText = _render8.queryByText;
+
+      expect(onHide).not.toHaveBeenCalled();
+      var label = queryByText(defaultProps.label);
+
+      _react2.fireEvent.click(label);
+
+      _react2.fireEvent.keyDown(label, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27
+      });
+
+      expect(onHide).toHaveBeenCalled();
+    });
   });
   describe('when clicking the InputField value button', function () {
     it('opens a popover with the calendar', function () {
-      var _render5 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render5.baseElement,
-          queryByLabelText = _render5.queryByLabelText;
+      var _render9 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render9.baseElement,
+          queryByLabelText = _render9.queryByLabelText;
 
       expect((0, _react2.queryByText)(baseElement, /today/i)).not.toBeInTheDocument();
       var valueButton = queryByLabelText(defaultProps.label);
@@ -150,9 +207,9 @@ describe('SelectDate', function () {
   });
   describe('when the calendar popover is open', function () {
     it('renders the calendar', function () {
-      var _render6 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render6.baseElement,
-          queryByText = _render6.queryByText;
+      var _render10 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render10.baseElement,
+          queryByText = _render10.queryByText;
 
       var today = new Date();
       var lastDateInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
@@ -196,9 +253,9 @@ describe('SelectDate', function () {
       }
     });
     it('renders a clear button inside the popover', function () {
-      var _render7 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render7.baseElement,
-          queryByLabelText = _render7.queryByLabelText;
+      var _render11 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render11.baseElement,
+          queryByLabelText = _render11.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -206,9 +263,9 @@ describe('SelectDate', function () {
     });
     describe('when navigating with the calendar controls', function () {
       it('does NOT close the popover after each click', function () {
-        var _render8 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render8.baseElement,
-            queryByText = _render8.queryByText; // open the calendar popover
+        var _render12 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render12.baseElement,
+            queryByText = _render12.queryByText; // open the calendar popover
 
 
         _react2.fireEvent.click(queryByText(defaultProps.label)); // the "today" button is a part of the calendar controls
@@ -235,11 +292,11 @@ describe('SelectDate', function () {
       it('closes the popover after click', function () {
         var today = new Date();
 
-        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: today
         }))),
-            baseElement = _render9.baseElement,
-            queryByLabelText = _render9.queryByLabelText;
+            baseElement = _render13.baseElement,
+            queryByLabelText = _render13.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -253,12 +310,12 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var today = new Date();
 
-        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: today,
           onChange: onChange
         }))),
-            baseElement = _render10.baseElement,
-            queryByLabelText = _render10.queryByLabelText;
+            baseElement = _render14.baseElement,
+            queryByLabelText = _render14.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -274,9 +331,9 @@ describe('SelectDate', function () {
       it('renders the date in the correct format', function () {
         var today = new Date();
 
-        var _render11 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render11.baseElement,
-            queryByLabelText = _render11.queryByLabelText;
+        var _render15 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render15.baseElement,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -291,9 +348,9 @@ describe('SelectDate', function () {
       it('closes the calendar popover', function () {
         var today = new Date();
 
-        var _render12 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render12.baseElement,
-            queryByLabelText = _render12.queryByLabelText;
+        var _render16 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render16.baseElement,
+            queryByLabelText = _render16.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -309,11 +366,11 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var today = new Date();
 
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange
         }))),
-            baseElement = _render13.baseElement,
-            queryByLabelText = _render13.queryByLabelText;
+            baseElement = _render17.baseElement,
+            queryByLabelText = _render17.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -335,10 +392,10 @@ describe('SelectDate', function () {
       var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
       var value = new Date();
 
-      var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: value
       }))),
-          container = _render14.container;
+          container = _render18.container;
 
       var clearButtonIconPathD = container.querySelectorAll('svg path')[0].getAttribute('d');
       expect(clearButtonIconPathD).toEqual(iconPathD);
@@ -346,10 +403,10 @@ describe('SelectDate', function () {
     it('renders the date in the correct format', function () {
       var value = new Date();
 
-      var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: value
       }))),
-          queryByLabelText = _render15.queryByLabelText;
+          queryByLabelText = _render19.queryByLabelText;
 
       expect(queryByLabelText(defaultProps.label)).toHaveTextContent(formatDate(value));
     });
@@ -357,13 +414,13 @@ describe('SelectDate', function () {
       var onChange = jest.fn();
       var value = new Date();
 
-      var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         value: value
       }))),
-          baseElement = _render16.baseElement,
-          rerender = _render16.rerender,
-          queryByLabelText = _render16.queryByLabelText;
+          baseElement = _render20.baseElement,
+          rerender = _render20.rerender,
+          queryByLabelText = _render20.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -387,12 +444,12 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var value = new Date();
 
-        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: value
         }))),
-            baseElement = _render17.baseElement,
-            queryByLabelText = _render17.queryByLabelText;
+            baseElement = _render21.baseElement,
+            queryByLabelText = _render21.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -407,10 +464,10 @@ describe('SelectDate', function () {
     it('initializes with the default value', function () {
       var value = new Date();
 
-      var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render22 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: value
       }))),
-          queryByLabelText = _render18.queryByLabelText;
+          queryByLabelText = _render22.queryByLabelText;
 
       expect(queryByLabelText(defaultProps.label)).toHaveTextContent(formatDate(value));
     });
@@ -418,12 +475,12 @@ describe('SelectDate', function () {
       var onChange = jest.fn();
       var value = new Date();
 
-      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render23 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         defaultValue: value
       }))),
-          baseElement = _render19.baseElement,
-          queryByLabelText = _render19.queryByLabelText;
+          baseElement = _render23.baseElement,
+          queryByLabelText = _render23.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 

package/lib/components/SelectDate/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA8BnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAyCnD,eAAe,MAAM,CAAC"}

package/lib/components/SelectDate/schema.js

@@ -24,8 +24,11 @@ var schema = (0, _reactDesc.describe)({
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount']), {
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
+  containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the SelectDate should be rendered in, or \"parent\" to render the SelectDate in-place.").defaultValue('body'),
   defaultValue: _reactDesc.PropTypes.instanceOf(Date).description('The date should be selected by default.'),
   onChange: _reactDesc.PropTypes.func.description('Called with either the selected date or `undefined`'),
+  onHide: _reactDesc.PropTypes.func.description('A callback which is triggered when the popover is closed'),
+  onShow: _reactDesc.PropTypes.func.description('A callback which is triggered when the popover is opened'),
   value: _reactDesc.PropTypes.instanceOf(Date).description('The Date that is selected. If provided, controlling the SelectDate must be handled externally. Overrides `defaultValue`.'),
   disabledDateRules: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.array).description('An array of rules to disable dates. Every rule is an array itself containing the type of rule as first element followed by needed params to apply the rule'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list')

package/lib/components/SelectDate/types.d.ts

@@ -17,10 +17,13 @@ export interface BaseSelectDateProps extends Omit<ButtonHTMLAttributes<TSelectDa
     onClick?: MouseEventHandler;
     onFocus?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
+    onShow?: () => void;
+    onHide?: () => void;
     disabledDateRules?: TDisabledDateRule[];
     zIndex?: PopoverProps['zIndex'];
     name: string;
     clearButtonLabel?: string;
+    containerSelector?: string;
 }
 export declare type TSelectDateProps = BaseSelectDateProps & {
     defaultValue?: Date;

package/lib/components/SelectDate/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,cAAc,GAAG,iBAAiB,CAAC;AAE/C,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,cAAc,CAAC,EAC1C,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,EACD,IAAI,CACF,mBAAmB,EACjB,UAAU,GACV,cAAc,GACd,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,OAAO,CACV;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,oBAAY,gBAAgB,GAAG,mBAAmB,GAAG;IACnD,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,cAAc,GAAG,iBAAiB,CAAC;AAE/C,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,cAAc,CAAC,EAC1C,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,EACD,IAAI,CACF,mBAAmB,EACjB,UAAU,GACV,cAAc,GACd,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,OAAO,CACV;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,oBAAY,gBAAgB,GAAG,mBAAmB,GAAG;IACnD,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC"}

package/lib/components/SelectDate/types.js

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

package/lib/components/SelectDateRange/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAwBf,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAQ,MAAM,SAAS,CAAC;AAI3E,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AA4SxC,QAAA,MAAM,sBAAsB,EAAE,sBAAsB,CAClD,mBAAmB,EACnB,qBAAqB,CACQ,CAAC;AAKhC,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/index.tsx"],"names":[],"mappings":"AAKA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAyBf,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAQ,MAAM,SAAS,CAAC;AAI3E,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AA8TxC,QAAA,MAAM,sBAAsB,EAAE,sBAAsB,CAClD,mBAAmB,EACnB,qBAAqB,CACQ,CAAC;AAQhC,eAAe,sBAAsB,CAAC"}

package/lib/components/SelectDateRange/index.js

@@ -23,6 +23,8 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
@@ -45,6 +47,8 @@ var _useTranslations = _interopRequireDefault(require("../../utils/useTranslatio
 
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
 var _Calendar = _interopRequireWildcard(require("../../atoms/Calendar"));
 
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
@@ -67,6 +71,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -96,6 +106,7 @@ var ButtonsRow = (0, _styledComponents.default)(_Grid.default.Row).withConfig({
 
 function SelectDateRange(props, ref) {
   var clearButtonLabel = props.clearButtonLabel,
+      containerSelector = props.containerSelector,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -104,6 +115,8 @@ function SelectDateRange(props, ref) {
       onRangeChange = props.onRangeChange,
       onClick = props.onClick,
       onKeyDown = props.onKeyDown,
+      onShow = props.onShow,
+      onHide = props.onHide,
       propValue = props.values,
       propRange = props.range,
       disabledDateRules = props.disabledDateRules,
@@ -245,8 +258,23 @@ function SelectDateRange(props, ref) {
     event.stopPropagation();
     closePopover();
   }, [closePopover]);
-  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
+  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover, {
+    capture: true
+  });
   var inputContainerRefs = (0, _compact.default)([inputContainerRef, popoverTargetRef]);
+  /**
+   * Triggers onShow/onHide callbacks representing wether the Popover is open or not.
+   */
+
+  (0, _useUpdateEffect.default)(function () {
+    if (isPopoverVisible) {
+      onShow && onShow();
+    }
+
+    if (!isPopoverVisible) {
+      onHide && onHide();
+    }
+  }, [isPopoverVisible, onShow, onHide]);
   return _react.default.createElement(_InputField.default, _extends({}, (0, _omit.default)(props, ['onChange']), {
     "aria-live": "assertive",
     cursor: "default",
@@ -282,6 +310,7 @@ function SelectDateRange(props, ref) {
       readOnly: readOnly,
       ref: targetRef
     }, value), _react.default.createElement(_Popover.default, {
+      containerSelector: containerSelector,
       borderRadius: "0 0 2px 2px",
       manageEvents: false,
       placement: "bottom",
@@ -293,7 +322,7 @@ function SelectDateRange(props, ref) {
       ref: popoverContentRef
     }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Calendar.default, {
       focusOnRender: focusCalendarOnRender.current,
-      minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+      width: "".concat((dimensions.width || 0) + 1, "px"),
       onChange: handleChangeValue,
       selected: selectedRange || undefined,
       disabledDateRules: disabledDateRules,
@@ -327,7 +356,9 @@ function SelectDateRange(props, ref) {
 }
 
 var SelectDateRangeWithRef = (0, _react.forwardRef)(SelectDateRange);
-SelectDateRangeWithRef.propTypes = _schema.default.propTypes;
+SelectDateRangeWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  icon: _propTypes.default.elementType
+});
 SelectDateRangeWithRef.displayName = 'SelectDateRange';
 var _default = SelectDateRangeWithRef;
 exports.default = _default;