@k-int/stripes-kint-components 5.36.1 → 5.37.0

package/es/lib/ResponsiveButtonGroup/ResponsiveButtonGroup.js

@@ -11,7 +11,15 @@ var _components = require("@folio/stripes/components");
 var _ResponsiveButtonGroup = _interopRequireDefault(require("../../../styles/ResponsiveButtonGroup.css"));
 var _useResponsiveButtonGroupSizing = _interopRequireDefault(require("./useResponsiveButtonGroupSizing"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "dropdownTriggerProps", "fullWidth", "id", "marginBottom0", "selectedIndex", "tagName"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
@@ -28,92 +36,92 @@ const calculateCumulativeThreshold = function (arrayOfNumbers, maximum) {
   let value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   // If all the numbers fit, return the last index
   if (arrayOfNumbers.reduce((partialSum, a) => partialSum + a, 0) <= maximum) {
-    return arrayOfNumbers?.length - 1;
+    return (arrayOfNumbers === null || arrayOfNumbers === void 0 ? void 0 : arrayOfNumbers.length) - 1;
   }
 
   // Else we'll need a down arrow button, so include that in calculations
   const nextValue = value + arrayOfNumbers[index];
-  if (nextValue + SIZE_OF_DOWN_ARROW_BUTTON <= maximum && index + 1 < arrayOfNumbers?.length) {
+  if (nextValue + SIZE_OF_DOWN_ARROW_BUTTON <= maximum && index + 1 < (arrayOfNumbers === null || arrayOfNumbers === void 0 ? void 0 : arrayOfNumbers.length)) {
     return calculateCumulativeThreshold(arrayOfNumbers, maximum, index + 1, nextValue);
   }
   return index - 1;
 };
 const ResponsiveButtonGroup = props => {
-  const {
-    children: childButtons,
-    // These MUST consist only of Button components
-    className,
-    dropdownTriggerProps = {},
-    fullWidth = false,
-    // Only bother with this when buttonGroupWidth < ContainerWidth
-    id,
-    marginBottom0,
-    // Will ONLL control the margin of the dropdown button
-    selectedIndex,
-    tagName: Tag = 'div',
-    ...rest
-  } = props;
+  const childButtons = props.children,
+    className = props.className,
+    _props$dropdownTrigge = props.dropdownTriggerProps,
+    dropdownTriggerProps = _props$dropdownTrigge === void 0 ? {} : _props$dropdownTrigge,
+    _props$fullWidth = props.fullWidth,
+    fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+    id = props.id,
+    marginBottom0 = props.marginBottom0,
+    selectedIndex = props.selectedIndex,
+    _props$tagName = props.tagName,
+    Tag = _props$tagName === void 0 ? 'div' : _props$tagName,
+    rest = _objectWithoutProperties(props, _excluded);
   const sanitizedButtons = (0, _react.useMemo)(() => {
     const arr = Array.isArray(childButtons) ? childButtons : [childButtons];
     return arr.filter(_react.isValidElement);
   }, [childButtons]);
-  const {
-    buttons,
-    cachedSizeArray,
-    containerRef,
-    containerWidth,
-    ready
-  } = (0, _useResponsiveButtonGroupSizing.default)({
-    buttons: sanitizedButtons,
-    id
-  });
+  const _useResponsiveButtonG = (0, _useResponsiveButtonGroupSizing.default)({
+      buttons: sanitizedButtons,
+      id
+    }),
+    buttons = _useResponsiveButtonG.buttons,
+    cachedSizeArray = _useResponsiveButtonG.cachedSizeArray,
+    containerRef = _useResponsiveButtonG.containerRef,
+    containerWidth = _useResponsiveButtonG.containerWidth,
+    ready = _useResponsiveButtonG.ready;
   const buttonThreshold = calculateCumulativeThreshold(cachedSizeArray, containerWidth);
   const renderActionMenuToggle = (0, _react.useCallback)(_ref => {
-    let {
-      displayButtons,
-      onToggle,
-      triggerRef,
-      keyHandler,
-      open,
-      ariaProps,
-      getTriggerProps
-    } = _ref;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    var _displayButtons$lengt;
+    let displayButtons = _ref.displayButtons,
+      onToggle = _ref.onToggle,
+      triggerRef = _ref.triggerRef,
+      keyHandler = _ref.keyHandler,
+      open = _ref.open,
+      ariaProps = _ref.ariaProps,
+      getTriggerProps = _ref.getTriggerProps;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       ref: triggerRef,
       "aria-label": "menu",
       buttonClass: (0, _classnames.default)(_ResponsiveButtonGroup.default.width100, {
-        [`${_ResponsiveButtonGroup.default.dropdownButtonClass}`]: (displayButtons?.length ?? 0) > 0
+        ["".concat(_ResponsiveButtonGroup.default.dropdownButtonClass)]: ((_displayButtons$lengt = displayButtons === null || displayButtons === void 0 ? void 0 : displayButtons.length) !== null && _displayButtons$lengt !== void 0 ? _displayButtons$lengt : 0) > 0
       }, {
-        [`${_ResponsiveButtonGroup.default.marginBottom}`]: !marginBottom0
+        ["".concat(_ResponsiveButtonGroup.default.marginBottom)]: !marginBottom0
       }, {
-        [`${_ResponsiveButtonGroup.default.marginBottom0}`]: marginBottom0
+        ["".concat(_ResponsiveButtonGroup.default.marginBottom0)]: marginBottom0
       }),
       buttonStyle: selectedIndex > buttonThreshold ? 'primary' : 'default',
       onClick: onToggle,
       onKeyDown: keyHandler,
-      type: "button",
-      ...getTriggerProps(),
-      ...ariaProps,
-      ...dropdownTriggerProps,
+      type: "button"
+    }, getTriggerProps()), ariaProps), dropdownTriggerProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
         icon: open ? 'triangle-up' : 'triangle-down',
         iconPosition: "end"
       })
-    });
+    }));
   }, [buttonThreshold, dropdownTriggerProps, marginBottom0, selectedIndex]);
