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

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

@@ -86,14 +86,38 @@ describe('Combobox', function () {
       expect(queryByLabelText('test')).toHaveFocus();
     });
   });
+  describe('when the label is hidden', function () {
+    it('does not display the label element', function () {
+      var _render2 = render(_react.default.createElement(_.default, {
+        label: "test",
+        options: defaultOptions,
+        hideLabel: true
+      })),
+          getByText = _render2.getByText;
+
+      expect(getByText('test', {
+        selector: 'span'
+      })).not.toBeVisible();
+    });
+    it('does display the input related to the label', function () {
+      var _render3 = render(_react.default.createElement(_.default, {
+        label: "test",
+        options: defaultOptions,
+        hideLabel: true
+      })),
+          getByLabelText = _render3.getByLabelText;
+
+      expect(getByLabelText('test')).toBeVisible();
+    });
+  });
   describe('when the input field has focus', function () {
     it('displays the list of options', function () {
-      var _render2 = render(_react.default.createElement(_.default, {
+      var _render4 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render2.baseElement,
-          queryByLabelText = _render2.queryByLabelText;
+          baseElement = _render4.baseElement,
+          queryByLabelText = _render4.queryByLabelText;
 
       defaultOptions.forEach(function (_ref2) {
         var label = _ref2.label;
@@ -108,12 +132,12 @@ describe('Combobox', function () {
       });
     });
     it('renders the first item in the options list as "active"', function () {
-      var _render3 = render(_react.default.createElement(_.default, {
+      var _render5 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render3.baseElement,
-          queryByText = _render3.queryByText;
+          baseElement = _render5.baseElement,
+          queryByText = _render5.queryByText;
 
       _react2.fireEvent.click(queryByText('test')); // The structure would match the querySelector `li label span`. `queryByText`
       // returns the <span>, but we need the `<li>`
@@ -136,14 +160,14 @@ describe('Combobox', function () {
         var chevronUpPathD = chevronUpContainer.querySelector('svg path').getAttribute('d');
         var onShow = jest.fn();
 
-        var _render4 = render(_react.default.createElement(_.default, {
+        var _render6 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           variant: "sync",
           onShow: onShow
         })),
-            container = _render4.container,
-            queryByLabelText = _render4.queryByLabelText;
+            container = _render6.container,
+            queryByLabelText = _render6.queryByLabelText;
 
         expect(container.querySelector('svg path').getAttribute('d')).toEqual(chevronDownPathD);
 
@@ -155,23 +179,23 @@ describe('Combobox', function () {
     });
     describe('when variant="async"', function () {
       it('does NOT render a chevron, even when it has options', function () {
-        var _render5 = render(_react.default.createElement(_.default, {
+        var _render7 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           variant: "async"
         })),
-            container = _render5.container;
+            container = _render7.container;
 
         expect(container.querySelector('svg')).not.toBeInTheDocument();
       });
     });
     describe('when typing', function () {
       it('updates the input value as a stateful component', function () {
-        var _render6 = render(_react.default.createElement(_.default, {
+        var _render8 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            queryByLabelText = _render6.queryByLabelText;
+            queryByLabelText = _render8.queryByLabelText;
 
         var value = 'value';
 
@@ -194,12 +218,12 @@ describe('Combobox', function () {
           eventTargetValue = event.target.value;
         });
 
-        var _render7 = render(_react.default.createElement(_.default, {
+        var _render9 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeInputValue: onChangeInputValue
         })),
-            queryByLabelText = _render7.queryByLabelText;
+            queryByLabelText = _render9.queryByLabelText;
 
         var value = 'value';
 
@@ -213,13 +237,13 @@ describe('Combobox', function () {
         expect(eventTargetValue).toEqual(value);
       });
       it('renders new options without losing focus on input or closing dropdown', function () {
-        var _render8 = render(_react.default.createElement(_.default, {
+        var _render10 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render8.baseElement,
-            queryByLabelText = _render8.queryByLabelText,
-            rerender = _render8.rerender;
+            baseElement = _render10.baseElement,
+            queryByLabelText = _render10.queryByLabelText,
+            rerender = _render10.rerender;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -239,15 +263,15 @@ describe('Combobox', function () {
       describe('when variant="async"', function () {
         describe('when loading', function () {
           it('renders the loading message, then options', function () {
-            var _render9 = render(_react.default.createElement(_.default, {
+            var _render11 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions,
               defaultInputValue: "option",
               variant: "async"
             })),
-                baseElement = _render9.baseElement,
-                queryByLabelText = _render9.queryByLabelText,
-                rerender = _render9.rerender;
+                baseElement = _render11.baseElement,
+                queryByLabelText = _render11.queryByLabelText,
+                rerender = _render11.rerender;
 
             _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -276,16 +300,16 @@ describe('Combobox', function () {
         describe('when variant="async"', function () {
           describe('when loading={true} then toggles to loading={false}', function () {
             it('renders the no matches found message', function () {
-              var _render10 = render(_react.default.createElement(_.default, {
+              var _render12 = render(_react.default.createElement(_.default, {
                 label: "test",
                 loading: false,
                 options: [],
                 variant: "async"
               })),
-                  baseElement = _render10.baseElement,
-                  queryByLabelText = _render10.queryByLabelText,
-                  queryByText = _render10.queryByText,
-                  rerender = _render10.rerender;
+                  baseElement = _render12.baseElement,
+                  queryByLabelText = _render12.queryByLabelText,
+                  queryByText = _render12.queryByText,
+                  rerender = _render12.rerender;
 
               _react2.fireEvent.click(queryByText('test')); // at this stage, the dropdown shouldn't be open.
 
@@ -322,13 +346,13 @@ describe('Combobox', function () {
         });
         describe('when variant="sync"', function () {
           it('renders the no matches found message', function () {
-            var _render11 = render(_react.default.createElement(_.default, {
+            var _render13 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions
             })),
-                baseElement = _render11.baseElement,
-                queryByLabelText = _render11.queryByLabelText,
-                rerender = _render11.rerender;
+                baseElement = _render13.baseElement,
+                queryByLabelText = _render13.queryByLabelText,
+                rerender = _render13.rerender;
 
             _react2.fireEvent.click(queryByLabelText('test')); // at this stage, the dropdown should be open with all of the available options.
 
@@ -363,15 +387,15 @@ describe('Combobox', function () {
         var onShow = jest.fn();
         var onHide = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, {
+        var _render14 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onShow: onShow,
           onHide: onHide
         })),
-            baseElement = _render12.baseElement,
-            container = _render12.container,
-            queryByLabelText = _render12.queryByLabelText;
+            baseElement = _render14.baseElement,
+            container = _render14.container,
+            queryByLabelText = _render14.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -400,14 +424,14 @@ describe('Combobox', function () {
       it('selects the active (first) item in the dropdown list', function () {
         var onChangeValue = jest.fn();
 
-        var _render13 = render(_react.default.createElement(_.default, {
+        var _render15 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render13.baseElement,
-            queryByText = _render13.queryByText,
-            queryByLabelText = _render13.queryByLabelText;
+            baseElement = _render15.baseElement,
+            queryByText = _render15.queryByText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -447,14 +471,14 @@ describe('Combobox', function () {
             value: 'option 2'
           }];
 
-          var _render14 = render(_react.default.createElement(_.default, {
+          var _render16 = render(_react.default.createElement(_.default, {
             label: "test",
             onChangeValue: onChangeValue,
             options: options
           })),
-              baseElement = _render14.baseElement,
-              queryByText = _render14.queryByText,
-              queryByLabelText = _render14.queryByLabelText;
+              baseElement = _render16.baseElement,
+              queryByText = _render16.queryByText,
+              queryByLabelText = _render16.queryByLabelText;
 
           _react2.fireEvent.click(queryByText('test'));
 
@@ -485,14 +509,14 @@ describe('Combobox', function () {
 
         var chevronDownPathD = chevronDownContainer.querySelector('svg path').getAttribute('d');
 
-        var _render15 = render(_react.default.createElement(_.default, {
+        var _render17 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render15.baseElement,
-            container = _render15.container,
-            queryByText = _render15.queryByText,
-            queryByLabelText = _render15.queryByLabelText;
+            baseElement = _render17.baseElement,
+            container = _render17.container,
+            queryByText = _render17.queryByText,
+            queryByLabelText = _render17.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -521,12 +545,12 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render16 = render(_react.default.createElement(_.default, {
+        var _render18 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            queryByLabelText = _render16.queryByLabelText;
+            queryByLabelText = _render18.queryByLabelText;
 
         var value = 'value';
 
@@ -554,14 +578,14 @@ describe('Combobox', function () {
         var onChangeInputValue = jest.fn();
         var onChangeValue = jest.fn();
 
-        var _render17 = render(_react.default.createElement(_.default, {
+        var _render19 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue,
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render17.baseElement,
-            queryByLabelText = _render17.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+            baseElement = _render19.baseElement,
+            queryByLabelText = _render19.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
         // This click focuses on the input.
 
 
@@ -621,14 +645,14 @@ describe('Combobox', function () {
             }]
           }];
 
-          var _render18 = render(_react.default.createElement(_.default, {
+          var _render20 = render(_react.default.createElement(_.default, {
             label: "test",
             onChangeInputValue: onChangeInputValue,
             onChangeValue: onChangeValue,
             options: options
           })),
-              baseElement = _render18.baseElement,
-              queryByLabelText = _render18.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+              baseElement = _render20.baseElement,
+              queryByLabelText = _render20.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
           // This click focuses on the input.
 
 
@@ -668,13 +692,13 @@ describe('Combobox', function () {
     });
     describe('when pressing the ESCAPE key', function () {
       it('closes the dropdown, keeps focus on input', function () {
-        var _render19 = render(_react.default.createElement(_.default, {
+        var _render21 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render19.baseElement,
-            queryByLabelText = _render19.queryByLabelText,
-            queryByText = _render19.queryByText;
+            baseElement = _render21.baseElement,
+            queryByLabelText = _render21.queryByLabelText,
+            queryByText = _render21.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -692,13 +716,13 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render20 = render(_react.default.createElement(_.default, {
+        var _render22 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            queryByLabelText = _render20.queryByLabelText,
-            queryByText = _render20.queryByText;
+            queryByLabelText = _render22.queryByLabelText,
+            queryByText = _render22.queryByText;
 
         var value = 'value';
 
@@ -724,18 +748,18 @@ describe('Combobox', function () {
   });
   describe('when the input field has text', function () {
     it('renders the "clear" button', function () {
-      var _render21 = render(_react.default.createElement(_Times.default, null)),
-          timesContainer = _render21.container;
+      var _render23 = render(_react.default.createElement(_Times.default, null)),
+          timesContainer = _render23.container;
 
       var timesPathD = timesContainer.querySelector('svg path').getAttribute('d');
 
-      var _render22 = render(_react.default.createElement(_.default, {
+      var _render24 = render(_react.default.createElement(_.default, {
         defaultInputValue: "value",
         label: "test",
         options: defaultOptions
       })),
-          container = _render22.container,
-          queryByLabelText = _render22.queryByLabelText;
+          container = _render24.container,
+          queryByLabelText = _render24.queryByLabelText;
 
       expect(queryByLabelText('test')).toHaveValue('value');
       expect(container.querySelectorAll('svg path')[0]).toHaveAttribute('d', timesPathD);
@@ -747,12 +771,12 @@ describe('Combobox', function () {
           inputValue = event ? event.target.value : '';
         });
 
-        var _render23 = render(_react.default.createElement(_.default, {
+        var _render25 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue
         })),
-            container = _render23.container,
-            queryByLabelText = _render23.queryByLabelText;
+            container = _render25.container,
+            queryByLabelText = _render25.queryByLabelText;
 
         var value = 'value';
 
@@ -778,13 +802,13 @@ describe('Combobox', function () {
     it('updates the input value with the label of the selection', function () {
       var onChangeValue = jest.fn();
 
-      var _render24 = render(_react.default.createElement(_.default, {
+      var _render26 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render24.baseElement,
-          queryByLabelText = _render24.queryByLabelText;
+          baseElement = _render26.baseElement,
+          queryByLabelText = _render26.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -798,13 +822,13 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).not.toBeInTheDocument();
     });
     it('shows the selected tag when multiple select is enabled', function () {
-      var _render25 = render(_react.default.createElement(_.default, {
+      var _render27 = render(_react.default.createElement(_.default, {
         label: "test",
         multiple: true,
         options: defaultOptions
       })),
-          baseElement = _render25.baseElement,
-          queryByLabelText = _render25.queryByLabelText;
+          baseElement = _render27.baseElement,
+          queryByLabelText = _render27.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -813,12 +837,12 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label)).toBeInTheDocument();
     });
     it('renders as "selected" in the dropdown list', function () {
-      var _render26 = render(_react.default.createElement(_.default, {
+      var _render28 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render26.baseElement,
-          queryByLabelText = _render26.queryByLabelText;
+          baseElement = _render28.baseElement,
+          queryByLabelText = _render28.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -836,14 +860,14 @@ describe('Combobox', function () {
       it('does NOT update the selection automatically', function () {
         var onChangeValue = jest.fn();
 
-        var _render27 = render(_react.default.createElement(_.default, {
+        var _render29 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render27.baseElement,
-            queryByLabelText = _render27.queryByLabelText,
-            queryByText = _render27.queryByText;
+            baseElement = _render29.baseElement,
+            queryByLabelText = _render29.queryByLabelText,
+            queryByText = _render29.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -870,13 +894,13 @@ describe('Combobox', function () {
       it('clears the selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render28 = render(_react.default.createElement(_.default, {
+        var _render30 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render28.baseElement,
-            queryByLabelText = _render28.queryByLabelText;
+            baseElement = _render30.baseElement,
+            queryByLabelText = _render30.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -901,7 +925,7 @@ describe('Combobox', function () {
       var onChangeInputValue = jest.fn();
       var onChangeValue = jest.fn();
 
-      var _render29 = render(_react.default.createElement(_.default, {
+      var _render31 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         defaultInputValue: "value",
@@ -909,9 +933,9 @@ describe('Combobox', function () {
         onChangeInputValue: onChangeInputValue,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render29.baseElement,
-          queryByLabelText = _render29.queryByLabelText,
-          rerender = _render29.rerender;
+          baseElement = _render31.baseElement,
+          queryByLabelText = _render31.queryByLabelText,
+          rerender = _render31.rerender;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -934,7 +958,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render30, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -944,7 +968,7 @@ describe('Combobox', function () {
                 newInputValue = event ? event.target.value : '';
               });
               onChangeValue = jest.fn();
-              _render30 = render(_react.default.createElement(_.default, {
+              _render32 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 inputValue: "value",
@@ -953,7 +977,7 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render30.baseElement, queryByLabelText = _render30.queryByLabelText, rerender = _render30.rerender;
+              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -1011,7 +1035,7 @@ describe('Combobox', function () {
           it('calls the onChangeValue prop with removed: true', function () {
             var onChangeValue = jest.fn();
 
-            var _render31 = render(_react.default.createElement(_.default, {
+            var _render33 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions,
               inputValue: "",
@@ -1019,8 +1043,8 @@ describe('Combobox', function () {
               onChangeValue: onChangeValue,
               multiple: true
             })),
-                queryByText = _render31.queryByText,
-                queryByLabelText = _render31.queryByLabelText;
+                queryByText = _render33.queryByText,
+                queryByLabelText = _render33.queryByLabelText;
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 

package/lib/components/Select/Target.js

@@ -48,7 +48,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TargetContainer = _styledComponents.default.div.withConfig({
   displayName: "Target__TargetContainer",
   componentId: "sc-1t0verh-0"
-})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-4px;width:100%;"]);
+})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-2px;width:100%;"]);
 
 var TargetButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "Target__TargetButton",

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