@dhis2-ui/select 8.8.0 → 8.10.0

package/build/cjs/multi-select/__tests__/selection-list.test.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _index = require("../../multi-select-option/index.js");
+
+var _selectionList = require("../selection-list.js");
+
+require("@testing-library/jest-dom");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('<SelectionList />', () => {
+  const env = process.env;
+  beforeEach(() => {
+    // Ensure process.env is also reset for cached modules
+    jest.resetModules();
+    process.env = { ...env
+    }; // Allow spying on console.error and silence rendering errors
+
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    // Restore process.env to original state
+    process.env = env; // Restore all mocks back to original values
+
+    jest.restoreAllMocks();
+  });
+  describe('production', () => {
+    it('should not throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = ['value'];
+      expect(() => {
+        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).not.toThrow();
+    });
+    it('should show the selection for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = ['value'];
+      const {
+        getByText
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(getByText(selected)).toBeInTheDocument();
+    });
+    it('log an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = ['value'];
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(console.error).toHaveBeenCalledWith('There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.');
+    });
+  });
+  describe('not production', () => {
+    it('should throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'development';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = ['value'];
+      expect(() => {
+        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).toThrow('There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.');
+    });
+  });
+});

package/build/cjs/multi-select/selection-list.js

@@ -38,15 +38,26 @@ const SelectionList = _ref2 => {
     options
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected.map(value => {
+    const isProduction = process.env.NODE_ENV === 'production';
     const selectedOption = (0, _index.findOptionChild)(value, options);
 
     if (!selectedOption) {
       const message = "There is no option with the value: \"".concat(value, "\". ") + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
-      throw new Error(message);
-    } // The chip should be disabled if the option or the select are disabled
 
+      if (isProduction) {
+        // Don't crash the app if in production
+        console.error(message);
+      } else {
+        // Throw error if not in production for maximum visibility
+        throw new Error(message);
+      }
+    }
 
-    const isDisabled = selectedOption.props.disabled || disabled; // Create an onRemove handler, but only if it's not disabled
+    const isDisabled = selectedOption ? // The chip should be disabled if the option or the select are disabled
+    selectedOption.props.disabled || disabled : // If there is no selected option, just look at the select
+    disabled; // Use the selected value if we do not have a label
+
+    const label = selectedOption ? selectedOption.props.label : value; // Create an onRemove handler, but only if it's not disabled
 
     const onRemove = isDisabled ? undefined : createRemoveHandler({
       selected,
@@ -62,7 +73,7 @@ const SelectionList = _ref2 => {
       marginTop: "0",
       overflow: true,
       dense: true
-    }, selectedOption.props.label);
+    }, label);
   }));
 };
 

package/build/cjs/single-select/__tests__/selection.test.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _index = require("../../single-select-option/index.js");
+
+var _selection = require("../selection.js");
+
+require("@testing-library/jest-dom");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('<Selection />', () => {
+  const env = process.env;
+  beforeEach(() => {
+    // Ensure process.env is also reset for cached modules
+    jest.resetModules();
+    process.env = { ...env
+    }; // Allow spying on console.error and silence rendering errors
+
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    // Restore process.env to original state
+    process.env = env; // Restore all mocks back to original values
+
+    jest.restoreAllMocks();
+  });
+  describe('production', () => {
+    it('should not throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = 'value';
+      expect(() => {
+        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).not.toThrow();
+    });
+    it('should show the selection for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = 'value';
+      const {
+        getByText
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(getByText(selected)).toBeInTheDocument();
+    });
+    it('log an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = 'value';
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(console.error).toHaveBeenCalledWith('There is no option with the value: "value". Make sure that the value passed to the selected prop matches the value of an existing option.');
+    });
+  });
+  describe('not production', () => {
+    it('should throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'development';
+
+      const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+
+      const selected = 'value';
+      expect(() => {
+        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).toThrow('There is no option with the value: "value". Make sure that the value passed to the selected prop matches the value of an existing option.');
+    });
+  });
+});

package/build/cjs/single-select/selection.js

@@ -25,15 +25,24 @@ const Selection = _ref => {
     selected,
     className
   } = _ref;