-  const displayButtons = (0, _react.useMemo)(() => buttons?.slice(0, buttonThreshold + 1)?.map((button, index) => {
-    if (index === selectedIndex && !button?.buttonStyle) {
+  const displayButtons = (0, _react.useMemo)(() => {
+    var _buttons$slice;
+    return buttons === null || buttons === void 0 || (_buttons$slice = buttons.slice(0, buttonThreshold + 1)) === null || _buttons$slice === void 0 ? void 0 : _buttons$slice.map((button, index) => {
+      if (index === selectedIndex && !(button !== null && button !== void 0 && button.buttonStyle)) {
+        return /*#__PURE__*/(0, _react.cloneElement)(button, {
+          buttonStyle: 'primary'
+        });
+      }
+      return button;
+    });
+  }, [buttonThreshold, buttons, selectedIndex]);
+  const dropdownButtons = (0, _react.useMemo)(() => {
+    var _buttons$slice2;
+    return [...((_buttons$slice2 = buttons.slice(buttonThreshold + 1, buttons === null || buttons === void 0 ? void 0 : buttons.length)) === null || _buttons$slice2 === void 0 ? void 0 : _buttons$slice2.map(button => {
       return /*#__PURE__*/(0, _react.cloneElement)(button, {
-        buttonStyle: 'primary'
+        buttonStyle: 'dropdownItem'
       });
-    }
-    return button;
-  }), [buttonThreshold, buttons, selectedIndex]);
-  const dropdownButtons = (0, _react.useMemo)(() => [...buttons.slice(buttonThreshold + 1, buttons?.length)?.map(button => {
-    return /*#__PURE__*/(0, _react.cloneElement)(button, {
-      buttonStyle: 'dropdownItem'
-    });
-  })], [buttonThreshold, buttons]);
+    }))];
+  }, [buttonThreshold, buttons]);
 
   // eslint-disable-next-line react/prop-types
   const renderActionMenuContent = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
