@k-int/stripes-kint-components 2.7.1 → 2.8.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
-## 2.7.1 2022-07-06
+## 2.8.2 2022-07-25
+  * New util function `parseErrorResponse`, used in places where we catch http errors, allows for text only response bodies
+
+## 2.8.1 2022-07-21
+  * ActionList previously added actionListItems directly to cached object--sometimes this caused the react-query cache ITSELF to update, although I'm not sure why here and not anywhere else. Fixed by creating a clone internally in ActionListFieldArray and assigning actionListActions on that.
+
+## 2.8.0 2022-07-15
   * Fixed bug where non-createable fields which were editable would display a field on creation.
+  * RichSelect -- A Select style form component allowing for more custom render behaviour.
+    * Refactored IconSelect to use RichSelect under the hood
+  * EditableRefdataList/EditableRefdataCategoryList Added validation to prevent attempting null save
+    * PropTypes updated
+    * ActionList Save button is now disabled if the form has submissionErrors.
+  * ActionList Added a prop to bootstrap defaults in while adding new object inline.
+  * Linting and refactoring
 
 ## 2.7.0 2022-07-05
   * Fixed missing translation issue

package/es/index.js

@@ -155,6 +155,12 @@ Object.defineProperty(exports, "RefdataButtons", {
     return _RefdataButtons.default;
   }
 });
