@decisiv/ui-components 2.0.1-alpha.212 → 2.0.1-alpha.214

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAskBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA4mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -125,7 +125,8 @@ function Combobox(props, ref) {
       zIndex = props.zIndex,
       containerSelector = props.containerSelector,
       pointerEvents = props.pointerEvents,
-      externalIsPopoverVisible = props.isPopoverVisible;
+      externalIsPopoverVisible = props.isPopoverVisible,
+      externalListRef = props.listRef;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -136,7 +137,8 @@ function Combobox(props, ref) {
   var fallbackComboboxRef = (0, _react.useRef)(null);
   var finalComboboxRef = ref || fallbackComboboxRef;
   var inputId = (0, _useUniqueId.default)(id, 'combobox-');
-  var listRef = (0, _react.useRef)(null);
+  var fallbackListRef = (0, _react.useRef)(null);
+  var listRef = externalListRef || fallbackListRef;
 
   var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
       _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
@@ -241,13 +243,49 @@ function Combobox(props, ref) {
    */
 
 
-  var updateSelected = (0, _react.useCallback)(function (selectedId) {
+  var updateSelected = (0, _react.useCallback)(function (selectedIds) {
+    // When using a controlled multiple variation, we want to also have access to the
+    // removed id values.
+    if (multiple && onChangeValue && Array.isArray(selectedIds) && selectedValues) {
+      var isRemoving = selectedIds.length < selectedValues.length;
+
+      if (isRemoving && selectedValues.length > 0) {
+        var removedValue = selectedValues.find(function (_ref2) {
+          var optionId = _ref2.id;
+          return !selectedIds.includes(optionId);
+        });
+
+        if (removedValue && removedValue.id !== undefined) {
+          var filteredValues = selectedValues.filter(function (_ref3) {
+            var optionId = _ref3.id;
+            return optionId !== removedValue.id;
+          });
+          setSelectedValues(filteredValues);
+          onChangeValue(removedValue.id, {
+            removed: true
+          });
+          return;
+        }
+      }
+    }
+
+    var getSelectedId = function getSelectedId(ids) {
+      var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (Array.isArray(ids)) {
+        return isMultiple ? (0, _last.default)(ids) : ids[0];
+      }
+
+      return ids;
+    };
+
+    var selectedId = getSelectedId(selectedIds, multiple);
     setSelectedValue(selectedId);
     var newSelected = (0, _utils.getOptionFromOptions)(options, selectedId) || null;
 
     if (multiple) {
-      var index = selectedValues && selectedValues.findIndex(function (_ref2) {
-        var itemId = _ref2.id;
+      var index = selectedValues && selectedValues.findIndex(function (_ref4) {
+        var itemId = _ref4.id;
         return itemId === selectedId;
       });
 
@@ -274,8 +312,8 @@ function Combobox(props, ref) {
     }
   }, [multiple, onChangeValue, options, selectedValues, setInternalInputValue, setSelectedValue, setSelectedValues, setActiveId]);
   var removeSelected = (0, _react.useCallback)(function (selectedId) {
-    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref3) {
-      var optionId = _ref3.id;
+    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref5) {
+      var optionId = _ref5.id;
       return selectedId !== optionId;
     });
     setSelectedValues(newSelectedValues);
@@ -314,16 +352,12 @@ function Combobox(props, ref) {
   /**
    * This handler is called by the dropdown's "onChange" event. That handler is called with
    * an array of values, but we only allow single select in the Combobox.
+   * This is being managed in the `updatedSelected` function.
    */
 
   var handleChangeDropdownListValue = (0, _react.useCallback)(function (selectedIds) {
-    if (multiple) {
-      updateSelected((0, _last.default)(selectedIds));
-      return;
-    }
-
-    updateSelected(selectedIds[0]);
-  }, [updateSelected, multiple]);
+    updateSelected(selectedIds);
+  }, [updateSelected]);
   /**
    * Clicking anywhere within the Combobox component (except the clear button) should open
    * the dropdown list. There is some complex logic here because of the <input> rendered inside
@@ -392,8 +426,8 @@ function Combobox(props, ref) {
       if (!isPopoverVisible) {
         updateIsPopoverVisible(true);
       } else {
-        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref4) {
-          var optionId = _ref4.id;
+        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref6) {
+          var optionId = _ref6.id;
           return optionId === activeId;
         });
 
@@ -505,18 +539,18 @@ function Combobox(props, ref) {
     onClick: handleContainerClick,
     onKeyDown: handleContainerKeyDown,
     ref: finalComboboxRef
-  }), function (_ref5) {
-    var ariaLabelledBy = _ref5['aria-labelledby'],
-        disabled = _ref5.disabled,
-        targetId = _ref5.id,
-        onBlurTarget = _ref5.onBlur,
-        onChangeTargetValue = _ref5.onChange,
-        onFocusTarget = _ref5.onFocus,
-        readOnly = _ref5.readOnly,
-        targetRef = _ref5.ref,
-        value = _ref5.value,
-        autoComplete = _ref5.autoComplete,
-        type = _ref5.type;
+  }), function (_ref7) {
+    var ariaLabelledBy = _ref7['aria-labelledby'],
+        disabled = _ref7.disabled,
+        targetId = _ref7.id,
+        onBlurTarget = _ref7.onBlur,
+        onChangeTargetValue = _ref7.onChange,
+        onFocusTarget = _ref7.onFocus,
+        readOnly = _ref7.readOnly,
+        targetRef = _ref7.ref,
+        value = _ref7.value,
+        autoComplete = _ref7.autoComplete,
+        type = _ref7.type;
     var dropdownListId = "".concat(targetId, "-dropdown-list");
     return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Target.default, {
       "aria-haspopup": "listbox",

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

@@ -1031,12 +1031,12 @@ describe('Combobox', function () {
     })));
     describe('when in multiple select mode', function () {
       describe('when a value is selected', function () {
-        describe('when the "X" button is clicked to deselect a value', function () {
-          it('calls the onChangeValue prop with removed: true', function () {
+        describe('clicking the same value again', function () {
+          it('calls the onChangeValue prop with the expected values', function () {
             var onChangeValue = jest.fn();
 
             var _render33 = render(_react.default.createElement(_.default, {
-              label: "test",
+              label: "test label",
               options: defaultOptions,
               inputValue: "",
               value: [defaultOptions[1]],
@@ -1048,6 +1048,32 @@ describe('Combobox', function () {
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 
+            _react2.fireEvent.click(queryByText('test label'));
+
+            _react2.fireEvent.click(queryByLabelText(defaultOptions[1].label));
+
+            expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
+              removed: true
+            }));
+          });
+        });
+        describe('when the "X" button is clicked to deselect a value', function () {
+          it('calls the onChangeValue prop with removed: true', function () {
+            var onChangeValue = jest.fn();
+
+            var _render34 = render(_react.default.createElement(_.default, {
+              label: "test",
+              options: defaultOptions,
+              inputValue: "",
+              value: [defaultOptions[1]],
+              onChangeValue: onChangeValue,
+              multiple: true
+            })),
+                queryByText = _render34.queryByText,
+                queryByLabelText = _render34.queryByLabelText;
+
+            expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
+
             _react2.fireEvent.click(queryByLabelText('Delete'));
 
             expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
@@ -1060,18 +1086,18 @@ describe('Combobox', function () {
   });
   describe('when the isPopoverVisible is true', function () {
     it('opens the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _render34, baseElement;
+      var _render35, baseElement;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _render34 = render(_react.default.createElement(_.default, {
+              _render35 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 hideLabel: true,
                 isPopoverVisible: true
-              })), baseElement = _render34.baseElement;
+              })), baseElement = _render35.baseElement;
               defaultOptions.forEach(function (_ref6) {
                 var label = _ref6.label;
                 expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
@@ -1085,18 +1111,18 @@ describe('Combobox', function () {
       }, _callee2);
     })));
     it('does not automatically close the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _render35, baseElement, queryByLabelText;
+      var _render36, baseElement, queryByLabelText;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _render35 = render(_react.default.createElement(_.default, {
+              _render36 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 hideLabel: true,
                 isPopoverVisible: true
-              })), baseElement = _render35.baseElement, queryByLabelText = _render35.queryByLabelText;
+              })), baseElement = _render36.baseElement, queryByLabelText = _render36.queryByLabelText;
 
               _react2.fireEvent.click(queryByLabelText(defaultOptions[0].label));
 

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAkGrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAsGrD,eAAe,MAAM,CAAC"}

package/lib/components/Combobox/schema.js

@@ -49,6 +49,9 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
     label: _reactDesc.PropTypes.string,
     value: _reactDesc.PropTypes.string
   }))]).description('The ID of the option that is selected. If provided, controlling the Select must be handled externally. Overrides `defaultValue`.'),
+  listRef: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.func, _reactDesc.PropTypes.shape({
+    current: _reactDesc.PropTypes.any
+  })]).description('A ref for the list container.'),
   multiple: _reactDesc.PropTypes.bool.description('Used when multiple selections can be made in the Combobox').defaultValue(false),
   variant: _reactDesc.PropTypes.oneOf(['async', 'sync']).description('Enables different logic for rendering the dropdown list.').defaultValue('sync'),
   renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, Ref } from 'react';
+import { InputHTMLAttributes, Ref, RefObject } from 'react';
 import { BaseInputFieldProps } from '../../atoms/InputField';
 import { ActionHandler } from '../Tag/types';
 import { PopoverProps } from '../Popover/types';
@@ -16,6 +16,7 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxIn
     isPopoverVisible?: boolean;
     multiple?: boolean;
     maxWidth?: string;
+    listRef?: RefObject<HTMLUListElement>;
     loading?: boolean;
     onBlur?: React.FocusEventHandler;
     onChangeInputValue?: (event?: React.ChangeEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+L/C;kBA/LQ,YAAY;;;;;;;;AAuNrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0M/C;kBA1MQ,YAAY;;;;;;;;AAkOrB,eAAe,YAAY,CAAC"}

package/lib/components/DropdownList/index.js

@@ -95,7 +95,8 @@ function DropdownList(props) {
       maxHeight = props.maxHeight,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      rest = _objectWithoutProperties(props, ["actions", "borderRadius", "containerSelector", "defaultSelectedIds", "defaultVisible", "defaultFooter", "focusOnShowing", "listRef", "onChange", "onHide", "onShow", "placement", "selectedIds", "showArrow", "target", "visible", "zIndex", "PanelComponent", "maxHeight", "maxWidth", "minWidth"]); // Use a ref callback to get more control over re-rendering when a ref is stored.
+      multiple = props.multiple,
+      rest = _objectWithoutProperties(props, ["actions", "borderRadius", "containerSelector", "defaultSelectedIds", "defaultVisible", "defaultFooter", "focusOnShowing", "listRef", "onChange", "onHide", "onShow", "placement", "selectedIds", "showArrow", "target", "visible", "zIndex", "PanelComponent", "maxHeight", "maxWidth", "minWidth", "multiple"]); // Use a ref callback to get more control over re-rendering when a ref is stored.
   // Specifically, the scroll to selected item on first render of dropdown requires this.
 
 
@@ -159,7 +160,12 @@ function DropdownList(props) {
   var handleOnChange = (0, _react.useCallback)(function (selection) {
     onChange && onChange(Array.isArray(selection) ? selection : [selection]);
     defaultFooter && setSelected(selection) && setSaved(selection);
-  }, [onChange, setSelected, setSaved, defaultFooter]);
+
+    if (!multiple) {
+      setShowing(false);
+      popRef && popRef.current && popRef.current.hide() && popRef.current.targetNode && popRef.current.targetNode.focus();
+    }
+  }, [onChange, setSelected, setSaved, defaultFooter, setShowing]);
   var handleOnApply = (0, _react.useCallback)(function () {
     setSaved(selected);
     popRef && popRef.current && popRef.current.hide();
@@ -227,7 +233,8 @@ function DropdownList(props) {
     onKeyDown: onKeyDown,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
-    minWidth: minWidth
+    minWidth: minWidth,
+    multiple: multiple
   }, rest)))));
 }
 

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

@@ -199,7 +199,7 @@ describe('DropdownList', function () {
         expect(onChange).toHaveBeenCalledWith([item0Id]);
         expect(baseElement).toMatchSnapshot();
       });
-      it('does not automatically hide the options', function () {
+      it('automatically hide the options', function () {
         var _render7 = render(_react.default.createElement(_.default, defaultProps)),
             baseElement = _render7.baseElement,
             getByText = _render7.getByText;
@@ -208,38 +208,19 @@ describe('DropdownList', function () {
 
         _react2.fireEvent.click((0, _react2.getByText)(baseElement, item0Label));
 
-        expect((0, _react2.queryByText)(baseElement, item0Label)).toBeTruthy();
-      });
-      it('does not allow multiple selections', function () {
-        var onChange = jest.fn();
-
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          onChange: onChange
-        }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
-
-        _react2.fireEvent.click(getByText(targetButtonText));
-
-        _react2.fireEvent.click((0, _react2.getByText)(baseElement, item0Label));
-
-        expect(onChange).toHaveBeenCalledWith([item0Id]);
-
-        _react2.fireEvent.click((0, _react2.getByText)(baseElement, item2Label));
-
-        expect(onChange).toHaveBeenCalledWith([item2Id]);
+        expect((0, _react2.queryByText)(baseElement, item0Label)).toBeFalsy();
       });
     });
     describe('multiple options', function () {
       it('calls the onChange prop with the selection ids', function () {
         var onChange = jest.fn();
 
-        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           multiple: true
         }))),
-            baseElement = _render9.baseElement,
-            getByText = _render9.getByText;
+            baseElement = _render8.baseElement,
+            getByText = _render8.getByText;
 
         _react2.fireEvent.click(getByText(targetButtonText));
 
@@ -251,11 +232,11 @@ describe('DropdownList', function () {
         expect(baseElement).toMatchSnapshot();
       });
       it('does not automatically hide the options', function () {
-        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           multiple: true
         }))),
-            baseElement = _render10.baseElement,
-            getByText = _render10.getByText;
+            baseElement = _render9.baseElement,
+            getByText = _render9.getByText;
 
         _react2.fireEvent.click(getByText(targetButtonText));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.212+3de0b1c",
+  "version": "2.0.1-alpha.214+896898c",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "3de0b1cfa799be6189a6f62a26f850b74a60d051"
+  "gitHead": "896898ccffaece0ac325ee1b11376d0f011b5f93"
 }