@@ -122,34 +130,33 @@ const ResponsiveButtonGroup = props => {
   const buttonsSlice = (0, _react.useMemo)(() => [...displayButtons, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
     className: _ResponsiveButtonGroup.default.dropdownClass,
     renderMenu: renderActionMenuContent,
-    renderTrigger: triggerProps => renderActionMenuToggle({
-      displayButtons,
-      ...triggerProps
-    })
+    renderTrigger: triggerProps => renderActionMenuToggle(_objectSpread({
+      displayButtons
+    }, triggerProps))
   }, "responsiveButtonGroup-dropdown-toggle")], [displayButtons, renderActionMenuContent, renderActionMenuToggle]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: containerRef,
       className: "width: 100%;"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({
       className: (0, _classnames.default)({
-        [`${_ResponsiveButtonGroup.default.hidden}`]: !ready
+        ["".concat(_ResponsiveButtonGroup.default.hidden)]: !ready
       }, _ResponsiveButtonGroup.default.buttonGroup, {
-        [`${_ResponsiveButtonGroup.default.fullWidth}`]: ready && fullWidth
+        ["".concat(_ResponsiveButtonGroup.default.fullWidth)]: ready && fullWidth
       }, className),
       style: fullWidth ? {
-        width: `${containerWidth}px`
-      } : {},
-      ...rest,
-      children: !ready || buttonThreshold === cachedSizeArray?.length - 1 ? buttons?.map((button, index) => {
-        if (index === selectedIndex && !button?.buttonStyle) {
+        width: "".concat(containerWidth, "px")
+      } : {}
+    }, rest), {}, {
+      children: !ready || buttonThreshold === (cachedSizeArray === null || cachedSizeArray === void 0 ? void 0 : cachedSizeArray.length) - 1 ? buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => {
+        if (index === selectedIndex && !(button !== null && button !== void 0 && button.buttonStyle)) {
           return /*#__PURE__*/(0, _react.cloneElement)(button, {
             buttonStyle: 'primary'
           });
         }
         return button;
       }) : buttonsSlice
-    })]
+    }))]
   });
 };
 ResponsiveButtonGroup.propTypes = propTypes;

package/es/lib/ResponsiveButtonGroup/useResponsiveButtonGroupSizing.js

