@decisiv/ui-components 2.0.1-alpha.82 → 2.0.1-alpha.83

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA2OjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyPjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/index.js

@@ -27,6 +27,8 @@ var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutsi
 
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
 var _DropdownList = _interopRequireDefault(require("../DropdownList"));
 
 var _Button = require("../Button");
@@ -77,7 +79,9 @@ function Select(props, ref) {
       name = props.name,
       onChange = props.onChange,
       onClick = props.onClick,
+      onHide = props.onHide,
       onKeyDown = props.onKeyDown,
+      onShow = props.onShow,
       options = props.options,
       renderOptionLabel = props.renderOptionLabel,
       propValue = props.value,
@@ -203,6 +207,19 @@ function Select(props, ref) {
   }, [isPopoverVisible]);
   (0, _useClickOutside.default)([listRef], handleClickOutsideList);
   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, onHide, onShow]);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_InputField.default, _extends({}, props, {
     "aria-live": "assertive",
     cursor: "default",

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

@@ -111,16 +111,53 @@ describe('Select', function () {
       expect(getByText(defaultProps.label)).toBeTruthy();
       expect((0, _react2.queryByText)(baseElement, opt0.label)).toBeTruthy();
     });
+    it('triggers onShow callback', function () {
+      var onShow = jest.fn();
+
+      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onShow: onShow
+      }))),
+          queryByText = _render2.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 _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onHide: onHide
+      }))),
+          queryByText = _render3.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('clicking an option', function () {
     it('calls the onchange handler with the new value', function () {
       var onChange = jest.fn();
 
-      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange
       }))),
-          baseElement = _render2.baseElement,
-          getByText = _render2.getByText;
+          baseElement = _render4.baseElement,
+          getByText = _render4.getByText;
 
       _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -129,9 +166,9 @@ describe('Select', function () {
       expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
     });
     it('automatically updates the option label inside the input field', function () {
-      var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render3.baseElement,
-          getByText = _render3.getByText;
+      var _render5 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render5.baseElement,
+          getByText = _render5.getByText;
 
       _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -143,10 +180,10 @@ describe('Select', function () {
   });
   describe('with a default value', function () {
     it('displays the option label matching the defaultValue inside the input field', function () {
-      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: cat0Opt0.id
       }))),
-          getByText = _render4.getByText;
+          getByText = _render6.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -154,12 +191,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render5.baseElement,
-            getByText = _render5.getByText;
+            baseElement = _render7.baseElement,
+            getByText = _render7.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -168,11 +205,11 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('automatically updates the option label inside the input field', function () {
-        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render6.baseElement,
-            getByText = _render6.getByText;
+            baseElement = _render8.baseElement,
+            getByText = _render8.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -185,32 +222,32 @@ describe('Select', function () {
   });
   describe('when label hidden', function () {
     it('does not display the label element', function () {
-      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultvalue: opt1.id,
         hideLabel: true
       }))),
-          getByText = _render7.getByText;
+          getByText = _render9.getByText;
 
       expect(getByText(defaultProps.label, {
         selector: 'span'
       })).not.toBeVisible();
     });
     it('does display the input related to the label', function () {
-      var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: opt1.id,
         hideLabel: true
       }))),
