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

package/es/lib/Tags/Tags.js

@@ -17,52 +17,49 @@ var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Tags = _ref => {
-  let {
-    invalidateLinks = [],
-    // If there are other queries that need invalidating, pass those here
-    labelOverrides = {},
-    link,
-    onToggle,
-    intlKey: passedIntlKey,
-    intlNS: passedIntlNS
-  } = _ref;
+  var _entity$tags3, _entity$tags$length, _entity$tags4;
+  let _ref$invalidateLinks = _ref.invalidateLinks,
+    invalidateLinks = _ref$invalidateLinks === void 0 ? [] : _ref$invalidateLinks,
+    _ref$labelOverrides = _ref.labelOverrides,
+    labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
+    link = _ref.link,
+    onToggle = _ref.onToggle,
+    passedIntlKey = _ref.intlKey,
+    passedIntlNS = _ref.intlNS;
   const kintIntl = (0, _hooks2.useKintIntl)(passedIntlKey, passedIntlNS);
   const ky = (0, _core.useOkapiKy)();
   const callout = (0, _react.useContext)(_core.CalloutContext);
   const queryClient = (0, _reactQuery.useQueryClient)();
 
   // TAG GET/POST
-  const {
-    data: {
-      tags = []
-    } = {}
-  } = (0, _hooks.useTags)([..._tagsConfig.tagNamespaceArray, link]);
+  const _useTags = (0, _hooks.useTags)([..._tagsConfig.tagNamespaceArray, link]),
+    _useTags$data = _useTags.data,
+    _useTags$data2 = _useTags$data === void 0 ? {} : _useTags$data,
+    _useTags$data2$tags = _useTags$data2.tags,
+    tags = _useTags$data2$tags === void 0 ? [] : _useTags$data2$tags;
 
   // istanbul ignore next
-  const {
-    mutateAsync: postTags
-  } = (0, _reactQuery.useMutation)(['tags', 'stripes-erm-components', 'Tags', 'postTags'], data => ky.post('tags', {
-    json: data
-  }).then(() => {
-    queryClient.invalidateQueries('tags');
-  }));
+  const _useMutation = (0, _reactQuery.useMutation)(['tags', 'stripes-erm-components', 'Tags', 'postTags'], data => ky.post('tags', {
+      json: data
+    }).then(() => {
+      queryClient.invalidateQueries('tags');
+    })),
+    postTags = _useMutation.mutateAsync;
 
   // ENTITY GET/PUT
-  const {
-    data: entity
-  } = (0, _reactQuery.useQuery)([link, 'stripes-erm-components', 'Tags'], () => ky.get(link).json());
+  const _useQuery = (0, _reactQuery.useQuery)([link, 'stripes-erm-components', 'Tags'], () => ky.get(link).json()),
+    entity = _useQuery.data;
 
   // istanbul ignore next
-  const {
-    mutateAsync: putEntity
-  } = (0, _reactQuery.useMutation)([link, 'stripes-erm-components', 'Tags', 'putEntity'], data => ky.put(link, {
-    json: data
-  }).then(() => {
-    queryClient.invalidateQueries(link);
-    if (invalidateLinks?.length) {
-      invalidateLinks.forEach(il => queryClient.invalidateQueries(il));
-    }
-  }));
+  const _useMutation2 = (0, _reactQuery.useMutation)([link, 'stripes-erm-components', 'Tags', 'putEntity'], data => ky.put(link, {
+      json: data
+    }).then(() => {
+      queryClient.invalidateQueries(link);
+      if (invalidateLinks !== null && invalidateLinks !== void 0 && invalidateLinks.length) {
+        invalidateLinks.forEach(il => queryClient.invalidateQueries(il));
+      }
+    })),
+    putEntity = _useMutation2.mutateAsync;
 
   // add tags to global list of tags
   // istanbul ignore next
@@ -84,7 +81,8 @@ const Tags = _ref => {
   // add tag to the list of entity tags
   // istanbul ignore next
   const saveEntityTags = tagsToSave => {
-    const tagListMap = (entity?.tags ?? []).map(tag => ({
+    var _entity$tags;
+    const tagListMap = ((_entity$tags = entity === null || entity === void 0 ? void 0 : entity.tags) !== null && _entity$tags !== void 0 ? _entity$tags : []).map(tag => ({
       'value': tag.value
     }));
     const tagsMap = tagsToSave.map(tag => ({
@@ -100,7 +98,8 @@ const Tags = _ref => {
     saveTags(addTags);
   };
   const onRemove = tag => {
-    const tagToDelete = (entity?.tags ?? []).filter(t => t.value.toLowerCase() === tag.toLowerCase());
+    var _entity$tags2;
+    const tagToDelete = ((_entity$tags2 = entity === null || entity === void 0 ? void 0 : entity.tags) !== null && _entity$tags2 !== void 0 ? _entity$tags2 : []).filter(t => t.value.toLowerCase() === tag.toLowerCase());
     putEntity({
       tags: [{
         id: tagToDelete[0].id,
@@ -108,7 +107,7 @@ const Tags = _ref => {
       }]
     });
   };
-  const entityTags = (entity?.tags ?? []).map(tag => tag.value.toLowerCase());
+  const entityTags = ((_entity$tags3 = entity === null || entity === void 0 ? void 0 : entity.tags) !== null && _entity$tags3 !== void 0 ? _entity$tags3 : []).map(tag => tag.value.toLowerCase());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
     defaultWidth: "20%",
     dismissible: true,
@@ -118,7 +117,7 @@ const Tags = _ref => {
       id: 'numberOfTags',
       overrideValue: labelOverrides.numberOfTags
     }, {
-      count: entity?.tags?.length ?? 0
+      count: (_entity$tags$length = entity === null || entity === void 0 || (_entity$tags4 = entity.tags) === null || _entity$tags4 === void 0 ? void 0 : _entity$tags4.length) !== null && _entity$tags$length !== void 0 ? _entity$tags$length : 0
     }),
     paneTitle: kintIntl.formatKintMessage({
       id: 'tags',

package/es/lib/Tags/Tags.test.js

@@ -23,48 +23,42 @@ describe('Tags', () => {
     }));
   });
   test('renders the expected label', () => {
-    const {
-      getByText
-    } = renderComponent;
+    const _renderComponent = renderComponent,
+      getByText = _renderComponent.getByText;
     expect(getByText('0 Tags')).toBeInTheDocument();
   });
   test('renders expected pane dismiss button ', async () => {
     await (0, _stripesErmTesting.IconButton)('Close Tags').exists();
   });
   test('renders expected open menu button ', () => {
-    const {
-      getByRole
-    } = renderComponent;
+    const _renderComponent2 = renderComponent,
+      getByRole = _renderComponent2.getByRole;
     expect(getByRole('button', {
       name: 'stripes-components.multiSelection.dropdownTriggerLabel'
     })).toBeInTheDocument();
   });
   test('renders tags heading  ', () => {
-    const {
-      getByRole
-    } = renderComponent;
+    const _renderComponent3 = renderComponent,
+      getByRole = _renderComponent3.getByRole;
     expect(getByRole('heading', {
       name: 'Tags'
     })).toBeInTheDocument();
   });
   test('renders expected region with zero tags', () => {
-    const {
-      getByRole
-    } = renderComponent;
+    const _renderComponent4 = renderComponent,
+      getByRole = _renderComponent4.getByRole;
     expect(getByRole('region', {
       name: 'Tags 0 Tags'
     })).toBeInTheDocument();
   });
   test('renders the expected multiSelectDescription', () => {
-    const {
-      getByText
-    } = renderComponent;
+    const _renderComponent5 = renderComponent,
+      getByText = _renderComponent5.getByText;
     expect(getByText('Contains a list of any selected values, followed by an autocomplete textfield for selecting additional values.')).toBeInTheDocument();
   });
   test('renders the expected label', () => {
-    const {
-      getByText
-    } = renderComponent;
+    const _renderComponent6 = renderComponent,
+      getByText = _renderComponent6.getByText;
     expect(getByText('0 items selected')).toBeInTheDocument();
   });
   test('displays the tags pane', async () => {

package/es/lib/Tags/hooks/useTags.js

@@ -9,7 +9,7 @@ var _core = require("@folio/stripes/core");
 var _tagsConfig = require("../tagsConfig");
 const useTags = (namespaceArray, options) => {
   const ky = (0, _core.useOkapiKy)();
-  const nsArray = namespaceArray ?? _tagsConfig.tagNamespaceArray;
+  const nsArray = namespaceArray !== null && namespaceArray !== void 0 ? namespaceArray : _tagsConfig.tagNamespaceArray;
   return (0, _reactQuery.useQuery)(nsArray, () => ky.get(_tagsConfig.defaultTagQuery).json(), options);
 };
 var _default = exports.default = useTags;

package/es/lib/Tags/hooks/useTagsEnabled.js

@@ -28,28 +28,27 @@ const tagsEnabledQueryKey = exports.tagsEnabledQueryKey = TAGS_ENABLED_CONFIG_QU
  */
 
 const useTagsEnabled = function () {
-  let {
-    useSettings = false
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$useSettings = _ref.useSettings,
+    useSettings = _ref$useSettings === void 0 ? false : _ref$useSettings;
   const ky = (0, _core.useOkapiKy)();
   const endpoint = useSettings ? _endpoints.SETTINGS_ENDPOINT : _endpoints.CONFIG_ENDPOINT;
   const query = useSettings ? TAGS_SETTINGS_QUERY : TAGS_CONFIG_QUERY;
   const queryKey = useSettings ? TAGS_ENABLED_QUERY_KEY : TAGS_ENABLED_CONFIG_QUERY_KEY;
-  const queryObject = (0, _reactQuery.useQuery)(queryKey, () => ky.get(`${endpoint}?${query}`).json());
+  const queryObject = (0, _reactQuery.useQuery)(queryKey, () => ky.get("".concat(endpoint, "?").concat(query)).json());
   if (useSettings) {
+    var _queryObject$data;
     // mod-settings returns this value as a boolean instead of as a string, so the below approach !value is not applicable.
-    const value = queryObject?.data?.items?.[0]?.value;
+    const value = queryObject === null || queryObject === void 0 || (_queryObject$data = queryObject.data) === null || _queryObject$data === void 0 || (_queryObject$data = _queryObject$data.items) === null || _queryObject$data === void 0 || (_queryObject$data = _queryObject$data[0]) === null || _queryObject$data === void 0 ? void 0 : _queryObject$data.value;
     return value === undefined || value === null || value;
   }
-  const {
-    data: {
-      configs: {
-        0: {
-          value
-        } = {}
-      } = []
-    } = {}
-  } = queryObject;
+  const _queryObject$data2 = queryObject.data,
+    _queryObject$data3 = _queryObject$data2 === void 0 ? {} : _queryObject$data2,
+    _queryObject$data3$co = _queryObject$data3.configs,
+    _queryObject$data3$co2 = _queryObject$data3$co === void 0 ? [] : _queryObject$data3$co,
+    _queryObject$data3$co3 = _queryObject$data3$co2[0],
+    _queryObject$data3$co4 = _queryObject$data3$co3 === void 0 ? {} : _queryObject$data3$co3,
+    value = _queryObject$data3$co4.value;
   return !value || value === 'true';
 };
 var _default = exports.default = useTagsEnabled;

package/es/lib/Tags/tagsConfig.js

@@ -7,4 +7,4 @@ exports.tagsPath = exports.tagNamespaceArray = exports.defaultTagsParams = expor
 const tagNamespaceArray = exports.tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
 const tagsPath = exports.tagsPath = 'tags';
 const defaultTagsParams = exports.defaultTagsParams = ['limit=1000', 'query=cql.allRecords%3D1%20sortby%20label'];
-const defaultTagQuery = exports.defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;
+const defaultTagQuery = exports.defaultTagQuery = "".concat(tagsPath, "?").concat(defaultTagsParams === null || defaultTagsParams === void 0 ? void 0 : defaultTagsParams.join('&'));

package/es/lib/Typedown/Typedown.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _get = _interopRequireDefault(require("lodash/get"));
+var _get3 = _interopRequireDefault(require("lodash/get"));
 var _components = require("@folio/stripes/components");
 var _SearchField = _interopRequireDefault(require("../SearchField"));
 var _TypeDown = _interopRequireDefault(require("../../../styles/TypeDown.css"));
@@ -15,62 +15,95 @@ var _typedownHooks = require("../hooks/typedownHooks");
 var _selectorSafe = _interopRequireDefault(require("../utils/selectorSafe"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 Typedown = _ref => {
-  let {
-    className,
-    dataOptions,
-    displayClearItem = true,
-    displayValueWhileOpen = true,
-    dropdownPlacement = 'bottom-start',
-    endOfList,
-    getDisplayValue,
-    // Can overrule displayValue entirely
-    id,
-    initialOpenDelay = 800,
-    // Initial opening delay of 800ms (handles any stripes animations)
-    input,
-    isSelected,
-    filterPath,
-    label,
-    meta,
-    onChange,
-    onType,
-    renderFooter = null,
-    renderHeader = null,
-    renderListItem = null,
-    renderTrigger = null,
-    required,
-    selectedStyles,
-    // A way to pass any styles that need to be applied globally on selection
-    uniqueIdentificationPath = 'id'
-  } = _ref;
-  const selectedUniqueId = (0, _get.default)(input.value, uniqueIdentificationPath);
-  const [selectedValue, setSelectedValue] = (0, _react.useState)(input.value); // Track what's been selected in state as well
+  let _ref$additionalInfo = _ref.additionalInfo,
+    additionalInfo = _ref$additionalInfo === void 0 ? {} : _ref$additionalInfo,
+    className = _ref.className,
+    dataOptions = _ref.dataOptions,
+    _ref$displayClearItem = _ref.displayClearItem,
+    displayClearItem = _ref$displayClearItem === void 0 ? true : _ref$displayClearItem,
+    _ref$displayValueWhil = _ref.displayValueWhileOpen,
+    displayValueWhileOpen = _ref$displayValueWhil === void 0 ? true : _ref$displayValueWhil,
+    _ref$dropdownPlacemen = _ref.dropdownPlacement,
+    dropdownPlacement = _ref$dropdownPlacemen === void 0 ? 'bottom-start' : _ref$dropdownPlacemen,
+    endOfList = _ref.endOfList,
+    getDisplayValue = _ref.getDisplayValue,
+    id = _ref.id,
+    _ref$initialOpenDelay = _ref.initialOpenDelay,
+    initialOpenDelay = _ref$initialOpenDelay === void 0 ? 800 : _ref$initialOpenDelay,
+    input = _ref.input,
+    isSelected = _ref.isSelected,
+    filterPath = _ref.filterPath,
+    label = _ref.label,
+    meta = _ref.meta,
+    onChange = _ref.onChange,
+    onType = _ref.onType,
+    _ref$renderWithOption = _ref.renderWithOptions,
+    renderWithOptions = _ref$renderWithOption === void 0 ? false : _ref$renderWithOption,
+    _ref$renderFooter = _ref.renderFooter,
+    renderFooter = _ref$renderFooter === void 0 ? null : _ref$renderFooter,
+    _ref$renderHeader = _ref.renderHeader,
+    renderHeader = _ref$renderHeader === void 0 ? null : _ref$renderHeader,
+    _ref$renderListItem = _ref.renderListItem,
+    renderListItem = _ref$renderListItem === void 0 ? null : _ref$renderListItem,
+    _ref$renderTrigger = _ref.renderTrigger,
+    renderTrigger = _ref$renderTrigger === void 0 ? null : _ref$renderTrigger,
+    required = _ref.required,
+    selectedStyles = _ref.selectedStyles,
+    _ref$uniqueIdentifica = _ref.uniqueIdentificationPath,
+    uniqueIdentificationPath = _ref$uniqueIdentifica === void 0 ? 'id' : _ref$uniqueIdentifica;
+  const selectedUniqueId = (0, _get3.default)(input.value, uniqueIdentificationPath);
+  const _useState = (0, _react.useState)(input.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1]; // Track what's been selected in state as well
 
   // Display data needs to be in line with data options but also able to react to default handleType
-  const [displayData, setDisplayData] = (0, _react.useState)(dataOptions);
+  const _useState3 = (0, _react.useState)(dataOptions),
+    _useState4 = _slicedToArray(_useState3, 2),
+    displayData = _useState4[0],
+    setDisplayData = _useState4[1];
 
   // keep track of what we've typed and whether we've typed an exact match or not
-  const [currentlyTyped, setCurrentlyTyped] = (0, _react.useState)('');
-  const [exactMatch, setExactMatch] = (0, _react.useState)(false);
+  const _useState5 = (0, _react.useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentlyTyped = _useState6[0],
+    setCurrentlyTyped = _useState6[1];
+  const _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    exactMatch = _useState8[0],
+    setExactMatch = _useState8[1];
   (0, _react.useEffect)(() => {
     setDisplayData(dataOptions);
   }, [dataOptions]);
 
   // Setup default handleType
   const handleType = (0, _react.useCallback)(e => {
-    const regex = new RegExp(`${e.target.value.toLowerCase()}`);
+    var _e$target, _e$target2;
+    const regex = new RegExp("".concat(e.target.value.toLowerCase()));
     if (onType) {
       onType(e);
-    } else if (filterPath && e?.target?.value) {
-      setDisplayData(dataOptions.filter(item => (0, _get.default)(item, filterPath)?.toLowerCase()?.match(regex)));
-    } else if (e?.target?.value) {
-      setDisplayData(dataOptions.filter(item => (0, _get.default)(item, uniqueIdentificationPath)?.toLowerCase()?.match(regex)));
+    } else if (filterPath && e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.value) {
+      setDisplayData(dataOptions.filter(item => {
+        var _get;
+        return (_get = (0, _get3.default)(item, filterPath)) === null || _get === void 0 || (_get = _get.toLowerCase()) === null || _get === void 0 ? void 0 : _get.match(regex);
+      }));
+    } else if (e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && _e$target2.value) {
+      setDisplayData(dataOptions.filter(item => {
+        var _get2;
+        return (_get2 = (0, _get3.default)(item, uniqueIdentificationPath)) === null || _get2 === void 0 || (_get2 = _get2.toLowerCase()) === null || _get2 === void 0 ? void 0 : _get2.match(regex);
+      }));
     } else {
       setDisplayData(dataOptions);
     }
     setCurrentlyTyped(e.target.value);
-    if (displayData.length === 1 && (0, _get.default)(displayData[0], filterPath) === e.target.value) {
+    if (displayData.length === 1 && (0, _get3.default)(displayData[0], filterPath) === e.target.value) {
       setExactMatch(true);
     } else {
       setExactMatch(false);
@@ -78,35 +111,39 @@ const Typedown = _ref => {
   }, [dataOptions, displayData, filterPath, onType, uniqueIdentificationPath]);
 
   // Hook to set up all the essentials
-  const {
-    refs: {
-      listRef,
-      triggerRef,
-      triggerComponentRef,
-      overlayRef,
-      footerRef,
-      headerRef
-    },
-    handlers: {
-      handleNextFocus
-    },
-    variables: {
-      open,
-      portal,
-      resizeRef,
-      searchWidth
-    }
-  } = (0, _typedownHooks.useTypedown)(input.name, {
-    dataOptions,
-    timeout: initialOpenDelay
-  });
+  const _useTypedown = (0, _typedownHooks.useTypedown)(input.name, {
+      dataOptions,
+      timeout: initialOpenDelay
+    }),
+    _useTypedown$refs = _useTypedown.refs,
+    listRef = _useTypedown$refs.listRef,
+    triggerRef = _useTypedown$refs.triggerRef,
+    triggerComponentRef = _useTypedown$refs.triggerComponentRef,
+    overlayRef = _useTypedown$refs.overlayRef,
+    footerRef = _useTypedown$refs.footerRef,
+    headerRef = _useTypedown$refs.headerRef,
+    handleNextFocus = _useTypedown.handlers.handleNextFocus,
+    _useTypedown$variable = _useTypedown.variables,
+    open = _useTypedown$variable.open,
+    portal = _useTypedown$variable.portal,
+    resizeRef = _useTypedown$variable.resizeRef,
+    searchWidth = _useTypedown$variable.searchWidth;
   const renderItem = (0, _react.useCallback)(function (option) {
     let optionIsSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _TypeDown.default.listItem,
-      children: renderListItem ? renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue) : (0, _get.default)(option, uniqueIdentificationPath)
+      children: renderListItem ? renderWithOptions ? renderListItem({
+        additionalInfo,
+        option,
+        currentlyTyped,
+        exactMatch,
+        optionIsSelected,
+        selectedValue
+      }) :
+      // DEPRECATED see above
+      renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue, additionalInfo) : (0, _get3.default)(option, uniqueIdentificationPath)
     });
-  }, [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
+  }, [additionalInfo, currentlyTyped, exactMatch, renderListItem, renderWithOptions, selectedValue, uniqueIdentificationPath]);
   const handleChange = (0, _react.useCallback)(value => {
     input.onChange(value);
     setSelectedValue(value);
@@ -115,10 +152,10 @@ const Typedown = _ref => {
     }
   }, [input, onChange]);
   const renderTypedownTrigger = () => {
-    const triggerComponentId = `typedown-trigger-${(0, _selectorSafe.default)(input.name)}`;
+    const triggerComponentId = "typedown-trigger-".concat((0, _selectorSafe.default)(input.name));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: triggerRef,
-      id: `typedown-parent-${(0, _selectorSafe.default)(input.name)}-trigger`,
+      id: "typedown-parent-".concat((0, _selectorSafe.default)(input.name), "-trigger"),
       children: renderTrigger ? renderTrigger({
         // Pass all props in that searchfield uses.
         handleType,
@@ -145,15 +182,16 @@ const Typedown = _ref => {
   const dropDown = (0, _react.useCallback)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _TypeDown.default.dropdownMenu,
-      id: `typedown-parent-${(0, _selectorSafe.default)(input.name)}-menu`,
+      id: "typedown-parent-".concat((0, _selectorSafe.default)(input.name), "-menu"),
       style: {
-        '--searchWidth': `${searchWidth}px`
+        '--searchWidth': "".concat(searchWidth, "px")
       },
       children: [renderHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: headerRef,
         className: _TypeDown.default.header,
-        id: `typedown-header-${(0, _selectorSafe.default)(input.name)}`,
+        id: "typedown-header-".concat((0, _selectorSafe.default)(input.name)),
         children: renderHeader({
+          additionalInfo,
           currentlyTyped,
           displayData,
           handleType,
@@ -169,13 +207,13 @@ const Typedown = _ref => {
          * This does NOT prevent item click, as e.propagation is not prevented.
          */,
         onMouseDown: e => e.preventDefault(),
-        children: displayData?.length ? displayData?.map((d, _index) => {
-          const isSelectedEval = isSelected ? isSelected(input.value, d) : (0, _get.default)(input.value, uniqueIdentificationPath) === (0, _get.default)(d, uniqueIdentificationPath);
-          const selectedCSS = selectedStyles ?? _TypeDown.default.selectedMenuButton;
-          const uniqueButtonKey = `typedown-button-[${(0, _get.default)(d, uniqueIdentificationPath)}]`;
+        children: displayData !== null && displayData !== void 0 && displayData.length ? displayData === null || displayData === void 0 ? void 0 : displayData.map((d, _index) => {
+          const isSelectedEval = isSelected ? isSelected(input.value, d) : (0, _get3.default)(input.value, uniqueIdentificationPath) === (0, _get3.default)(d, uniqueIdentificationPath);
+          const selectedCSS = selectedStyles !== null && selectedStyles !== void 0 ? selectedStyles : _TypeDown.default.selectedMenuButton;
+          const uniqueButtonKey = "typedown-button-[".concat((0, _get3.default)(d, uniqueIdentificationPath), "]");
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             className: (0, _classnames.default)(_TypeDown.default.fullWidth, _TypeDown.default.menuButton, {
-              [`${selectedCSS}`]: isSelectedEval
+              ["".concat(selectedCSS)]: isSelectedEval
             }),
             "data-selected": isSelectedEval,
             id: uniqueButtonKey,
@@ -190,11 +228,18 @@ const Typedown = _ref => {
       }), renderFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: footerRef,
         className: _TypeDown.default.footer,
-        id: `typedown-footer-${(0, _selectorSafe.default)(input.name)}`,
-        children: renderFooter(displayData, currentlyTyped, exactMatch)
+        id: "typedown-footer-".concat((0, _selectorSafe.default)(input.name)),
+        children: renderWithOptions ? renderFooter({
+          additionalInfo,
+          displayData,
+          currentlyTyped,
+          exactMatch
+        }) :
+        // DEPRECATED, see above
+        renderFooter(displayData, currentlyTyped, exactMatch, additionalInfo)
       })]
     });
-  }, [currentlyTyped, displayData, endOfList, exactMatch, footerRef, handleChange, handleNextFocus, handleType, headerRef, input.name, input.value, isSelected, listRef, renderFooter, renderHeader, renderItem, searchWidth, selectedStyles, uniqueIdentificationPath]);
+  }, [additionalInfo, currentlyTyped, displayData, endOfList, exactMatch, footerRef, handleChange, handleNextFocus, handleType, headerRef, input.name, input.value, isSelected, listRef, renderFooter, renderHeader, renderItem, renderWithOptions, searchWidth, selectedStyles, uniqueIdentificationPath]);
   const renderSelectedItem = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -219,7 +264,7 @@ const Typedown = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: resizeRef,
     className: (0, _classnames.default)(_TypeDown.default.typedown, className),
-    id: `typedown-id-${id}`,
+    id: "typedown-id-".concat(id),
     children: [renderTypedownTrigger(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popper, {
       anchorRef: triggerRef,
       className: (0, _classnames.default)(_TypeDown.default.dropdown, _TypeDown.default.fullWidth),
@@ -249,10 +294,14 @@ const Typedown = _ref => {
   });
 };
 Typedown.propTypes = {
+  additionalInfo: _propTypes.default.object,
+  // In TS this will need to be a generic passed in on the type I guess :/
   className: _propTypes.default.string,
   dataOptions: _propTypes.default.arrayOf(_propTypes.default.object),
+  // In TS this again will need to be a generic type on the Typedown
   displayClearItem: _propTypes.default.bool,
   displayValueWhileOpen: _propTypes.default.bool,
+  dropdownPlacement: _propTypes.default.string,
   endOfList: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.element]),
   filterPath: _propTypes.default.string,
   getDisplayValue: _propTypes.default.func,
@@ -268,6 +317,7 @@ Typedown.propTypes = {
   renderFooter: _propTypes.default.func,
   renderListItem: _propTypes.default.func,
   renderTrigger: _propTypes.default.func,
+  renderWithOptions: _propTypes.default.bool,
   required: _propTypes.default.bool,
   selectedStyles: _propTypes.default.string,
   uniqueIdentificationPath: _propTypes.default.string

package/es/lib/hooks/__mocks__/index.js

@@ -4,14 +4,18 @@ var _refdata = _interopRequireDefault(require("../../../../test/jest/refdata"));
 var _customProperties = _interopRequireDefault(require("../../../../test/jest/customProperties"));
 var _useKintIntl = _interopRequireDefault(require("../intlHooks/useKintIntl"));
 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); }
 /* EXAMPLE Grab actual hooks for anything not mocked here */
 const hooks = jest.requireActual('../index');
 
 // We have to do this up here too so that our passed useKintIntl
 // ALSO has a mocked useIntlKeyStore... I think anyway
 jest.mock('../intlHooks/useIntlKeyStore', () => () => () => 'ui-test-implementor');
-module.exports = {
-  ...hooks,
+module.exports = _objectSpread(_objectSpread({}, hooks), {}, {
   useRefdata: () => _refdata.default,
   useTemplates: () => [],
   // We should set up some templates to test this properly
@@ -22,4 +26,4 @@ module.exports = {
   useMutateCustomProperties: () => [],
   useIntlKeyStore: () => () => () => 'ui-test-implementor',
   useKintIntl: _useKintIntl.default // Use the "proper" useKintIntl but with a mocked intlKeyStore which returns the ui-test-implementor
-};
+});

package/es/lib/hooks/__mocks__/useMutateGeneric.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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); }
+const useMutateGeneric = jest.fn(props => {
+  /* * We return an object containing jest functions.
+   * This mimics the structure of the real hook: { post, put, delete }
+   */
+  return _objectSpread({
+    post: jest.fn(() => Promise.resolve()),
+    put: jest.fn(() => Promise.resolve()),
+    delete: jest.fn(() => Promise.resolve())
+  }, props);
+});
+var _default = exports.default = useMutateGeneric;