@@ -9,12 +9,17 @@ var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactResizeDetector = require("react-resize-detector");
 var _lodash = require("lodash");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const useResponsiveButtonGroupSizing = _ref => {
-  let {
-    id,
-    buttons = []
-  } = _ref;
-  const eventString = 'responsive-button-group-loaded' + (id ? `-${id}` : '');
+  let id = _ref.id,
+    _ref$buttons = _ref.buttons,
+    buttons = _ref$buttons === void 0 ? [] : _ref$buttons;
+  const eventString = 'responsive-button-group-loaded' + (id ? "-".concat(id) : '');
   const loadedEvent = new Event(eventString);
   const isMounted = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
@@ -26,39 +31,48 @@ const useResponsiveButtonGroupSizing = _ref => {
 
   // Set up size measuring to be able to do fullWidth if and only if the button is too small for the container.
   // This way when the button is too _large_ for the container, we can measure it properly
-  const {
-    ref: containerRef,
-    width: containerWidth
-  } = (0, _reactResizeDetector.useResizeDetector)();
-  const [cachedSizeArray, setCachedSizeArray] = (0, _react.useState)([]);
-  const [sizeArray, setSizeArray] = (0, _react.useState)([]);
+  const _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)(),
+    containerRef = _useResizeDetector.ref,
+    containerWidth = _useResizeDetector.width;
+  const _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    cachedSizeArray = _useState2[0],
+    setCachedSizeArray = _useState2[1];
+  const _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sizeArray = _useState4[0],
+    setSizeArray = _useState4[1];
   // We also need to set up a ref for each of the buttons
   // to measure the size of each one, we can then use that for choosing where to break later.
   const refArray = buttons.map((_button, index) => {
     return node => {
       if (node !== null) {
-        const newSizeArray = sizeArray.slice(0, index).concat([node?.clientWidth ?? 0]).concat(sizeArray.slice(index + 1));
+        var _node$clientWidth;
+        const newSizeArray = sizeArray.slice(0, index).concat([(_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0]).concat(sizeArray.slice(index + 1));
         if (!(0, _isEqual.default)(sizeArray, newSizeArray)) {
           setSizeArray(newSizeArray);
         }
       }
     };
   });
-  const [ready, setReady] = (0, _react.useState)(false);
+  const _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    ready = _useState6[0],
+    setReady = _useState6[1];
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   (0, _react.useEffect)((0, _lodash.debounce)(() => {
     if (isMounted.current) {
-      if (!cachedSizeArray?.length && sizeArray?.length) {
+      if (!(cachedSizeArray !== null && cachedSizeArray !== void 0 && cachedSizeArray.length) && sizeArray !== null && sizeArray !== void 0 && sizeArray.length) {
         setCachedSizeArray(sizeArray);
         setReady(true);
         document.dispatchEvent(loadedEvent);
       }
     }
   }, 150), [cachedSizeArray, sizeArray]);
-  const returnButtons = buttons?.map((button, index) => {
+  const returnButtons = buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => {
     return /*#__PURE__*/(0, _react.cloneElement)(button, {
-      ref: refArray?.[index]
+      ref: refArray === null || refArray === void 0 ? void 0 : refArray[index]
     });
   });
   return {

package/es/lib/RichSelect/RichSelect.js

@@ -11,38 +11,59 @@ var _RichSelect = _interopRequireDefault(require("../../../styles/RichSelect.css
 var _FormattedKintMessage = _interopRequireDefault(require("../FormattedKintMessage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const RichSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    ariaLabel,
-    disabled = false,
-    dropdownProps = {},
-    id,
-    input: formInput = {},
-    intlKey: passedIntlKey,
-    intlNS: passedIntlNS,
-    label,
-    meta,
-    onChange,
-    options: userOptions = [],
-    placeholder,
-    renderMenu,
-    renderOption,
-    renderTrigger,
-    required = false,
-    value
-  } = _ref;
+  var _ref2, _meta$initial, _findSelectedOptionBy, _meta$initial2;
+  let ariaLabel = _ref.ariaLabel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    id = _ref.id,
+    _ref$input = _ref.input,
+    formInput = _ref$input === void 0 ? {} : _ref$input,
+    passedIntlKey = _ref.intlKey,
+    passedIntlNS = _ref.intlNS,
+    label = _ref.label,
+    meta = _ref.meta,
+    onChange = _ref.onChange,
+    _ref$options = _ref.options,
+    userOptions = _ref$options === void 0 ? [] : _ref$options,
+    placeholder = _ref.placeholder,
+    renderMenu = _ref.renderMenu,
+    renderOption = _ref.renderOption,
+    renderTrigger = _ref.renderTrigger,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    value = _ref.value;
   const hiddenInput = (0, _react.useRef)(null);
-  const [internalValue, setInternalValue] = (0, _react.useState)(meta?.initial ?? value ?? '');
+  const _useState = (0, _react.useState)((_ref2 = (_meta$initial = meta === null || meta === void 0 ? void 0 : meta.initial) !== null && _meta$initial !== void 0 ? _meta$initial : value) !== null && _ref2 !== void 0 ? _ref2 : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
   const findSelectedOptionByValue = (0, _react.useCallback)(val => {
     return userOptions.find(opt => opt.value === val);
   }, [userOptions]);
-  const [selectedOption, setSelectedOption] = (0, _react.useState)(findSelectedOptionByValue(meta?.initial ?? '') ?? {});
+  const _useState3 = (0, _react.useState)((_findSelectedOptionBy = findSelectedOptionByValue((_meta$initial2 = meta === null || meta === void 0 ? void 0 : meta.initial) !== null && _meta$initial2 !== void 0 ? _meta$initial2 : '')) !== null && _findSelectedOptionBy !== void 0 ? _findSelectedOptionBy : {}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOption = _useState4[0],
+    setSelectedOption = _useState4[1];
   (0, _react.useEffect)(() => {
     // We treat non-undefined value/formInput values as valid values, whereas undefined is only relevant when prop has not been provided
-    if (value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
+    if (value !== undefined && !(value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && value === internalValue)) {
       setSelectedOption(findSelectedOptionByValue(value));
       setInternalValue(value);
-    } else if (formInput?.value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
+    } else if ((formInput === null || formInput === void 0 ? void 0 : formInput.value) !== undefined && !(value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && value === internalValue)) {
       setSelectedOption(findSelectedOptionByValue(formInput.value));
       setInternalValue(formInput.value);
     }
@@ -52,15 +73,14 @@ const RichSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   (0, _react.useImperativeHandle)(ref, () => ({
     selectedOption
   }));
-  const defaultRenderTrigger = _ref2 => {
-    let {
-      onToggle,
-      triggerRef,
-      keyHandler,
-      ariaProps,
-      getTriggerProps
-    } = _ref2;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownButton, {
+  const defaultRenderTrigger = _ref3 => {
+    var _ref4, _ref5, _ref6, _selectedOption$label;
+    let onToggle = _ref3.onToggle,
+      triggerRef = _ref3.triggerRef,
+      keyHandler = _ref3.keyHandler,
+      ariaProps = _ref3.ariaProps,
+      getTriggerProps = _ref3.getTriggerProps;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownButton, _objectSpread(_objectSpread(_objectSpread({
       ref: triggerRef,
       buttonClass: _RichSelect.default.triggerButton,
       buttonStyle: "none",
@@ -69,19 +89,18 @@ const RichSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       onClick: onToggle,
       onKeyDown: keyHandler,
       paddingSide0: true,
-      type: "button",
-      ...getTriggerProps(),
-      ...ariaProps,
-      children: selectedOption?.label ?? selectedOption?.value ?? (internalValue || null) ?? placeholder ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormattedKintMessage.default, {
+      type: "button"
+    }, getTriggerProps()), ariaProps), {}, {
+      children: (_ref4 = (_ref5 = (_ref6 = (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _ref6 !== void 0 ? _ref6 : internalValue || null) !== null && _ref5 !== void 0 ? _ref5 : placeholder) !== null && _ref4 !== void 0 ? _ref4 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormattedKintMessage.default, {
         id: "pleaseSelectOption",
         intlKey: passedIntlKey,
         intlNS: passedIntlNS
       })
-    });
+    }));
   };
   const handleChange = e => {
     // Actually set the value in the form (If formInput exists)
-    if (formInput?.onChange) {
+    if (formInput !== null && formInput !== void 0 && formInput.onChange) {
       formInput.onChange(e);
     }
 
@@ -93,17 +112,18 @@ const RichSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const changeField = val => {
     (0, _components.nativeChangeFieldValue)(hiddenInput, false, val);
   };
-  const defaultRenderOption = opt => opt.label ?? opt.value;
-  const defaultRenderMenu = _ref3 => {
-    let {
-      onToggle
-    } = _ref3;
+  const defaultRenderOption = opt => {
+    var _opt$label;
+    return (_opt$label = opt.label) !== null && _opt$label !== void 0 ? _opt$label : opt.value;
+  };
+  const defaultRenderMenu = _ref7 => {
+    let onToggle = _ref7.onToggle;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
       children: userOptions.map(opt => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          autoFocus: selectedOption?.value === opt.value,
+          autoFocus: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === opt.value,
           buttonStyle: "dropdownItem",
-          id: `${id}-${formInput.name}-option-${opt.value}`,
+          id: "".concat(id, "-").concat(formInput.name, "-option-").concat(opt.value),
           marginBottom0: true,
           onClick: () => {
             // Trigger change event
@@ -121,43 +141,39 @@ const RichSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: [label || ariaLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
       className: ariaLabel && 'sr-only',
       htmlFor: id,
-      id: `${id}-label`,
+      id: "".concat(id, "-label"),
       required: required,
       children: ariaLabel || label
-    }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
+    }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, _objectSpread({
       disabled: disabled,
       hasPadding: true,
       placement: "bottom-start",
       renderMenu: menuProps => {
         if (renderMenu) {
-          return renderMenu({
-            ...menuProps,
+          return renderMenu(_objectSpread(_objectSpread({}, menuProps), {}, {
             selectedOption,
             changeField
-          });
+          }));
         } else {
           return defaultRenderMenu(menuProps);
         }
       },
       renderTrigger: triggerProps => {
         if (renderTrigger) {
-          return renderTrigger({
-            ...triggerProps,
+          return renderTrigger(_objectSpread(_objectSpread({}, triggerProps), {}, {
             selectedOption
-          });
+          }));
         } else {
           return defaultRenderTrigger(triggerProps);
         }
-      },
-      ...dropdownProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...formInput,
+      }
+    }, dropdownProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, formInput), {}, {
       ref: hiddenInput,
       hidden: true,
       onChange: handleChange,
       type: "text",
       value: internalValue
-    })]
+    }))]
   });
 });
 RichSelect.propTypes = {

package/es/lib/RichSelect/useSelectedOption.js

@@ -5,10 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const useSelectedOption = () => {
-  const [selectedOption, setSelectedOption] = (0, _react.useState)();
+  const _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedOption = _useState2[0],
+    setSelectedOption = _useState2[1];
   const ref = (0, _react.useCallback)(node => {
-    if (node !== null && selectedOption?.value !== node.selectedOption?.value) {
+    var _node$selectedOption;
+    if (node !== null && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== ((_node$selectedOption = node.selectedOption) === null || _node$selectedOption === void 0 ? void 0 : _node$selectedOption.value)) {
       setSelectedOption(node.selectedOption);
     }
   }, [selectedOption]);