-          getByLabelText = _render8.getByLabelText;
+          getByLabelText = _render10.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toBeVisible();
     });
   });
   describe('when component is controlled', function () {
     it('displays the option label matching the value inside the input field', function () {
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render9.getByText;
+          getByText = _render11.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -218,12 +255,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render10.baseElement,
-            getByText = _render10.getByText;
+            baseElement = _render12.baseElement,
+            getByText = _render12.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -232,12 +269,12 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('does NOT automatically update the option label inside the input field', function () {
-        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render11.baseElement,
-            getByText = _render11.getByText,
-            queryByText = _render11.queryByText;
+            baseElement = _render13.baseElement,
+            getByText = _render13.getByText,
+            queryByText = _render13.queryByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 

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

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

package/lib/components/Select/schema.js

@@ -30,6 +30,8 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
     right: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object)
   })]).description('A collection of objects, each containing a subset of props valid for a Button component. Check the notes on the OptionsList.'),
   onChange: _reactDesc.PropTypes.func.description(''),
+  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'),
   options: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     decoration: _reactDesc.PropTypes.shape({
       type: _reactDesc.PropTypes.oneOf(['Avatar', 'Badge'])

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

@@ -15,6 +15,8 @@ export declare type SelectProps = BaseSelectProps & {
     defaultValue?: string;
     name: string;
     onChange?: (value: string) => void;
+    onHide?: () => void;
+    onShow?: () => void;
     options: Items;
     value?: string;
     zIndex?: PopoverProps['zIndex'];

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,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,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,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,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAqBf,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAQ,MAAM,SAAS,CAAC;AAIjE,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AAmPxC,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,cAAc,EACd,gBAAgB,CACQ,CAAC;AAK3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAsBf,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAQ,MAAM,SAAS,CAAC;AAIjE,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AAiQxC,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,cAAc,EACd,gBAAgB,CACQ,CAAC;AAK3B,eAAe,iBAAiB,CAAC"}

package/lib/components/SelectDate/index.js

@@ -41,6 +41,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"));
@@ -90,6 +92,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;
@@ -214,6 +218,19 @@ function SelectDate(props, ref) {
   }, [isPopoverVisible]);
   (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
   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",

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

@@ -153,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 _render7 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render7.baseElement,
-          queryByLabelText = _render7.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);
@@ -170,9 +207,9 @@ describe('SelectDate', function () {
   });
   describe('when the calendar popover is open', function () {
     it('renders the calendar', function () {
-      var _render8 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render8.baseElement,
-          queryByText = _render8.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);
@@ -216,9 +253,9 @@ describe('SelectDate', function () {
       }
     });
     it('renders a clear button inside the popover', function () {
-      var _render9 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render9.baseElement,
-          queryByLabelText = _render9.queryByLabelText;
+      var _render11 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render11.baseElement,
+          queryByLabelText = _render11.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -226,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 _render10 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render10.baseElement,
-            queryByText = _render10.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
@@ -255,11 +292,11 @@ describe('SelectDate', function () {
       it('closes the popover after click', function () {
         var today = new Date();
 
-        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: today
         }))),
-            baseElement = _render11.baseElement,
-            queryByLabelText = _render11.queryByLabelText;
+            baseElement = _render13.baseElement,
+            queryByLabelText = _render13.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -273,12 +310,12 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var today = new Date();
 
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: today,
           onChange: onChange
         }))),
-            baseElement = _render12.baseElement,
-            queryByLabelText = _render12.queryByLabelText;
+            baseElement = _render14.baseElement,
+            queryByLabelText = _render14.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -294,9 +331,9 @@ describe('SelectDate', function () {
       it('renders the date in the correct format', function () {
         var today = new Date();
 
-        var _render13 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render13.baseElement,
-            queryByLabelText = _render13.queryByLabelText;
+        var _render15 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render15.baseElement,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -311,9 +348,9 @@ describe('SelectDate', function () {
       it('closes the calendar popover', function () {
         var today = new Date();
 
-        var _render14 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render14.baseElement,
-            queryByLabelText = _render14.queryByLabelText;
+        var _render16 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render16.baseElement,
+            queryByLabelText = _render16.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -329,11 +366,11 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var today = new Date();
 
-        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange
         }))),
-            baseElement = _render15.baseElement,
-            queryByLabelText = _render15.queryByLabelText;
+            baseElement = _render17.baseElement,
+            queryByLabelText = _render17.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -355,10 +392,10 @@ describe('SelectDate', function () {
       var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
       var value = new Date();
 
-      var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: value
       }))),
-          container = _render16.container;
+          container = _render18.container;
 
       var clearButtonIconPathD = container.querySelectorAll('svg path')[0].getAttribute('d');
       expect(clearButtonIconPathD).toEqual(iconPathD);
@@ -366,10 +403,10 @@ describe('SelectDate', function () {
     it('renders the date in the correct format', function () {
       var value = new Date();
 
-      var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: value
       }))),
-          queryByLabelText = _render17.queryByLabelText;
+          queryByLabelText = _render19.queryByLabelText;
 
       expect(queryByLabelText(defaultProps.label)).toHaveTextContent(formatDate(value));
     });
@@ -377,13 +414,13 @@ describe('SelectDate', function () {
       var onChange = jest.fn();
       var value = new Date();
 
-      var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         value: value
       }))),
-          baseElement = _render18.baseElement,
-          rerender = _render18.rerender,
-          queryByLabelText = _render18.queryByLabelText;
+          baseElement = _render20.baseElement,
+          rerender = _render20.rerender,
+          queryByLabelText = _render20.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -407,12 +444,12 @@ describe('SelectDate', function () {
         var onChange = jest.fn();
         var value = new Date();
 
-        var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: value
         }))),
