@decisiv/ui-components 2.0.1-alpha.75 → 2.0.1-alpha.84

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

@@ -95,16 +95,36 @@ describe('SelectDateRange', 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.
 
 
@@ -117,8 +137,8 @@ describe('SelectDateRange', 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.
 
 
@@ -132,10 +152,10 @@ describe('SelectDateRange', function () {
 
       var iconPathD = iconContainer.querySelector('svg path').getAttribute('d');
 
-      var _render4 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render4.baseElement,
-          container = _render4.container,
-          getByText = _render4.getByText;
+      var _render6 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render6.baseElement,
+          container = _render6.container,
+          getByText = _render6.getByText;
 
       expect((0, _react2.queryByText)(baseElement, /today/i)).not.toBeInTheDocument();
       var label = getByText(defaultProps.label);
@@ -146,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 _render5 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render5.baseElement,
-          getByLabelText = _render5.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);
@@ -163,9 +220,9 @@ describe('SelectDateRange', 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,
-          getByText = _render6.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);
@@ -209,9 +266,9 @@ describe('SelectDateRange', function () {
       }
     });
     it('renders apply, cancel and clear buttons inside the popover', function () {
-      var _render7 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render7.baseElement,
-          getByLabelText = _render7.getByLabelText;
+      var _render11 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render11.baseElement,
+          getByLabelText = _render11.getByLabelText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -220,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 _render8 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render8.baseElement,
-          getByLabelText = _render8.getByLabelText,
-          getByText = _render8.getByText;
+      var _render12 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render12.baseElement,
+          getByLabelText = _render12.getByLabelText,
+          getByText = _render12.getByText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -244,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 _render9 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render9.baseElement,
-            getByText = _render9.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
@@ -271,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 _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: []
         }))),
-            baseElement = _render10.baseElement,
-            getByLabelText = _render10.getByLabelText;
+            baseElement = _render14.baseElement,
+            getByLabelText = _render14.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -288,13 +345,13 @@ describe('SelectDateRange', function () {
       it('calls the onChange prop with `undefined`', function () {
         var onChange = jest.fn();
 
-        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: [],
           onChange: onChange
         }))),
-            baseElement = _render11.baseElement,
-            getByLabelText = _render11.getByLabelText,
-            queryByLabelText = _render11.queryByLabelText;
+            baseElement = _render15.baseElement,
+            getByLabelText = _render15.getByLabelText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -315,10 +372,10 @@ describe('SelectDateRange', function () {
             _createDateRange2 = _slicedToArray(_createDateRange, 2),
             endDate = _createDateRange2[1];
 
-        var _render12 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render12.baseElement,
-            getByLabelText = _render12.getByLabelText,
-            queryByLabelText = _render12.queryByLabelText;
+        var _render16 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render16.baseElement,
+            getByLabelText = _render16.getByLabelText,
+            queryByLabelText = _render16.queryByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -335,9 +392,9 @@ describe('SelectDateRange', function () {
       it('does not close the calendar popover', function () {
         var today = new Date();
 
-        var _render13 = render(_react.default.createElement(_.default, defaultProps)),
-            baseElement = _render13.baseElement,
-            getByLabelText = _render13.getByLabelText;
+        var _render17 = render(_react.default.createElement(_.default, defaultProps)),
+            baseElement = _render17.baseElement,
+            getByLabelText = _render17.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -358,11 +415,11 @@ describe('SelectDateRange', function () {
             _createDateRange4 = _slicedToArray(_createDateRange3, 2),
             endDate = _createDateRange4[1];
 
-        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onRangeChange: onRangeChange
         }))),
-            baseElement = _render14.baseElement,
-            getByLabelText = _render14.getByLabelText;
+            baseElement = _render18.baseElement,
+            getByLabelText = _render18.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -391,10 +448,10 @@ describe('SelectDateRange', function () {
       var endDate = new Date();
       endDate.setDate(startDate.getDate() + 2);
 
-      var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         values: [startDate, endDate]
       }))),
-          container = _render15.container;
+          container = _render19.container;
 
       var clearButtonIconPathD = container.querySelectorAll('svg path')[0].getAttribute('d');
       expect(clearButtonIconPathD).toEqual(iconPathD);
@@ -402,10 +459,10 @@ describe('SelectDateRange', function () {
     it('renders the date in the correct format', function () {
       var value = createDateRange(new Date(), -2);
 
-      var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         values: value
       }))),
-          getByLabelText = _render16.getByLabelText;
+          getByLabelText = _render20.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toHaveTextContent(formatDateRange(value));
     });
