@uncinc/uncinc-react-kitchen-sink 2.4.0 → 2.4.2

package/dist/components/SearchKit/index.js

@@ -1,42 +1,58 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { SearchkitProvider, SearchkitClient } from '@searchkit/client';
-import PropTypes from 'prop-types';
-import Query from './Query';
-import SearchField from './SearchField';
-import SearchPagination from './SearchPagination';
-import SearchResults from './SearchResults';
-import SearchFacets from './SearchFacets';
-import SearchSelectedFilters from './SearchSelectedFilters';
-const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
-  data: data,
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
-  data: data,
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchResults, {
-  data: data
-}), /*#__PURE__*/React.createElement(SearchPagination, {
-  data: data
-}));
-const SearchKit = ({
-  query,
-  uri,
-  pageSize = 10,
-  useRouting = true,
-  defaultFilters = [],
-  defaultQuery = '',
-  children,
-  defaultSorting = 'relevance'
-}) => {
-  const client = useMemo(() => {
-    return new ApolloClient({
+"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
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("@apollo/client");
+var _client2 = require("@searchkit/client");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Query = _interopRequireDefault(require("./Query"));
+var _SearchField = _interopRequireDefault(require("./SearchField"));
+var _SearchPagination = _interopRequireDefault(require("./SearchPagination"));
+var _SearchResults = _interopRequireDefault(require("./SearchResults"));
+var _SearchFacets = _interopRequireDefault(require("./SearchFacets"));
+var _SearchSelectedFilters = _interopRequireDefault(require("./SearchSelectedFilters"));
+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 _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; }
+var defaultChildren = function defaultChildren(data, loading) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchField.default, null), /*#__PURE__*/_react.default.createElement(_SearchFacets.default, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/_react.default.createElement(_SearchSelectedFilters.default, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+    data: data
+  }), /*#__PURE__*/_react.default.createElement(_SearchPagination.default, {
+    data: data
+  }));
+};
+var SearchKit = function SearchKit(_ref) {
+  var query = _ref.query,
+    uri = _ref.uri,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    _ref$useRouting = _ref.useRouting,
+    useRouting = _ref$useRouting === void 0 ? true : _ref$useRouting,
+    _ref$defaultFilters = _ref.defaultFilters,
+    defaultFilters = _ref$defaultFilters === void 0 ? [] : _ref$defaultFilters,
+    _ref$defaultQuery = _ref.defaultQuery,
+    defaultQuery = _ref$defaultQuery === void 0 ? '' : _ref$defaultQuery,
+    children = _ref.children,
+    _ref$defaultSorting = _ref.defaultSorting,
+    defaultSorting = _ref$defaultSorting === void 0 ? 'relevance' : _ref$defaultSorting;
+  var client = (0, _react.useMemo)(function () {
+    return new _client.ApolloClient({
       uri: uri,
-      cache: new InMemoryCache()
+      cache: new _client.InMemoryCache()
     });
   }, [uri]);
-  const skClient = useMemo(() => {
-    const skClient = new SearchkitClient();
+  var skClient = (0, _react.useMemo)(function () {
+    var skClient = new _client2.SearchkitClient();
     skClient.updateBaseSearchState({
       filters: defaultFilters,
       query: defaultQuery,
@@ -48,30 +64,33 @@ const SearchKit = ({
     });
     return skClient;
   }, [useRouting, defaultFilters, defaultQuery, pageSize, defaultSorting]);
-  return /*#__PURE__*/React.createElement(ApolloProvider, {
+  return /*#__PURE__*/_react.default.createElement(_client.ApolloProvider, {
     client: client
-  }, /*#__PURE__*/React.createElement(SearchkitProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_client2.SearchkitProvider, {
     client: skClient,
-    key: `${defaultQuery}-${defaultFilters.toString()}`
-  }, /*#__PURE__*/React.createElement(Query, {
+    key: "".concat(defaultQuery, "-").concat(defaultFilters.toString())
+  }, /*#__PURE__*/_react.default.createElement(_Query.default, {
     query: query,
     useRouting: useRouting
-  }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
+  }, function (data, loading) {
+    return children ? children(data, loading) : defaultChildren(data, loading);
+  })));
 };
 SearchKit.propTypes = {
-  uri: PropTypes.string,
-  pageSize: PropTypes.number,
-  useRouting: PropTypes.bool,
-  defaultFilters: PropTypes.object,
-  defaultQuery: PropTypes.string,
-  defaultSorting: PropTypes.string
+  uri: _propTypes.default.string,
+  pageSize: _propTypes.default.number,
+  useRouting: _propTypes.default.bool,
+  defaultFilters: _propTypes.default.object,
+  defaultQuery: _propTypes.default.string,
+  defaultSorting: _propTypes.default.string
 };
 SearchKit.defaultProps = {
   uri: null,
-  pageSize: null,
-  useRouting: null,
-  defaultFilters: null,
-  defaultQuery: null,
-  defaultSorting: null
+  pageSize: 10,
+  useRouting: true,
+  defaultFilters: [],
+  defaultQuery: '',
+  defaultSorting: 'relevance'
 };
-export default SearchKit;
+var _default = SearchKit;
+exports.default = _default;

package/dist/components/SearchKit/stories.js

@@ -1,149 +1,92 @@
-import React, { useState } from 'react';
-import { useSearchkit } from '@searchkit/client';
-import classNames from 'classnames';
-import SearchKit from '.';
-import SearchField from './SearchField';
-import SearchPagination from './SearchPagination';
-import SearchResults from './SearchResults';
-import SearchFacets from './SearchFacets';
-import SearchSelectedFilters from './SearchSelectedFilters';
-import SearchReset from './SearchReset';
-import SearchSorting from './SearchSorting';
-import SearchLoadMore from './SearchLoadMore';
-export default {
-  title: 'Molecules/SearchKit'
-};
-const query = `
-  query contentResultSet($query: String, $filters: [SKFiltersSet], $page: SKPageInput, $sortBy: String) {
-    content {
-      results(query: $query, filters: $filters) {
-        summary {
-          total
-          sortOptions {
-            id
-            label
-          }
-          appliedFilters {
-            id
-            identifier
-            display
-            label
-            ... on DateRangeSelectedFilter {
-              dateMin
-              dateMax
-            }
-
-            ... on NumericRangeSelectedFilter {
-              min
-              max
-            }
+"use strict";
 
-            ... on ValueSelectedFilter {
-              value
-            }
-          }
-          query
-        }
-        hits(page: $page, sortBy: $sortBy) {
-          sortedBy
-          page {
-            total
-            totalPages
-            pageNumber
-            from
-            size
-          }
-          items {
-            id
-            ... on ContentResultHit {
-              fields {
-                nid
-                title
-                type
-                summary
-                milestone_summary
-                url
-                author_name
-                created
-                image_style_uri
-                field_article_type_name
-                field_download_type_name
-                field_elearning_type_name
-                field_event_type_name
-                field_intervention_type_name
-                field_research_type_name
-                field_practicalexample_type_name
-                field_tool_type_name
-                field_publication_date
-                field_domain_access
-                field_milestone_label
-                combined_types
-              }
-            }
-          }
-        }
-        facets {
-          identifier
-          type
-          label
-          display
-          entries {
-            label
-            count
-          }
-        }
-      }
-    }
-  }
-`;
-const SearchItem = ({
-  item
-}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, item.fields.title[0]));
-const SearchHeader = ({
-  data
-}) => /*#__PURE__*/React.createElement("h2", null, data.results.summary.total, " Resultaten");
-export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
-  uri: "http://localhost:4000/api/graphql",
-  query: query
-}, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
-  data: data?.content,
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
-  data: data?.content,
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchSorting, {
-  data: data?.content,
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchReset, {
-  loading: loading
-}), /*#__PURE__*/React.createElement(SearchResults, {
-  data: data?.content,
-  renderItem: SearchItem,
-  renderHeader: SearchHeader
-}), /*#__PURE__*/React.createElement(SearchPagination, {
-  data: data?.content
-})));
-const ListFacet = ({
-  facet
-}) => {
-  const api = useSearchkit();
-  return /*#__PURE__*/React.createElement("div", {
+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
+});
+exports.default = exports.Test = exports.LoadMore = exports.Default = exports.CustomFacets = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("@searchkit/client");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = _interopRequireDefault(require("."));
+var _SearchField = _interopRequireDefault(require("./SearchField"));
+var _SearchPagination = _interopRequireDefault(require("./SearchPagination"));
+var _SearchResults = _interopRequireDefault(require("./SearchResults"));
+var _SearchFacets = _interopRequireDefault(require("./SearchFacets"));
+var _SearchSelectedFilters = _interopRequireDefault(require("./SearchSelectedFilters"));
+var _SearchReset = _interopRequireDefault(require("./SearchReset"));
+var _SearchSorting = _interopRequireDefault(require("./SearchSorting"));
+var _SearchLoadMore = _interopRequireDefault(require("./SearchLoadMore"));
+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 _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 _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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = {
+  title: 'Molecules/SearchKit',
+  component: _.default
+};
+exports.default = _default;
+var query = "\n  query contentResultSet($query: String, $filters: [SKFiltersSet], $page: SKPageInput, $sortBy: String) {\n    content {\n      results(query: $query, filters: $filters) {\n        summary {\n          total\n          sortOptions {\n            id\n            label\n          }\n          appliedFilters {\n            id\n            identifier\n            display\n            label\n            ... on DateRangeSelectedFilter {\n              dateMin\n              dateMax\n            }\n\n            ... on NumericRangeSelectedFilter {\n              min\n              max\n            }\n\n            ... on ValueSelectedFilter {\n              value\n            }\n          }\n          query\n        }\n        hits(page: $page, sortBy: $sortBy) {\n          sortedBy\n          page {\n            total\n            totalPages\n            pageNumber\n            from\n            size\n          }\n          items {\n            id\n            ... on ContentResultHit {\n              fields {\n                nid\n                title\n                type\n                summary\n                milestone_summary\n                url\n                author_name\n                created\n                image_style_uri\n                field_article_type_name\n                field_download_type_name\n                field_elearning_type_name\n                field_event_type_name\n                field_intervention_type_name\n                field_research_type_name\n                field_practicalexample_type_name\n                field_tool_type_name\n                field_publication_date\n                field_domain_access\n                field_milestone_label\n                combined_types\n              }\n            }\n          }\n        }\n        facets {\n          identifier\n          type\n          label\n          display\n          entries {\n            label\n            count\n          }\n        }\n      }\n    }\n  }\n";
+var SearchItem = function SearchItem(_ref) {
+  var item = _ref.item;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, item.fields.title[0]));
+};
+var SearchHeader = function SearchHeader(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/_react.default.createElement("h2", null, data.results.summary.total, " Resultaten");
+};
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    uri: "http://localhost:4000/api/graphql",
+    query: query
+  }, args), function (data, loading) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchField.default, null), /*#__PURE__*/_react.default.createElement(_SearchFacets.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchSelectedFilters.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchSorting.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchReset.default, {
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader
+    }), /*#__PURE__*/_react.default.createElement(_SearchPagination.default, {
+      data: data === null || data === void 0 ? void 0 : data.content
+    }));
+  });
+};
+exports.Default = Default;
+var ListFacet = function ListFacet(_ref3) {
+  var facet = _ref3.facet;
+  var api = (0, _client.useSearchkit)();
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "Facet ListFacet",
     key: facet.identifier
-  }, /*#__PURE__*/React.createElement("span", null, "CUSTOM ", facet.label), /*#__PURE__*/React.createElement("div", null, facet.entries.map(entry => {
-    const isSelected = api.isFilterSelected({
+  }, /*#__PURE__*/_react.default.createElement("span", null, "CUSTOM ", facet.label), /*#__PURE__*/_react.default.createElement("div", null, facet.entries.map(function (entry) {
+    var isSelected = api.isFilterSelected({
       identifier: facet.identifier,
       value: entry.label
     });
-    const classes = classNames({
+    var classes = (0, _classnames.default)({
       selected: isSelected,
       disabled: parseInt(entry.count) === 0
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: classes,
       key: entry.label
-    }, /*#__PURE__*/React.createElement("span", {
-      onClick: () => {
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: function onClick() {
         api.toggleFilter({
           identifier: facet.identifier,
           value: entry.label
@@ -155,37 +98,45 @@ const ListFacet = ({
   })));
 };
 ListFacet.DISPLAY = 'ListFacet';
-export const CustomFacets = () => {
-  const customFacets = [ListFacet];
-  return /*#__PURE__*/React.createElement(SearchKit, {
+var CustomFacets = function CustomFacets(args) {
+  var customFacets = [ListFacet];
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     uri: "http://localhost:4000/api/graphql",
     query: query
-  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
-    data: data?.content,
-    loading: loading,
-    facets: customFacets
-  }), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
-    data: data?.content,
-    loading: loading
-  }), /*#__PURE__*/React.createElement(SearchSorting, {
-    data: data?.content,
-    loading: loading
-  }), /*#__PURE__*/React.createElement(SearchReset, {
-    loading: loading
-  }), /*#__PURE__*/React.createElement(SearchResults, {
-    data: data?.content,
-    renderItem: SearchItem,
-    renderHeader: SearchHeader
-  }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data?.content
-  })));
+  }, args), function (data, loading) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchField.default, null), /*#__PURE__*/_react.default.createElement(_SearchFacets.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading,
+      facets: customFacets
+    }), /*#__PURE__*/_react.default.createElement(_SearchSelectedFilters.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchSorting.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchReset.default, {
+      loading: loading
+    }), /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader
+    }), /*#__PURE__*/_react.default.createElement(_SearchPagination.default, {
+      data: data === null || data === void 0 ? void 0 : data.content
+    }));
+  });
 };
