@uncinc/uncinc-react-kitchen-sink 2.1.9 → 2.1.13

package/dist/components/MagicLine/index.js

@@ -33,11 +33,19 @@ const MagicLine = ({
 
   const hoverMagicLine = e => {
     currentActiveItem.current = e.target;
+
+    _setActiveItemInNavigation(true);
+
     alignMagicLine();
   };
 
   const setInitialMagicLine = () => {
     currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
+
+    if (!currentActiveItem.current) {
+      _setActiveItemInNavigation(false);
+    }
+
     alignMagicLine();
   };
 

package/dist/components/MagicLine/stories.js

@@ -30,4 +30,22 @@ export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (
       }
     }, item);
   }));
+});
+export const NoActiveItem = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
+  const items = ["one", "two with a longer name", "three"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Menu"
+  }, items.map(item => {
+    const classes = c('Menu__item');
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: classes,
+      onMouseEnter: e => {
+        hoverMagicLine(e);
+      },
+      onMouseLeave: e => {
+        setInitialMagicLine();
+      }
+    }, item);
+  }));
 });

package/dist/components/SearchKit/Query/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
@@ -21,13 +21,21 @@ function Query({
     loading
   } = useQuery(graphQuery, {
     variables
-  });
+  }); // In between searches, Searchkit will empty it's results, resulting
+  // in a re-render with an empty screen. Use a local state to prevent this.
+
+  const [dataLoaded, setDataLoaded] = useState(null);
+  useEffect(() => {
+    if (data) {
+      setDataLoaded(data);
+    }
+  }, [data]);
 
   if (!useRouting) {
-    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+    return /*#__PURE__*/React.createElement("div", null, children(dataLoaded, loading));
   }
 
-  return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
+  return /*#__PURE__*/React.createElement(SearchPage, null, children(dataLoaded, loading));
 }
 
 export default Query;

package/dist/components/SearchKit/SearchField/index.js

@@ -26,7 +26,8 @@ const SearchField = ({
     initialValues: {
       query: query
     },
-    displayRequiredIndicator: "required"
+    displayRequiredIndicator: "required",
+    enableReinitialize: true
   }, /*#__PURE__*/React.createElement(TextField, {
     fieldName: "query",
     title: "Search",

package/dist/components/SearchKit/SearchPage/index.js

@@ -6,7 +6,6 @@ const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
 
-console.log('W', typeof withSearchkitRouting, withSearchkitRouting.getInitialProps);
 export const routeToStateFn = routeState => {
   const value = {
     query: routeState.query || '',
@@ -31,7 +30,7 @@ export const routeToStateFn = routeState => {
     }
 
     if (item.boolValue) {
-      item.boolValue = !!(item.boolValue.toString() === 'true');
+      item.boolValue = !!item.boolValue;
     }
 
     if (item.geoBoundingBox) {

package/dist/components/SearchKit/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import Query from './Query';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { SearchkitProvider, SearchkitClient } from '@searchkit/client';
@@ -24,19 +24,39 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children,
-  pageSize = 5,
-  useRouting = true
+  pageSize = 10,
+  useRouting = true,
+  defaultFilters = {},
+  defaultQuery = '',
+  children
 }) => {
-  const client = new ApolloClient({
-    uri: uri,
-    cache: new InMemoryCache()
-  });
-  const skClient = new SearchkitClient();
+  const client = useMemo(() => {
+    return new ApolloClient({
+      uri: uri,
+      cache: new InMemoryCache()
+    });
+  }, [uri]);
+  const skClient = useMemo(() => {
+    const skClient = new SearchkitClient();
+
+    if (!useRouting) {
+      skClient.updateBaseSearchState({
+        filters: defaultFilters,
+        query: defaultQuery,
+        page: {
+          size: pageSize,
+          from: 0
+        }
+      });
+    }
+
+    return skClient;
+  }, [useRouting, defaultFilters, defaultQuery, pageSize]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {
     client: client
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
-    client: skClient
+    client: skClient,
+    key: `${defaultQuery}-${defaultFilters.toString()}`
   }, /*#__PURE__*/React.createElement(Query, {
     query: query,
     useRouting: useRouting
@@ -45,6 +65,10 @@ const SearchKit = ({
 
 SearchKit.propTypes = {
   queryString: PropTypes.string,
-  uri: PropTypes.string
+  uri: PropTypes.string,
+  pageSize: PropTypes.number,
+  useRouting: PropTypes.bool,
+  defaultFilters: PropTypes.object,
+  defaultQuery: PropTypes.string
 };
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSearchkit } from '@searchkit/client';
 import classNames from 'classnames';
 import SearchKit from '.';
@@ -46,7 +46,7 @@ const query = `
         }
         query
       }
-      hits(page: $page, sortBy: "relevance") {
+      hits(page: $page) {
         sortedBy
         page {
           total
@@ -178,4 +178,41 @@ export const CustomFacets = () => {
   }), /*#__PURE__*/React.createElement(SearchPagination, {
     data: data
   })));
+};
+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),
+    value: q
+  }), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'article'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'landing_page'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))));
 };

package/dist/helpers/useValueForCurrentViewPort.js

@@ -14,17 +14,17 @@ export default function useValueForCurrentViewPort(val1, val2, val3, val4, val5)
         return;
       } // 768 & 992
       else if (width >= viewportContext.screenSizes.SCREEN_TABLET && width <= viewportContext.screenSizes.SCREEN_NORMAL) {
-        setValueForCurrentViewPort(val2);
-        return;
-      } // 992 & 1240
-      else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
-        setValueForCurrentViewPort(val3);
-        return;
-      } // 1240 & 2000
-      else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
-        setValueForCurrentViewPort(val4);
-        return;
-      } // SCREEN_HUGE and larger
+          setValueForCurrentViewPort(val2);
+          return;
+        } // 992 & 1240
+        else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
+            setValueForCurrentViewPort(val3);
+            return;
+          } // 1240 & 2000
+          else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
+              setValueForCurrentViewPort(val4);
+              return;
+            } // SCREEN_HUGE and larger
 
 
       setValueForCurrentViewPort(val5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.1.9",
+  "version": "2.1.13",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -35,30 +35,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@babel/cli": "^7.0.0-beta.44",
-    "@babel/helper-define-map": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/runtime": "^7.9.6",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^40.0.0",
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4.3.1",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
@@ -84,16 +67,35 @@
     "react-redux": "^7.2.4",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.1",
     "react-select": "^3.1.0",
     "react-share": "^4.3.1",
     "react-slick": "^0.27.14",
-    "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "sass-loader": "^8.0.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.44",
+    "@babel/helper-define-map": "^7.14.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/runtime": "^7.9.6",
+    "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.2.8",
+    "@storybook/addons": "^6.2.8",
+    "@storybook/react": "^6.2.8",
+    "@storybook/theming": "^6.2.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "chai": "^4.2.0",
+    "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "react-scripts": "3.4.1",
+    "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
-    "slick-carousel": "^1.8.1",
     "storybook-addon-export-stories": "^1.0.0"
   },
   "eslintConfig": {