@uncinc/uncinc-react-kitchen-sink 2.1.4 → 2.1.8

package/dist/components/ApiAutocomplete/index.js

@@ -2,6 +2,19 @@ import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import './style.scss';
 
+function abortableFetch(request, opts) {
+  const controller = new AbortController();
+  const signal = controller.signal;
+  return {
+    abort: () => controller.abort(),
+    ready: fetch(request, { ...opts,
+      signal
+    })
+  };
+}
+
+let currentFetch = null;
+
 const ApiAutocomplete = ({
   endpoint,
   placeholder,
@@ -16,7 +29,13 @@ const ApiAutocomplete = ({
 
   const getSuggestions = query => {
     const url = `${endpoint}?${queryParameter}=${query}`;
-    fetch(url).then(response => {
+
+    if (currentFetch) {
+      currentFetch.abort();
+    }
+
+    currentFetch = abortableFetch(url);
+    currentFetch.ready.then(response => {
       return response.json();
     }).then(response => {
       const ajaxResults = response.map((item, index) => {
@@ -24,6 +43,7 @@ const ApiAutocomplete = ({
         return item;
       });
       setResults(ajaxResults);
+    }).catch(e => {// Catch the error so the browser does not output errors.
     });
   };
 

package/dist/components/ApiAutocomplete/stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ApiAutocomplete from './';
+export default {
+  title: 'Organisms/Autocomplete'
+};
+export const Default = () => {
+  return /*#__PURE__*/React.createElement(ApiAutocomplete, {
+    endpoint: "http://nldoet.devinc.eu/autocomplete/json",
+    renderItem: item => {
+      console.log(item);
+      return /*#__PURE__*/React.createElement("div", null, item.name);
+    },
+    onSelectItem: item => {
+      console.log('Selected', item);
+    },
+    inputProps: {
+      label: 'test'
+    }
+  });
+};

package/dist/components/Form/Checkbox/index.js

@@ -17,7 +17,8 @@ const Checkbox = props => {
     touched,
     error,
     value,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: "Checkbox",
@@ -49,9 +50,16 @@ const Checkbox = props => {
       name: fieldName,
       type: "checkbox",
       id: id,
-      checked: field.value
+      checked: field.value,
+      onChange: e => {
+        field.onChange(e);
+        onChange(!field.value);
+      }
     })), title);
   }));
 };
 
+Checkbox.defaultProps = {
+  onChange: () => {}
+};
 export default withMapping(Checkbox);

package/dist/components/Form/Checkbox/stories.js

@@ -22,6 +22,9 @@ export const Checkbox = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log('change', e);
     }
   }));
 };

package/dist/components/Form/Select/Input/index.js

@@ -56,18 +56,21 @@ const SelectInput = props => {
         if (e) {
           if (onChange) {
             onChange(e.value);
-          } else {
-            form.setFieldValue(fieldName, e.value);
           }
+
+          form.setFieldValue(fieldName, e.value);
         } else {
           if (onChange) {
             onChange('');
-          } else {
-            form.setFieldValue(fieldName, null);
           }
+
+          form.setFieldValue(fieldName, null);
         }
       },
       options: optionsTransformed,
+      isOptionDisabled: option => {
+        return option.disabled;
+      },
       placeholder: placeholder,
       isClearable: true,
       theme: {

package/dist/components/Form/Select/stories.js

@@ -5,7 +5,11 @@ export default {
   title: 'Molecules/Form'
 };
 export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: {
+      poison: 'beer'
+    }
+  }, /*#__PURE__*/React.createElement(FormikSelect, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -25,6 +29,9 @@ export const Select = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log(e);
     }
   }));
 };

package/dist/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import Container from '../Layout/Container';
 import Hamburger from '../Hamburger';