-export const Test = () => {
-  const [q, setQ] = useState(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
-    onChange: e => setQ(e.target.value),
+exports.CustomFacets = CustomFacets;
+var Test = function Test(args) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    q = _useState2[0],
+    setQ = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+    onChange: function onChange(e) {
+      return setQ(e.target.value);
+    },
     value: q
-  }), /*#__PURE__*/React.createElement(SearchKit, {
+  }), /*#__PURE__*/_react.default.createElement(_.default, _extends({
     uri: "http://localhost:4000/api/graphql",
     query: query,
     useRouting: false,
@@ -194,13 +145,15 @@ export const Test = () => {
       value: 'article'
     }],
     searchQuery: q
-  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
-    data: data?.content,
-    renderItem: SearchItem,
-    renderHeader: SearchHeader
-  }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data?.content
-  }))), /*#__PURE__*/React.createElement(SearchKit, {
+  }, args), function (data, loading) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader
+    }), /*#__PURE__*/_react.default.createElement(_SearchPagination.default, {
+      data: data === null || data === void 0 ? void 0 : data.content
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_.default, {
     uri: "http://localhost:4000/api/graphql",
     query: query,
     useRouting: false,
@@ -209,40 +162,44 @@ export const Test = () => {
       value: 'landing_page'
     }],
     searchQuery: q
-  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
-    data: data?.content,
-    renderItem: SearchItem,
-    renderHeader: SearchHeader
-  }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data?.content
-  }))));
+  }, function (data, loading) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader
+    }), /*#__PURE__*/_react.default.createElement(_SearchPagination.default, {
+      data: data === null || data === void 0 ? void 0 : data.content
+    }));
+  }));
 };