@@ -413,14 +470,14 @@ describe('SelectDateRange', function () {
       var onChange = jest.fn();
       var value = createDateRange(new Date(2020, 1, 15), 2);
 
-      var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render21 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         values: value
       }))),
-          baseElement = _render17.baseElement,
-          rerender = _render17.rerender,
-          getByLabelText = _render17.getByLabelText,
-          queryByText = _render17.queryByText;
+          baseElement = _render21.baseElement,
+          rerender = _render21.rerender,
+          getByLabelText = _render21.getByLabelText,
+          queryByText = _render21.queryByText;
 
       _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -455,12 +512,12 @@ describe('SelectDateRange', function () {
         var onChange = jest.fn();
         var value = createDateRange(new Date(2020, 1, 15), 2);
 
-        var _render18 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render22 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           values: value
         }))),
-            baseElement = _render18.baseElement,
-            getByLabelText = _render18.getByLabelText;
+            baseElement = _render22.baseElement,
+            getByLabelText = _render22.getByLabelText;
 
         _react2.fireEvent.click(getByLabelText(defaultProps.label));
 
@@ -475,10 +532,10 @@ describe('SelectDateRange', function () {
     it('initializes with the default value', function () {
       var value = createDateRange(new Date(2020, 1, 15));
 
-      var _render19 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render23 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: value
       }))),
-          getByLabelText = _render19.getByLabelText;
+          getByLabelText = _render23.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toHaveTextContent(formatDateRange(value));
     });
@@ -486,12 +543,12 @@ describe('SelectDateRange', function () {
       var onRangeChange = jest.fn();
       var value = createDateRange(new Date(2020, 1, 15));
 
-      var _render20 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render24 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onRangeChange: onRangeChange,
         defaultValue: value
       }))),
-          baseElement = _render20.baseElement,
-          getByLabelText = _render20.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/components/TextArea/index.js

@@ -21,6 +21,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function TextField(props, ref) {
   return _react.default.createElement(_InputField.default, _extends({}, props, {
+    isTextArea: true,
     overflow: "auto",
     ref: ref
   }), function (p) {

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

@@ -100,6 +100,11 @@ describe('TextArea', function () {
     props: _objectSpread({}, defaultProps, {
       disabled: true
     })
+  }, {
+    test: 'when label hidden',
+    props: _objectSpread({}, defaultProps, {
+      hideLabel: true
+    })
   }, {
     test: 'when readOnly',
     props: _objectSpread({}, defaultProps, {

package/lib/components/TextField/Input.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Input = _styledComponents.default.input.withConfig({
   displayName: "Input",
   componentId: "sc-1vtz9kb-0"
-})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:1px 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:0 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
 
 var _default = Input;
 exports.default = _default;

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

@@ -105,6 +105,11 @@ describe('TextField', function () {
     props: _objectSpread({}, defaultProps, {
       disabled: true
     })
+  }, {
+    test: 'when label hidden',
+    props: _objectSpread({}, defaultProps, {
+      hideLabel: true
+    })
   }, {
     test: 'when readOnly',
     props: _objectSpread({}, defaultProps, {

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.75+1ccf8f9",
+  "version": "2.0.1-alpha.84+fbb603d",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "1ccf8f9b9986693295eba849b85c2134a8381ab5"
+  "gitHead": "fbb603d8e3d978e98d5b8a60ce51a3970bc645ce"
 }