-import AnimationWrapper from './AnimationWrapper';
+import NavigationScroll from '../NavigationScroll';
 import './style.scss';
 
 const Header = ({
@@ -33,7 +33,7 @@ const Header = ({
     });
   }
 
-  const onUpdateAnimationWrapper = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
+  const onUpdateNavigationScroll = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
     const shouldUpdate = state.visible !== isVisible || state.reachedTop !== hasReachedTop || state.scrolledPastNavHeight !== scrolledPastNavHeight;
 
     if (shouldUpdate) {
@@ -66,8 +66,8 @@ const Header = ({
   }, /*#__PURE__*/React.createElement(Container, null, subMenu)));
 
   if (withAnimation) {
-    return /*#__PURE__*/React.createElement(AnimationWrapper, {
-      onUpdate: onUpdateAnimationWrapper,
+    return /*#__PURE__*/React.createElement(NavigationScroll, {
+      onUpdate: onUpdateNavigationScroll,
       hasBackground: true
     }, headerComponent);
   } else {

package/dist/components/MagicLine/index.js

@@ -0,0 +1,70 @@
+import React, { useRef, useState, useEffect } from 'react';
+import c from 'classnames';
+
+const MagicLine = ({
+  activeClassName = "Menu__item--active",
+  children
+}) => {
+  const magicLineParentRef = useRef(null);
+  const magicLineRef = useRef(null);
+  const currentActiveItem = useRef(null);
+  const [loaded, setLoaded] = useState(false);
+  const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
+
+  const setActiveItemInNavigation = value => {
+    if (value !== activeItemInNavigation) {
+      _setActiveItemInNavigation(value);
+    }
+  };
+
+  const MagicLineRefClasses = c('MagicLine__magic_line', {
+    'MagicLine__magic_line--visible': activeItemInNavigation && loaded
+  });
+
+  const alignMagicLine = () => {
+    if (magicLineRef.current && currentActiveItem.current) {
+      const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
+      const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
+      magicLineRef.current.style.left = `${left}px`;
+      magicLineRef.current.style.right = `${right}px`;
+      setLoaded(true);
+    }
+  };
+
+  const hoverMagicLine = e => {
+    currentActiveItem.current = e.target;
+    alignMagicLine();
+  };
+
+  const setInitialMagicLine = () => {
+    currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
+    alignMagicLine();
+  };
+
+  useEffect(() => {
+    const initialize = () => {
+      setInitialMagicLine();
+    };
+
+    const handleResize = () => {
+      alignMagicLine();
+    };
+
+    document.fonts.ready.then(initialize);
+    window.addEventListener('load', initialize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener('load', initialize);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: magicLineParentRef,
+    className: "MagicLine"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: magicLineRef,
+    className: MagicLineRefClasses
+  }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
+};
+
+export default MagicLine;

package/dist/components/MagicLine/stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import c from 'classnames';
+import MagicLine from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/MagicLine'
+};
+export const Default = () => /*#__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 active = item === "three";
+
+    if (active) {
+      setActiveItemInNavigation(true);
+    }
+
+    const classes = c('Menu__item', {
+      'Menu__item--active': active
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: classes,
+      onMouseEnter: e => {
+        hoverMagicLine(e);
+      },
+      onMouseLeave: e => {
+        setInitialMagicLine();
+      }
+    }, item);
+  }));
+});

package/dist/components/MagicLine/stories.scss

@@ -0,0 +1,38 @@
+.Menu {
+  display: flex;
+  flex-direction: row;
+
+  &__item {
+    margin: 0 1rem;
+    padding: 0 1rem;
+  }
+}
+
+.MagicLine {
+  position: relative;
+
+  &__magic_line {
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: red;
+    height: .2rem;
+    z-index: 1000000;
+    opacity: 0;
+
+    &--visible {
+      opacity: 1;
+      transition: left .3s cubic-bezier(0.64, 0.04, 0.35, 1),
+                  right .3s cubic-bezier(0.64, 0.04, 0.35, 1),
+                  opacity 0.3s .3s cubic-bezier(0.64, 0.04, 0.35, 1);
+    }
+  }
+
+  &:hover .MagicLine__magic_line {
+    opacity: 1;
+  }
+}

package/dist/components/{Header/AnimationWrapper → NavigationScroll}/index.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import './style.scss';
 
-const AnimationWrapper = props => {
+const NavigationScroll = props => {
   const node = useRef(null);
   const [state, setState] = useState({
     pos: 0,
@@ -71,8 +71,8 @@ const AnimationWrapper = props => {
     children,
     hasBackground
   } = props;
-  const classes = classNames('AnimationWrapper', {
-    'AnimationWrapper--hasBackground': hasBackground,
+  const classes = classNames('NavigationScroll', {
+    'NavigationScroll--hasBackground': hasBackground,
     's-scrolled-past-nav-height': scrolledPastNavHeight,
     's-reached-page-top': reachedTop,
     's-reached-page-bottom': reachedBottom
@@ -86,11 +86,11 @@ const AnimationWrapper = props => {
   }, children);
 };
 
-AnimationWrapper.propTypes = {
+NavigationScroll.propTypes = {
   children: PropTypes.element.isRequired,
   onUpdate: PropTypes.func
 };
-AnimationWrapper.defaultProps = {
+NavigationScroll.defaultProps = {
   onUpdate: () => {}
 };
-export default AnimationWrapper;
+export default NavigationScroll;

package/dist/components/NavigationScroll/stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import c from 'classnames';
+import NavigationScroll from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/NavigationScroll'
+};
+export const Default = () => /*#__PURE__*/React.createElement("div", {
+  className: "NavigationScrollExample"
+}, /*#__PURE__*/React.createElement(NavigationScroll, null, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("div", null, "one"), /*#__PURE__*/React.createElement("div", null, "two"), /*#__PURE__*/React.createElement("div", null, "three"))));

package/dist/components/NavigationScroll/stories.scss

@@ -0,0 +1,17 @@
+.NavigationScrollExample {
+  min-height: 200vh;
+  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+  margin: -4rem;
+
+  nav {
+    background-color: grey;
+    display: flex;
+    flex-direction: row;
+    padding: 2rem;
+
+    & > div {
+      flex: 0 0 auto;
+      margin: 0 1rem;
+    }
+  }
+}

package/dist/components/{Header/AnimationWrapper → NavigationScroll}/style.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/assets/variables';
+@import '../../styles/assets/variables';
 
 @keyframes animation-wrapper--slide-down {
   from {
@@ -10,21 +10,20 @@
   }
 }
 
-.AnimationWrapper {
+.NavigationScroll {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: block;
   z-index: $z-index-4;
-  transition: 0.5s background ease-in-out;
+  transition: background-color 0.5s ease-in-out;
 
   &--hasBackground {
-    background: white;
+    background-color: white;
 
     &.s-reached-page-bottom {
       animation: animation-wrapper--slide-down 0.3s $animation-timing--cubic-bezier;
     }
   }
 }
-

package/dist/components/SearchKit/Facets/ChipFacet/index.js

@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Button from '../../../Button';
 import classNames from 'classnames';
+
+const makeSafeForCSS = value => {
+  return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
+};
+
 export const ChipFacet = ({
   facet
 }) => {
   const api = useSearchkit();
-
-  const makeSafeForCSS = value => {
-    return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
-  };
-
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet ChipFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement("span", null, facet.label), /*#__PURE__*/React.createElement("div", null, facet.entries.map(entry => {
     const isSelected = api.isFilterSelected({
@@ -21,9 +22,9 @@ export const ChipFacet = ({
     const classes = classNames('Button--Chip', makeSafeForCSS(`Button--${entry.label}`), {
       'Button--selected': isSelected
     });
-    console.log(entry);
     return /*#__PURE__*/React.createElement(Button, {
       className: classes,
+      disabled: parseInt(entry.count) === 0,
       onClick: () => {
         api.toggleFilter({
           identifier: facet.identifier,

package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalFilterFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalFilterFacet.DISPLAY = 'HierarchicalFilterFacet';

package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalMenuFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalMenuFacet.DISPLAY = 'HierarchicalMenuFacet';

package/dist/components/SearchKit/Facets/ListFacet/index.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import { useSearchkit } from '@searchkit/client';
+import classNames from 'classnames';
 export const ListFacet = ({
   facet
 }) => {
   const api = useSearchkit();
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet ListFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement("span", null, facet.label), /*#__PURE__*/React.createElement("ul", null, facet.entries.map(entry => {
     const isSelected = api.isFilterSelected({
       identifier: facet.identifier,
       value: entry.label
     });
+    const classes = classNames({
+      selected: isSelected,
+      disabled: parseInt(entry.count) === 0
+    });
     return /*#__PURE__*/React.createElement("li", {
-      className: isSelected ? 'selected' : '',
+      className: classes,
       key: entry.label
     }, /*#__PURE__*/React.createElement("button", {
       onClick: () => {
@@ -21,7 +27,8 @@ export const ListFacet = ({
           value: entry.label
         });
         api.search();
-      }
+      },
+      disabled: parseInt(entry.count) === 0
     }, entry.label, " (", entry.count, ")"));
   })));
 };

package/dist/components/SearchKit/Facets/SelectFacet/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Select from '../../../Form/Select';
 import FormikWrapper from '../../../Form/FormikWrapper';
@@ -8,9 +8,11 @@ export const SelectFacet = ({
   const api = useSearchkit();
   const options = facet.entries.map(entry => ({
     value: entry.label,
-    label: entry.label
+    label: entry.label,
+    disabled: parseInt(entry.count) === 0
   }));
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet SelectFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(Select, {
     title: facet.label,
@@ -19,7 +21,6 @@ export const SelectFacet = ({
     fieldName: facet.identifier,
     options: options,
     onChange: value => {
-      console.log(value);
       api.toggleFilter({
         identifier: facet.identifier,
         value: value

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

@@ -3,8 +3,9 @@ import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
 
-function App({
+function Query({
   query,
+  useRouting,
   children
 }) {
   const graphQuery = useMemo(() => {
@@ -21,7 +22,12 @@ function App({
   } = useQuery(graphQuery, {
     variables
   });
+
+  if (!useRouting) {
+    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+  }
+
   return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
 }
 
-export default App;
+export default Query;

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { SelectFacet } from '../Facets/SelectFacet';
 import { ListFacet } from '../Facets/ListFacet';
 import { ChipFacet } from '../Facets/ChipFacet';
+import { HierarchicalFilterFacet } from '../Facets/HierarchicalFilterFacet';
+import { HierarchicalMenuFacet } from '../Facets/HierarchicalMenuFacet';
 
 const FacetList = (components = []) => {
-  const FacetsMapper = [...components, SelectFacet, ChipFacet, ListFacet].reduce((sum, component) => {
+  const FacetsMapper = [HierarchicalFilterFacet, HierarchicalMenuFacet, SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
     sum[component.DISPLAY] = component;
     return sum;
   }, {});
@@ -35,10 +37,15 @@ const SearchFacets = ({
   facets
 }) => {
   const Facets = FacetList(facets);
+
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchFacets"
   }, /*#__PURE__*/React.createElement(Facets, {
-    data: data?.results,
+    data: data.results,
     loading: loading
   }));
 };

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

@@ -6,4 +6,51 @@ const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
 
-export default withSearchkitRouting(SearchPage);
+console.log('W', typeof withSearchkitRouting, withSearchkitRouting.getInitialProps);
+export const routeToStateFn = routeState => {
+  const value = {
+    query: routeState.query || '',
+    sortBy: routeState.sort || '',
+    filters: routeState.filters || [],
+    page: {
+      size: Number(routeState.size) || 10,
+      from: Number(routeState.from) || 0
+    }
+  }; // Map Number values for min and max filters. By default they
+  // are parsed as strings, which does not comply to the schema.
+  // The 'qs' package is at fault here.
+  // @see https://github.com/ljharb/qs/issues/91
+
+  value.filters = value.filters.map(item => {
+    if (item.min) {
+      item.min = Number(item.min);
+    }
+
+    if (item.max) {
+      item.max = Number(item.max);
+    }
+
+    if (item.boolValue) {
+      item.boolValue = !!(item.boolValue.toString() === 'true');
+    }
+
+    if (item.geoBoundingBox) {
+      item.geoBoundingBox.topLeft.lat = Number(item.geoBoundingBox.topLeft.lat);
+      item.geoBoundingBox.topLeft.lon = Number(item.geoBoundingBox.topLeft.lon);
+      item.geoBoundingBox.bottomRight.lat = Number(item.geoBoundingBox.bottomRight.lat);
+      item.geoBoundingBox.bottomRight.lon = Number(item.geoBoundingBox.bottomRight.lon);
+    }
+
+    if (item.geoRadius) {
+      item.geoRadius.radius = Number(item.geoRadius.radius);
+      item.geoRadius.center.lat = Number(item.geoRadius.center.lat);
+      item.geoRadius.center.lon = Number(item.geoRadius.center.lon);
+    }
+
+    return item;
+  });
+  return value;
+};
+export default withSearchkitRouting(SearchPage, {
+  routeToState: routeToStateFn
+});

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

@@ -20,15 +20,20 @@ const SearchSelectedFilters = ({
     }, filter.label, ": ", filter.value);
   };
 
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSelectedFilters"
   }, /*#__PURE__*/React.createElement(SelectedFilters, {
-    data: data?.results,
+    data: data.results,
     loading: loading,
     customFilterComponents: {
       SelectFacet: ValueFilter,
       ListFacet: ValueFilter,
-      ChipFacet: ValueFilter
+      ChipFacet: ValueFilter,
+      HierarchicalFilterFacet: ValueFilter
     }
   }));
 };

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

@@ -5,10 +5,14 @@ const SearchSorting = ({
   data,
   loading
 }) => {
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSorting"
   }, /*#__PURE__*/React.createElement(SortingSelector, {
-    data: data?.results,
+    data: data.results,
     loading: loading
   }));
 };

package/dist/components/SearchKit/index.js

@@ -24,7 +24,9 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children
+  children,
+  pageSize = 5,
+  useRouting = true
 }) => {
   const client = new ApolloClient({
     uri: uri,
@@ -36,7 +38,8 @@ const SearchKit = ({
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
     client: skClient
   }, /*#__PURE__*/React.createElement(Query, {
-    query: query
+    query: query,
+    useRouting: useRouting
   }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
 };
 

package/dist/components/SearchKit/stories.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import classNames from 'classnames';
 import SearchKit from '.';
 import SearchField from './SearchField';
 import SearchPagination from './SearchPagination';
@@ -24,6 +26,10 @@ const query = `
           identifier
           display
           label
+          ... on HierarchicalValueSelectedFilter {
+            level
+            value
+          }
           ... on DateRangeSelectedFilter {
             dateMin
             dateMax
@@ -68,6 +74,17 @@ const query = `
         entries {
           label
           count
+          level
+          entries {
+            label
+            count
+            level
+            entries {
+              label
+              count
+              level
+            }
+          }
         }
       }
     }
@@ -102,4 +119,63 @@ export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
   renderHeader: SearchHeader
 }), /*#__PURE__*/React.createElement(SearchPagination, {
   data: data
-})));
+})));
+
+const ListFacet = ({
+  facet
+}) => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.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({
+      identifier: facet.identifier,
+      value: entry.label
+    });
+    const classes = classNames({
+      selected: isSelected,
+      disabled: parseInt(entry.count) === 0
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      key: entry.label
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: () => {
+        api.toggleFilter({
+          identifier: facet.identifier,
+          value: entry.label
+        });
+        api.search();
+      },
+      disabled: parseInt(entry.count) === 0
+    }, "- ", entry.label, " (", entry.count, ")"));
+  })));
+};
+
+ListFacet.DISPLAY = 'ListFacet';
+export const CustomFacets = () => {
+  const customFacets = [ListFacet];
+  return /*#__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,
+    loading: loading,
+    facets: customFacets
+  }), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchSorting, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchReset, {
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  })));
+};

package/dist/index.js

@@ -12,6 +12,8 @@ export { default as Pagination } from './components/Pagination';
 export { default as QuickLayout } from './components/Layout/QuickLayout';
 export { default as Lottie } from './components/Lottie';
 export { default as LottieAnimationWithMousePosition } from './components/Lottie/LottieAnimationWithMousePosition';
+export { default as MagicLine } from './components/MagicLine';
+export { default as NavigationScroll } from './components/NavigationScroll';
 export { default as Image } from './components/Image';
 export { default as ImageBackground } from './components/Image/Background';
 export { default as InlineMenu } from './components/InlineMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.1.4",
+  "version": "2.1.8",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",