-export const LoadMore = () => {
-  const api = useSearchkit();
-  return /*#__PURE__*/React.createElement(SearchKit, {
+exports.Test = Test;
+var LoadMore = function LoadMore(args) {
+  var api = (0, _client.useSearchkit)();
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     uri: "http://localhost:4000/api/graphql",
     query: query
     // useRouting={false}
     ,
     pageSize: 5
-  }, (data, loading) => {
-    const toggleFilter = () => {
+  }, args), function (data, loading) {
+    var toggleFilter = function toggleFilter() {
       api.toggleFilter({
         identifier: 'type',
         value: '22'
       });
       api.search();
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
       type: "button",
       onClick: toggleFilter
-    }, "Toggle"), /*#__PURE__*/React.createElement(SearchResults, {
-      data: data?.content,
+    }, "Toggle"), /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      data: data === null || data === void 0 ? void 0 : data.content,
       renderItem: SearchItem,
       renderHeader: SearchHeader,
       appendResults: true
-    }), /*#__PURE__*/React.createElement(SearchLoadMore, {
-      data: data?.content
+    }), /*#__PURE__*/_react.default.createElement(_SearchLoadMore.default, {
+      data: data === null || data === void 0 ? void 0 : data.content
     }));
   });
-};
+};
+exports.LoadMore = LoadMore;