-            baseElement = _render19.baseElement,
-            queryByLabelText = _render19.queryByLabelText;
+            baseElement = _render21.baseElement,
+            queryByLabelText = _render21.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText(defaultProps.label));
 
@@ -427,10 +464,10 @@ describe('SelectDate', function () {
     it('initializes with the default value', function () {
       var value = new Date();
 
-      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render22 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: value
       }))),
-          queryByLabelText = _render20.queryByLabelText;
+          queryByLabelText = _render22.queryByLabelText;
 
       expect(queryByLabelText(defaultProps.label)).toHaveTextContent(formatDate(value));
     });
@@ -438,12 +475,12 @@ describe('SelectDate', function () {
       var onChange = jest.fn();
       var value = new Date();
 
-      var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render23 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         defaultValue: value
       }))),
-          baseElement = _render21.baseElement,
-          queryByLabelText = _render21.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;AAoCnD,eAAe,MAAM,CAAC"}

package/lib/components/SelectDate/schema.js

@@ -26,6 +26,8 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
   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'),
   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,6 +17,8 @@ export interface BaseSelectDateProps extends Omit<ButtonHTMLAttributes<TSelectDa
     onClick?: MouseEventHandler;
     onFocus?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
+    onShow?: () => void;
+    onHide?: () => void;
     disabledDateRules?: TDisabledDateRule[];
     zIndex?: PopoverProps['zIndex'];
     name: string;

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

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":"AAGA,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;AA0TxC,QAAA,MAAM,sBAAsB,EAAE,sBAAsB,CAClD,mBAAmB,EACnB,qBAAqB,CACQ,CAAC;AAKhC,eAAe,sBAAsB,CAAC"}

package/lib/components/SelectDateRange/index.js