+  const isProduction = process.env.NODE_ENV === 'production';
   const selectedOption = (0, _index.findOptionChild)(selected, options);
 
   if (!selectedOption) {
     const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
-    throw new Error(message);
+
+    if (isProduction) {
+      // Don't crash the app if in production
+      console.error(message);
+    } else {
+      // Throw error if not in production for maximum visibility
+      throw new Error(message);
+    }
   }
 
-  const icon = selectedOption.props.icon;
-  const label = selectedOption.props.label;
+  const icon = selectedOption && selectedOption.props.icon; // Use the selected value if we do not have a label
+
+  const label = selectedOption ? selectedOption.props.label : selected;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2249594316", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp16]]]) + " " + ((0, _classnames.default)(className, 'root') || "")
   }, icon && /*#__PURE__*/_react.default.createElement("div", {

package/build/es/multi-select/__tests__/selection-list.test.js

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MultiSelectOption } from '../../multi-select-option/index.js';
+import { SelectionList } from '../selection-list.js';
+import '@testing-library/jest-dom';
+describe('<SelectionList />', () => {
+  const env = process.env;
+  beforeEach(() => {
+    // Ensure process.env is also reset for cached modules
+    jest.resetModules();
+    process.env = { ...env
+    }; // Allow spying on console.error and silence rendering errors
+
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    // Restore process.env to original state
+    process.env = env; // Restore all mocks back to original values
+
+    jest.restoreAllMocks();
+  });
+  describe('production', () => {
+    it('should not throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = ['value'];
+      expect(() => {
+        render( /*#__PURE__*/React.createElement(SelectionList, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).not.toThrow();
+    });
+    it('should show the selection for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = ['value'];
+      const {
+        getByText
+      } = render( /*#__PURE__*/React.createElement(SelectionList, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(getByText(selected)).toBeInTheDocument();
+    });
+    it('log an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = ['value'];
+      render( /*#__PURE__*/React.createElement(SelectionList, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(console.error).toHaveBeenCalledWith('There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.');
+    });
+  });
+  describe('not production', () => {
+    it('should throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'development';
+      const options = /*#__PURE__*/React.createElement(MultiSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = ['value'];
+      expect(() => {
+        render( /*#__PURE__*/React.createElement(SelectionList, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).toThrow('There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.');
+    });
+  });
+});

package/build/es/multi-select/selection-list.js

@@ -26,15 +26,26 @@ const SelectionList = _ref2 => {
     options
   } = _ref2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
+    const isProduction = process.env.NODE_ENV === 'production';
     const selectedOption = findOptionChild(value, options);
 
     if (!selectedOption) {
       const message = "There is no option with the value: \"".concat(value, "\". ") + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
-      throw new Error(message);
-    } // The chip should be disabled if the option or the select are disabled
 
+      if (isProduction) {
+        // Don't crash the app if in production
+        console.error(message);
+      } else {
+        // Throw error if not in production for maximum visibility
+        throw new Error(message);
+      }
+    }
 
-    const isDisabled = selectedOption.props.disabled || disabled; // Create an onRemove handler, but only if it's not disabled
+    const isDisabled = selectedOption ? // The chip should be disabled if the option or the select are disabled
+    selectedOption.props.disabled || disabled : // If there is no selected option, just look at the select
+    disabled; // Use the selected value if we do not have a label
+
+    const label = selectedOption ? selectedOption.props.label : value; // Create an onRemove handler, but only if it's not disabled
 
     const onRemove = isDisabled ? undefined : createRemoveHandler({
       selected,
@@ -50,7 +61,7 @@ const SelectionList = _ref2 => {
       marginTop: "0",
       overflow: true,
       dense: true
-    }, selectedOption.props.label);
+    }, label);
   }));
 };
 

package/build/es/single-select/__tests__/selection.test.js

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { SingleSelectOption } from '../../single-select-option/index.js';
+import { Selection } from '../selection.js';
+import '@testing-library/jest-dom';
+describe('<Selection />', () => {
+  const env = process.env;
+  beforeEach(() => {
+    // Ensure process.env is also reset for cached modules
+    jest.resetModules();
+    process.env = { ...env
+    }; // Allow spying on console.error and silence rendering errors
+
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    // Restore process.env to original state
+    process.env = env; // Restore all mocks back to original values
+
+    jest.restoreAllMocks();
+  });
+  describe('production', () => {
+    it('should not throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = 'value';
+      expect(() => {
+        render( /*#__PURE__*/React.createElement(Selection, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).not.toThrow();
+    });
+    it('should show the selection for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = 'value';
+      const {
+        getByText
+      } = render( /*#__PURE__*/React.createElement(Selection, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(getByText(selected)).toBeInTheDocument();
+    });
+    it('log an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'production';
+      const options = /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = 'value';
+      render( /*#__PURE__*/React.createElement(Selection, {
+        selected: selected,
+        options: options,
+        disabled: false,
+        onChange: () => {}
+      }));
+      expect(console.error).toHaveBeenCalledWith('There is no option with the value: "value". Make sure that the value passed to the selected prop matches the value of an existing option.');
+    });
+  });
+  describe('not production', () => {
+    it('should throw an error for a selection that is not in the options', () => {
+      process.env.NODE_ENV = 'development';
+      const options = /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: "1",
+        label: "one",
+        value: "1"
+      });
+      const selected = 'value';
+      expect(() => {
+        render( /*#__PURE__*/React.createElement(Selection, {
+          selected: selected,
+          options: options,
+          disabled: false,
+          onChange: () => {}
+        }));
+      }).toThrow('There is no option with the value: "value". Make sure that the value passed to the selected prop matches the value of an existing option.');
+    });
+  });
+});

package/build/es/single-select/selection.js

@@ -11,15 +11,24 @@ const Selection = _ref => {
     selected,
     className
   } = _ref;
+  const isProduction = process.env.NODE_ENV === 'production';
   const selectedOption = findOptionChild(selected, options);
 
   if (!selectedOption) {
     const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
-    throw new Error(message);
+
+    if (isProduction) {
+      // Don't crash the app if in production
+      console.error(message);
+    } else {
+      // Throw error if not in production for maximum visibility
+      throw new Error(message);
+    }
   }
 
-  const icon = selectedOption.props.icon;
-  const label = selectedOption.props.label;
+  const icon = selectedOption && selectedOption.props.icon; // Use the selected value if we do not have a label
+
+  const label = selectedOption ? selectedOption.props.label : selected;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2249594316", [spacers.dp8, spacers.dp16, spacers.dp16]]]) + " " + (cx(className, 'root') || "")
   }, icon && /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "8.8.0",
+    "version": "8.10.0",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,19 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.8.0",
-        "@dhis2-ui/button": "8.8.0",
-        "@dhis2-ui/card": "8.8.0",
-        "@dhis2-ui/checkbox": "8.8.0",
-        "@dhis2-ui/chip": "8.8.0",
-        "@dhis2-ui/field": "8.8.0",
-        "@dhis2-ui/input": "8.8.0",
-        "@dhis2-ui/layer": "8.8.0",
-        "@dhis2-ui/loader": "8.8.0",
-        "@dhis2-ui/popper": "8.8.0",
-        "@dhis2-ui/status-icon": "8.8.0",
-        "@dhis2/ui-constants": "8.8.0",
-        "@dhis2/ui-icons": "8.8.0",
+        "@dhis2-ui/box": "8.10.0",
+        "@dhis2-ui/button": "8.10.0",
+        "@dhis2-ui/card": "8.10.0",
+        "@dhis2-ui/checkbox": "8.10.0",
+        "@dhis2-ui/chip": "8.10.0",
+        "@dhis2-ui/field": "8.10.0",
+        "@dhis2-ui/input": "8.10.0",
+        "@dhis2-ui/layer": "8.10.0",
+        "@dhis2-ui/loader": "8.10.0",
+        "@dhis2-ui/popper": "8.10.0",
+        "@dhis2-ui/status-icon": "8.10.0",
+        "@dhis2/ui-constants": "8.10.0",
+        "@dhis2/ui-icons": "8.10.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },