@k-int/stripes-kint-components 3.2.3 → 3.2.4

package/es/lib/RichSelect/RichSelect.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -12,80 +11,56 @@ var _RichSelect = _interopRequireDefault(require("../../../styles/RichSelect.css
 var _FormattedKintMessage = _interopRequireDefault(require("../FormattedKintMessage"));
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-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; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var RichSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref2, _meta$initial, _findSelectedOptionBy, _meta$initial2;
-  var 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;
-  var hiddenInput = (0, _react.useRef)(null);
-  var _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];
-  var findSelectedOptionByValue = (0, _react.useCallback)(function (val) {
-    return userOptions.find(function (opt) {
-      return opt.value === val;
-    });
+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;
+  const hiddenInput = (0, _react.useRef)(null);
+  const [internalValue, setInternalValue] = (0, _react.useState)(meta?.initial ?? value ?? '');
+  const findSelectedOptionByValue = (0, _react.useCallback)(val => {
+    return userOptions.find(opt => opt.value === val);
   }, [userOptions]);
-  var _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)(function () {
+  const [selectedOption, setSelectedOption] = (0, _react.useState)(findSelectedOptionByValue(meta?.initial ?? '') ?? {});
+  (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 === null || selectedOption === void 0 ? void 0 : selectedOption.value) && value === internalValue)) {
+    if (value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
       setSelectedOption(findSelectedOptionByValue(value));
       setInternalValue(value);
-    } else if ((formInput === null || formInput === void 0 ? void 0 : formInput.value) !== undefined && !(value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && value === internalValue)) {
+    } else if (formInput?.value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
       setSelectedOption(findSelectedOptionByValue(formInput.value));
       setInternalValue(formInput.value);
     }
   }, [formInput, value, internalValue, selectedOption, findSelectedOptionByValue]);
 
   // Way to grab internal selectedOption state, thereby avoiding having to reparse options for it
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      selectedOption: selectedOption
-    };
-  });
-  var defaultRenderTrigger = function defaultRenderTrigger(_ref3) {
-    var _ref4, _ref5, _ref6, _selectedOption$label;
-    var 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({
+  (0, _react.useImperativeHandle)(ref, () => ({
+    selectedOption
+  }));
+  const defaultRenderTrigger = _ref2 => {
+    let {
+      onToggle,
+      triggerRef,
+      keyHandler,
+      ariaProps,
+      getTriggerProps
+    } = _ref2;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownButton, {
       ref: triggerRef,
       buttonClass: _RichSelect.default.triggerButton,
       buttonStyle: "none",
@@ -94,18 +69,19 @@ var RichSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: onToggle,
       onKeyDown: keyHandler,
       paddingSide0: true,
-      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, {
+      type: "button",
+      ...getTriggerProps(),
+      ...ariaProps,
+      children: selectedOption?.label ?? selectedOption?.value ?? (internalValue || null) ?? placeholder ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormattedKintMessage.default, {
         id: "pleaseSelectOption",
         intlKey: passedIntlKey,
         intlNS: passedIntlNS
       })
-    }));
+    });
   };
-  var handleChange = function handleChange(e) {
+  const handleChange = e => {
     // Actually set the value in the form (If formInput exists)
-    if (formInput !== null && formInput !== void 0 && formInput.onChange) {
+    if (formInput?.onChange) {
       formInput.onChange(e);
     }
 
@@ -114,23 +90,22 @@ var RichSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onChange(e, e.target.value);
     }
   };
-  var changeField = function changeField(val) {
+  const changeField = val => {
     (0, _components.nativeChangeFieldValue)(hiddenInput, false, val);
   };
-  var defaultRenderOption = function defaultRenderOption(opt) {
-    var _opt$label;
-    return (_opt$label = opt.label) !== null && _opt$label !== void 0 ? _opt$label : opt.value;
-  };
-  var defaultRenderMenu = function defaultRenderMenu(_ref7) {
-    var onToggle = _ref7.onToggle;
+  const defaultRenderOption = opt => opt.label ?? opt.value;
+  const defaultRenderMenu = _ref3 => {
+    let {
+      onToggle
+    } = _ref3;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-      children: userOptions.map(function (opt) {
+      children: userOptions.map(opt => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          autoFocus: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === opt.value,
+          autoFocus: selectedOption?.value === opt.value,
           buttonStyle: "dropdownItem",
-          id: "".concat(id, "-").concat(formInput.name, "-option-").concat(opt.value),
+          id: `${id}-${formInput.name}-option-${opt.value}`,
           marginBottom0: true,
-          onClick: function onClick() {
+          onClick: () => {
             // Trigger change event
             changeField(opt.value);
 
@@ -146,39 +121,43 @@ var RichSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     children: [label || ariaLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
       className: ariaLabel && 'sr-only',
       htmlFor: id,
-      id: "".concat(id, "-label"),
+      id: `${id}-label`,
       required: required,
       children: ariaLabel || label
-    }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, _objectSpread({
+    }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
       disabled: disabled,
       hasPadding: true,
       placement: "bottom-start",
-      renderMenu: function renderMenu(menuProps) {
-        if (_renderMenu) {
-          return _renderMenu(_objectSpread(_objectSpread({}, menuProps), {}, {
-            selectedOption: selectedOption,
-            changeField: changeField
-          }));
+      renderMenu: menuProps => {
+        if (renderMenu) {
+          return renderMenu({
+            ...menuProps,
+            selectedOption,
+            changeField
+          });
         } else {
           return defaultRenderMenu(menuProps);
         }
       },
-      renderTrigger: function renderTrigger(triggerProps) {
-        if (_renderTrigger) {
-          return _renderTrigger(_objectSpread(_objectSpread({}, triggerProps), {}, {
-            selectedOption: selectedOption
-          }));
+      renderTrigger: triggerProps => {
+        if (renderTrigger) {
+          return renderTrigger({
+            ...triggerProps,
+            selectedOption
+          });
         } else {
           return defaultRenderTrigger(triggerProps);
         }
-      }
-    }, dropdownProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, formInput), {}, {
+      },
+      ...dropdownProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ...formInput,
       ref: hiddenInput,
       hidden: true,
       onChange: handleChange,
       type: "text",
       value: internalValue
-    }))]
+    })]
   });
 });
 RichSelect.propTypes = {
@@ -203,5 +182,4 @@ RichSelect.propTypes = {
   required: _propTypes.default.bool,
   value: _propTypes.default.string
 };
-var _default = RichSelect;
-exports.default = _default;
+var _default = exports.default = RichSelect;

package/es/lib/RichSelect/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _RichSelect.default;
   }
 });
 Object.defineProperty(exports, "useSelectedOption", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useSelectedOption.default;
   }
 });

package/es/lib/RichSelect/useSelectedOption.js

@@ -5,24 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-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."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-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; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var useSelectedOption = function useSelectedOption() {
-  var _useState = (0, _react.useState)(),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var ref = (0, _react.useCallback)(function (node) {
-    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)) {
+const useSelectedOption = () => {
+  const [selectedOption, setSelectedOption] = (0, _react.useState)();
+  const ref = (0, _react.useCallback)(node => {
+    if (node !== null && selectedOption?.value !== node.selectedOption?.value) {
       setSelectedOption(node.selectedOption);
     }
   }, [selectedOption]);
   return [ref, selectedOption];
 };
-var _default = useSelectedOption;
-exports.default = _default;
+var _default = exports.default = useSelectedOption;