+Object.defineProperty(exports, "RichSelect", {
+  enumerable: true,
+  get: function get() {
+    return _RichSelect.default;
+  }
+});
 Object.defineProperty(exports, "SASQLookupComponent", {
   enumerable: true,
   get: function get() {
@@ -258,6 +264,12 @@ Object.defineProperty(exports, "matchString", {
     return _utils.matchString;
   }
 });
+Object.defineProperty(exports, "parseErrorResponse", {
+  enumerable: true,
+  get: function get() {
+    return _utils.parseErrorResponse;
+  }
+});
 Object.defineProperty(exports, "refdataOptions", {
   enumerable: true,
   get: function get() {
@@ -384,6 +396,12 @@ Object.defineProperty(exports, "useRefdata", {
     return _hooks.useRefdata;
   }
 });
+Object.defineProperty(exports, "useSelectedOption", {
+  enumerable: true,
+  get: function get() {
+    return _RichSelect.useSelectedOption;
+  }
+});
 Object.defineProperty(exports, "useSettings", {
   enumerable: true,
   get: function get() {
@@ -441,6 +459,8 @@ var _CycleButton = _interopRequireDefault(require("./lib/CycleButton"));
 
 var _IconSelect = _interopRequireDefault(require("./lib/IconSelect"));
 
+var _RichSelect = _interopRequireWildcard(require("./lib/RichSelect"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/es/lib/ActionList/ActionList.js

@@ -21,7 +21,7 @@ var _ActionListFieldArray = _interopRequireDefault(require("./ActionListFieldArr
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "contentData", "creatableFields", "createCallback", "editableFields", "fieldComponents", "hideCreateButton", "label", "validateFields", "visibleFields"];
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "contentData", "creatableFields", "createCallback", "defaultNewObject", "editableFields", "fieldComponents", "hideCreateButton", "label", "validateFields", "visibleFields"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,10 +46,12 @@ var propTypes = {
   contentData: _propTypes.default.arrayOf(_propTypes.default.object),
   creatableFields: _propTypes.default.object,
   createCallback: _propTypes.default.func,
+  defaultNewObject: _propTypes.default.object,
   editableFields: _propTypes.default.object,
   fieldComponents: _propTypes.default.object,
   hideCreateButton: _propTypes.default.bool,
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  validateFields: _propTypes.default.object,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 var ActionList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -61,6 +63,8 @@ var ActionList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$creatableFields = _ref.creatableFields,
       creatableFields = _ref$creatableFields === void 0 ? {} : _ref$creatableFields,
       createCallback = _ref.createCallback,
+      _ref$defaultNewObject = _ref.defaultNewObject,
+      defaultNewObject = _ref$defaultNewObject === void 0 ? {} : _ref$defaultNewObject,
       _ref$editableFields = _ref.editableFields,
       editableFields = _ref$editableFields === void 0 ? {} : _ref$editableFields,
       _ref$fieldComponents = _ref.fieldComponents,
@@ -103,6 +107,7 @@ var ActionList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             component: ActionListFieldArrayWithRef,
             creatableFields: creatableFields,
             createCallback: createCallback,
+            defaultNewObject: defaultNewObject,
             editableFields: editableFields,
             fieldComponents: fieldComponents,
             hideCreateButton: hideCreateButton,

package/es/lib/ActionList/ActionListFieldArray.js

@@ -15,6 +15,8 @@ var _reactIntl = require("react-intl");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _reactFinalForm = require("react-final-form");
 
 var _components = require("@folio/stripes/components");
@@ -23,7 +25,7 @@ var _ActionListFieldArray = _interopRequireDefault(require("../../../styles/Acti
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "creatableFields", "createCallback", "editableFields", "fields", "fieldComponents", "hideCreateButton", "label", "validateFields", "visibleFields", "triggerFormSubmit"],
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "creatableFields", "createCallback", "defaultNewObject", "editableFields", "fields", "fieldComponents", "hideCreateButton", "label", "validateFields", "visibleFields", "triggerFormSubmit"],
     _excluded2 = ["actionListActions", "fieldName", "fieldIndex"],
     _excluded3 = ["actionListActions", "fieldName", "fieldIndex"],
     _excluded4 = ["actionListActions"],
@@ -74,12 +76,15 @@ var propTypes = {
   columnMapping: _propTypes.default.object,
   creatableFields: _propTypes.default.object,
   createCallback: _propTypes.default.func,
+  defaultNewObject: _propTypes.default.object,
   editableFields: _propTypes.default.object,
   fields: _propTypes.default.object,
   fieldComponents: _propTypes.default.object,
   formatter: _propTypes.default.object,
   hideCreateButton: _propTypes.default.bool,
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  triggerFormSubmit: _propTypes.default.func.isRequired,
+  validateFields: _propTypes.default.object,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -88,6 +93,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
       columnMapping = _ref.columnMapping,
       creatableFields = _ref.creatableFields,
       createCallback = _ref.createCallback,
+      defaultNewObject = _ref.defaultNewObject,
       editableFields = _ref.editableFields,
       fields = _ref.fields,
       fieldComponents = _ref.fieldComponents,
@@ -166,7 +172,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
 
   var handleClickCreate = function handleClickCreate() {
     toggleEditing('NEW_ROW');
-    fields.unshift({});
+    fields.unshift(defaultNewObject);
   }; // Way to go into create mode from external component, and way to tell internal editing state
 
 
@@ -201,7 +207,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           buttonStyle: "primary",
-          disabled: submitting || pristine,
+          disabled: hasValidationErrors || submitting || pristine,
           marginBottom0: true,
           onClick: function onClick() {
             triggerFormSubmit(); // This is set up as () => null in ActionList, so essentially only acts here to force validation
@@ -312,7 +318,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   var assignActions = function assignActions() {
     return fields.map(function (fieldName, fieldIndex) {
       // Fetch the content from the field Values
-      var cd = (0, _get.default)(values, fieldName);
+      var cd = (0, _cloneDeep.default)((0, _get.default)(values, fieldName));
       cd.actionListActions = actionAssigner(cd);
       return _objectSpread(_objectSpread({}, cd), {}, {
         fieldName: fieldName,

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -31,6 +31,8 @@ var _CustomPropertyForm = _interopRequireDefault(require("./CustomPropertyForm")
 
 var _hooks = require("../../hooks");
 
+var _utils = require("../../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -162,7 +164,7 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
               switch (_context.prev = _context.next) {
                 case 0:
                   _context.next = 2;
-                  return err.response.json();
+                  return (0, _utils.parseErrorResponse)(err.response);
 
                 case 2:
                   errorResp = _context.sent;

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -91,7 +91,7 @@ var CustomPropertiesViewCtx = function CustomPropertiesViewCtx(_ref) {
       }, // Within those groups, sort by weight
       {
         path: 'label'
-      } //For those with the same weight, sort by label
+      } // For those with the same weight, sort by label
       ]
     }
   }),

package/es/lib/CycleButton/CycleButton.js

@@ -75,7 +75,8 @@ CycleButton.propTypes = {
     className: _propTypes.default.object,
     icon: _propTypes.default.string.isRequired,
     onClick: _propTypes.default.func.isRequired
-  }))
+  })),
+  startIndex: _propTypes.default.number
 };
 var _default = CycleButton;
 exports.default = _default;

package/es/lib/EditableRefdataCategoryList/EditableRefdataCategoryList.js

@@ -21,6 +21,10 @@ var _hooks = require("../hooks");
 
 var _ActionList = _interopRequireDefault(require("../ActionList"));
 
+var _validators = require("../utils/validators");
+
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,7 +60,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var propTypes = {
   afterQueryCalls: _propTypes.default.object,
   catchQueryCalls: _propTypes.default.object,
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   labelOverrides: _propTypes.default.object,
   refdataEndpoint: _propTypes.default.string
 };
@@ -134,7 +138,7 @@ var EditableRefdataCategoryList = function EditableRefdataCategoryList(_ref) {
               switch (_context.prev = _context.next) {
                 case 0:
                   _context.next = 2;
-                  return err.response.json();
+                  return (0, _utils.parseErrorResponse)(err.response);
 
                 case 2:
                   errorResp = _context.sent;
@@ -242,6 +246,11 @@ var EditableRefdataCategoryList = function EditableRefdataCategoryList(_ref) {
         }
       },
       label: label,
+      validateFields: {
+        desc: function desc() {
+          return _validators.required;
+        }
+      },
       visibleFields: ['desc', 'values']
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConfirmationModal, {
       confirmLabel: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -21,6 +21,10 @@ var _hooks = require("../hooks");
 
 var _ActionList = _interopRequireDefault(require("../ActionList"));
 
+var _validators = require("../utils/validators");
+
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,7 +61,7 @@ var propTypes = {
   afterQueryCalls: _propTypes.default.object,
   catchQueryCalls: _propTypes.default.object,
   desc: _propTypes.default.string,
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   labelOverrides: _propTypes.default.object,
   refdataEndpoint: _propTypes.default.string
 };
@@ -147,7 +151,7 @@ var EditableRefdataList = function EditableRefdataList(_ref) {
               switch (_context.prev = _context.next) {
                 case 0:
                   _context.next = 2;
-                  return err.response.json();
+                  return (0, _utils.parseErrorResponse)(err.response);
 
                 case 2:
                   errorResp = _context.sent;
@@ -267,6 +271,11 @@ var EditableRefdataList = function EditableRefdataList(_ref) {
         }
       },
       label: label,
+      validateFields: {
+        label: function label() {
+          return _validators.required;
+        }
+      },
       visibleFields: ['label', 'value']
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConfirmationModal, {
       confirmLabel: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {

package/es/lib/IconSelect/IconSelect.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +9,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactIntl = require("react-intl");
@@ -15,15 +19,17 @@ var _components = require("@folio/stripes/components");
 
 var _IconSelect = _interopRequireDefault(require("../../../styles/IconSelect.css"));
 
+var _RichSelect = _interopRequireWildcard(require("../RichSelect"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["className"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -31,6 +37,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -52,21 +62,20 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 // A form component which acts as a "Select for states with corresponding icons"
-var IconSelect = function IconSelect(_ref) {
-  var _meta$initial, _meta$initial2, _selectedOption$butto;
+var IconSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _selectedOption$butto;
 
   var ariaLabel = _ref.ariaLabel,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       id = _ref.id,
-      _ref$input = _ref.input,
-      formInput = _ref$input === void 0 ? {} : _ref$input,
+      input = _ref.input,
       label = _ref.label,
       meta = _ref.meta,
       _ref$notSet = _ref.notSet,
       notSet = _ref$notSet === void 0 ? {
-    icon: "ellipsis",
-    value: "",
+    icon: 'ellipsis',
+    value: '',
     label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-kint-components.iconSelect.notSet"
     })
@@ -75,109 +84,95 @@ var IconSelect = function IconSelect(_ref) {
       _ref$options = _ref.options,
       userOptions = _ref$options === void 0 ? [] : _ref$options,
       _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required;
+      required = _ref$required === void 0 ? false : _ref$required,
+      value = _ref.value;
   // Options with notSet
-  var options = [notSet].concat(_toConsumableArray(userOptions)); // Refs
-
-  var hiddenInput = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)((_meta$initial = meta.initial) !== null && _meta$initial !== void 0 ? _meta$initial : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var findSelectedOptionByValue = function findSelectedOptionByValue(val) {
-    return options.find(function (opt) {
-      return opt.value === val;
-    });
-  };
-
-  var _useState3 = (0, _react.useState)(findSelectedOptionByValue((_meta$initial2 = meta.initial) !== null && _meta$initial2 !== void 0 ? _meta$initial2 : '')),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedOption = _useState4[0],
-      setSelectedOption = _useState4[1];
-
-  var handleChange = function handleChange(e) {
-    // Actually set the value in the form
-    formInput.onChange(e); // If the user has set up an onChange, this will ensure that that fires
-
-    if (onChange) {
-      onChange(e, e.target.value);
-    }
-  };
-
-  var renderMenu = function renderMenu(_ref2) {
-    var onToggle = _ref2.onToggle;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-      children: options.map(function (opt) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          autoFocus: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === opt.value,
-          buttonStyle: "dropdownItem",
-          id: "".concat(id, "-").concat(formInput.name, "-option-").concat(opt.value),
-          marginBottom0: true,
-          onClick: function onClick() {
-            // Trigger change event
-            (0, _components.nativeChangeFieldValue)(hiddenInput, false, opt.value); // Set internal states
-
-            setValue(opt.value);
-            setSelectedOption(findSelectedOptionByValue(opt.value)); // Close the menu on select
-
-            onToggle();
-          },
-          children: opt.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, _objectSpread(_objectSpread({
-            icon: opt.icon
-          }, opt.iconProps), {}, {
-            children: opt.label
-          })) : opt.label
-        });
-      })
-    });
-  };
-
-  var _ref3 = (_selectedOption$butto = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.buttonProps) !== null && _selectedOption$butto !== void 0 ? _selectedOption$butto : {},
-      iconButtonClassName = _ref3.className,
-      buttonProps = _objectWithoutProperties(_ref3, _excluded);
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [label || ariaLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
-      htmlFor: id,
-      id: "".concat(id, "-label"),
-      required: required,
-      className: ariaLabel && 'sr-only',
-      children: ariaLabel || label
-    }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
-      hasPadding: true,
-      placement: "bottom-start",
-      renderTrigger: function renderTrigger(_ref4) {
-        var _selectedOption$icon;
-
-        var onToggle = _ref4.onToggle,
-            triggerRef = _ref4.triggerRef,
-            keyHandler = _ref4.keyHandler,
-            ariaProps = _ref4.ariaProps,
-            getTriggerProps = _ref4.getTriggerProps;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, _objectSpread(_objectSpread(_objectSpread({
-          ref: triggerRef,
-          disabled: disabled,
-          icon: (_selectedOption$icon = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) !== null && _selectedOption$icon !== void 0 ? _selectedOption$icon : 'ellipsis',
-          marginBottom0: true,
-          onClick: onToggle,
-          onKeyDown: keyHandler,
-          type: "button"
-        }, _objectSpread({
-          className: (0, _classnames.default)(_IconSelect.default.buttonStyle, iconButtonClassName)
-        }, buttonProps)), getTriggerProps()), ariaProps));
-      },
-      renderMenu: renderMenu
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, formInput), {}, {
-      ref: hiddenInput,
-      hidden: true,
-      onChange: handleChange,
-      type: "text",
-      value: value
-    }))]
+  var options = [notSet].concat(_toConsumableArray(userOptions));
+
+  var _useSelectedOption = (0, _RichSelect.useSelectedOption)(),
+      _useSelectedOption2 = _slicedToArray(_useSelectedOption, 2),
+      richSelectRef = _useSelectedOption2[0],
+      selectedOption = _useSelectedOption2[1];
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      selectedOption: selectedOption
+    };
   });
-};
 
+  var _ref2 = (_selectedOption$butto = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.buttonProps) !== null && _selectedOption$butto !== void 0 ? _selectedOption$butto : {},
+      iconButtonClassName = _ref2.className,
+      buttonProps = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichSelect.default, {
+    ref: richSelectRef,
+    ariaLabel: ariaLabel,
+    disabled: disabled,
+    id: id,
+    input: input,
+    label: label,
+    meta: meta,
+    onChange: onChange,
+    options: options,
+    renderOption: function renderOption(opt) {
+      var _opt$label2;
+
+      if (opt.icon) {
+        var _opt$label;
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, _objectSpread(_objectSpread({
+          icon: opt.icon
+        }, opt.iconProps), {}, {
+          children: (_opt$label = opt.label) !== null && _opt$label !== void 0 ? _opt$label : opt.value
+        }));
+      }
+
+      return (_opt$label2 = opt.label) !== null && _opt$label2 !== void 0 ? _opt$label2 : opt.value;
+    },
+    renderTrigger: function renderTrigger(_ref3) {
+      var _selectedOption$icon;
+
+      var onToggle = _ref3.onToggle,
+          triggerRef = _ref3.triggerRef,
+          keyHandler = _ref3.keyHandler,
+          ariaProps = _ref3.ariaProps,
+          getTriggerProps = _ref3.getTriggerProps;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, _objectSpread(_objectSpread(_objectSpread({
+        ref: triggerRef,
+        disabled: disabled,
+        icon: (_selectedOption$icon = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) !== null && _selectedOption$icon !== void 0 ? _selectedOption$icon : 'ellipsis',
+        marginBottom0: true,
+        onClick: onToggle,
+        onKeyDown: keyHandler,
+        type: "button"
+      }, _objectSpread({
+        className: (0, _classnames.default)(_IconSelect.default.buttonStyle, iconButtonClassName)
+      }, buttonProps)), getTriggerProps()), ariaProps));
+    },
+    required: required,
+    value: value
+  });
+});
+IconSelect.propTypes = {
+  ariaLabel: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  input: _propTypes.default.object,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
+  meta: _propTypes.default.object,
+  notSet: _propTypes.default.shape({
+    icon: _propTypes.default.string,
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
+  onChange: _propTypes.default.func,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    icon: _propTypes.default.string,
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  })),
+  required: _propTypes.default.bool,
+  value: _propTypes.default.string
+};
 var _default = IconSelect;
 exports.default = _default;