@@ -45,6 +45,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"));
@@ -104,6 +106,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,
@@ -247,6 +251,19 @@ function SelectDateRange(props, ref) {
   }, [closePopover]);
   (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
   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",

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

@@ -166,12 +166,49 @@ describe('SelectDateRange', 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 _render7 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render7.baseElement,
-          getByLabelText = _render7.getByLabelText;
+      var _render9 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render9.baseElement,
+          getByLabelText = _render9.getByLabelText;
 
       expect((0, _react2.queryByText)(baseElement, /today/i)).not.toBeInTheDocument();
       var valueButton = getByLabelText(defaultProps.label);
@@ -183,9 +220,9 @@ describe('SelectDateRange', function () {
   });
   describe('when the calendar popover is open', function () {
     it('renders the calendar', function () {
-      var _render8 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render8.baseElement,
-          getByText = _render8.getByText;
+      var _render10 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render10.baseElement,
+          getByText = _render10.getByText;
 
       var today = new Date();
       var lastDateInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
@@ -229,9 +266,9 @@ describe('SelectDateRange', function () {
       }
     });
     it('renders apply, cancel and clear buttons inside the popover', function () {
-      var _render9 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render9.baseElement,
-          getByLabelText = _render9.getByLabelText;
+      var _render11 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render11.baseElement,
+          getByLabelText = _render11.getByLabelText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -240,10 +277,10 @@ describe('SelectDateRange', function () {
       expect((0, _react2.queryByText)(baseElement, /clear/i)).toBeInTheDocument();
     });
     it('enables apply button only when selection is complete', function () {
-      var _render10 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render10.baseElement,
-          getByLabelText = _render10.getByLabelText,
-          getByText = _render10.getByText;
+      var _render12 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render12.baseElement,
+          getByLabelText = _render12.getByLabelText,
+          getByText = _render12.getByText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -264,9 +301,9 @@ describe('SelectDateRange', function () {
     });
     describe('when navigating with the calendar controls', function () {
       it('does NOT close the popover after each click', function () {
-        var _render11 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render11.baseElement,
-            getByText = _render11.getByText; // open the calendar popover
+        var _render13 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render13.baseElement,
+            getByText = _render13.getByText; // open the calendar popover
 
 
         _react2.fireEvent.click(getByText(defaultProps.label)); // the "today" button is a part of the calendar controls
@@ -291,11 +328,11 @@ describe('SelectDateRange', function () {
     });
     describe('when clearing the value with the clear button inside the popover', function () {
       it('does not closes the popover after click', function () {
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: []
         }))),
-            baseElement = _render12.baseElement,
-            getByLabelText = _render12.getByLabelText;
+            baseElement = _render14.baseElement,
+            getByLabelText = _render14.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -308,13 +345,13 @@ describe('SelectDateRange', function () {
       it('calls the onChange prop with `undefined`', function () {
         var onChange = jest.fn();
 
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: [],
           onChange: onChange
         }))),
-            baseElement = _render13.baseElement,
-            getByLabelText = _render13.getByLabelText,
-            queryByLabelText = _render13.queryByLabelText;
+            baseElement = _render15.baseElement,
+            getByLabelText = _render15.getByLabelText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -335,10 +372,10 @@ describe('SelectDateRange', function () {
             _createDateRange2 = _slicedToArray(_createDateRange, 2),
             endDate = _createDateRange2[1];
 
-        var _render14 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render14.baseElement,
-            getByLabelText = _render14.getByLabelText,
-            queryByLabelText = _render14.queryByLabelText;
+        var _render16 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render16.baseElement,
+            getByLabelText = _render16.getByLabelText,
+            queryByLabelText = _render16.queryByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -355,9 +392,9 @@ describe('SelectDateRange', function () {
       it('does not close the calendar popover', function () {
         var today = new Date();
 
-        var _render15 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render15.baseElement,
-            getByLabelText = _render15.getByLabelText;
+        var _render17 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render17.baseElement,
+            getByLabelText = _render17.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -378,11 +415,11 @@ describe('SelectDateRange', function () {
             _createDateRange4 = _slicedToArray(_createDateRange3, 2),
             endDate = _createDateRange4[1];
 
-        var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onRangeChange: onRangeChange
         }))),
-            baseElement = _render16.baseElement,
-            getByLabelText = _render16.getByLabelText;
+            baseElement = _render18.baseElement,
+            getByLabelText = _render18.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -411,10 +448,10 @@ describe('SelectDateRange', function () {
       var endDate = new Date();
       endDate.setDate(startDate.getDate() + 2);
 
-      var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         values: [startDate, endDate]
       }))),
-          container = _render17.container;
+          container = _render19.container;
 
       var clearButtonIconPathD = container.querySelectorAll('svg path')[0].getAttribute('d');
       expect(clearButtonIconPathD).toEqual(iconPathD);
@@ -422,10 +459,10 @@ describe('SelectDateRange', function () {
     it('renders the date in the correct format', function () {
       var value = createDateRange(new Date(), -2);
 
-      var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         values: value
       }))),
-          getByLabelText = _render18.getByLabelText;
+          getByLabelText = _render20.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toHaveTextContent(formatDateRange(value));
     });
@@ -433,14 +470,14 @@ describe('SelectDateRange', function () {
       var onChange = jest.fn();
       var value = createDateRange(new Date(2020, 1, 15), 2);
 
-      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         values: value
       }))),
-          baseElement = _render19.baseElement,
-          rerender = _render19.rerender,
-          getByLabelText = _render19.getByLabelText,
-          queryByText = _render19.queryByText;
+          baseElement = _render21.baseElement,
+          rerender = _render21.rerender,
+          getByLabelText = _render21.getByLabelText,
+          queryByText = _render21.queryByText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -475,12 +512,12 @@ describe('SelectDateRange', function () {
         var onChange = jest.fn();
         var value = createDateRange(new Date(2020, 1, 15), 2);
 
-        var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render22 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           values: value
         }))),
-            baseElement = _render20.baseElement,
-            getByLabelText = _render20.getByLabelText;
+            baseElement = _render22.baseElement,
+            getByLabelText = _render22.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -495,10 +532,10 @@ describe('SelectDateRange', function () {
     it('initializes with the default value', function () {
       var value = createDateRange(new Date(2020, 1, 15));
 
-      var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render23 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: value
       }))),
-          getByLabelText = _render21.getByLabelText;
+          getByLabelText = _render23.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toHaveTextContent(formatDateRange(value));
     });
@@ -506,12 +543,12 @@ describe('SelectDateRange', function () {
       var onRangeChange = jest.fn();
       var value = createDateRange(new Date(2020, 1, 15));
 
-      var _render22 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render24 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onRangeChange: onRangeChange,
         defaultValue: value
       }))),
-          baseElement = _render22.baseElement,
-          getByLabelText = _render22.getByLabelText;
+          baseElement = _render24.baseElement,
+          getByLabelText = _render24.getByLabelText;
 
       var _value2 = _slicedToArray(value, 2),
           endDate = _value2[1];

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

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

package/lib/components/SelectDateRange/schema.js

@@ -26,6 +26,8 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
   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'),
   defaultValues: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.instanceOf(Date)).description('An array of two `Date` values indicating the start and the end of the range that should be selected by default.'),
   onChange: _reactDesc.PropTypes.func.description('Called with an array of two `Date` values indicating the start and the end of the selected range when the `apply` button is clicked or with `undefined` when the value is cleared'),
+  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'),
   values: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.instanceOf(Date)).description('An array of two `Date` values indicating the start and the end of the range. If provided, controlling the SelectDateRange must be handled externally. Overrides `defaultValues`.'),
   onRangeChange: _reactDesc.PropTypes.func.description("Called when dates are being selected and the calendar is open. It's called with an array that contains one or two values depending of selected dates or undefined when it is cleared. Used along with `range` when controlling the selection of dates"),
   range: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.instanceOf(Date)).description('An array of two `Date` values indicating the start and the end of the range being selected when the calendar is open. Used when controlling the selection of dates'),

package/lib/utils/useFirstMount.d.ts

@@ -0,0 +1,2 @@
+export default function useFirstMountState(): boolean;
+//# sourceMappingURL=useFirstMount.d.ts.map

package/lib/utils/useFirstMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFirstMount.d.ts","sourceRoot":"","sources":["../../src/utils/useFirstMount.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,OAAO,CAUpD"}

package/lib/utils/useFirstMount.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFirstMountState;
+
+var _react = require("react");
+
+function useFirstMountState() {
+  var isFirst = (0, _react.useRef)(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+
+  return isFirst.current;
+}

package/lib/utils/useUpdateEffect.d.ts

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+declare const useUpdateEffect: typeof useEffect;
+export default useUpdateEffect;
+//# sourceMappingURL=useUpdateEffect.d.ts.map

package/lib/utils/useUpdateEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useUpdateEffect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAGlE,QAAA,MAAM,eAAe,EAAE,OAAO,SAY7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/utils/useUpdateEffect.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _useFirstMount = _interopRequireDefault(require("./useFirstMount"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+var useUpdateEffect = function useUpdateEffect(effect) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isFirstMount = (0, _useFirstMount.default)();
+  (0, _react.useEffect)(function () {
+    if (!isFirstMount) {
+      return effect();
+    }
+
+    return undefined;
+  }, deps);
+};
+
+var _default = useUpdateEffect;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.82+d0fecf5",
+  "version": "2.0.1-alpha.83+dc80e63",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "d0fecf5032f3f632a8263f83bd3bb345fc9e93b2"
+  "gitHead": "dc80e6330cf0aed87fa6eceec8383e4ea8cf962d"
 }