@mjhls/mjh-framework 1.0.971 → 1.0.972-reference-serializer-v1

package/README.md

@@ -1,168 +1,168 @@
-# mjh-framework v. 1.0.971
-
-[![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install --save @mjhls/mjh-framework
-```
-
-## Usage
-
-```jsx
-import React, { Component } from 'react'
-
-import { NavMagazine, DeckQueue } from 'mjh-framework'
-
-export default class App extends Component {
-  render() {
-    return (
-      <div>
-        <NavMagazine />
-        <DeckQueue />
-      </div>
-    )
-  }
-}
-```
-
-## Publish new updates to the npm registry
-
-```bash
-npm publish
-```
-
-## For getting updates in the template without publishing each time a change is made in the framework
-
-Link react and react-dom of the template repo, so that it can be used by the framework.
-This is to avoid the error arising due to multiple instances of React.
-
-```bash
-cd ../mjh-template/node_modules/react
-
-yarn link
-
-cd ../react-dom
-
-yarn link
-
-cd ../../../mjh-framework
-
-yarn link react && yarn link react-dom
-```
-
-Link the framework repo so that it can be used in the template
-
-```bash
-npm link
-
-cd ../mjh-template
-
-npm link @mjhls/mjh-framework
-```
-
-## Components and "props"
-
-### Deck Components
-
-- #### DeckContent
-
-  ##### Props
-
-  - mapping
-  - dataRecord
-  - query
-  - params
-  - pointer
-  - pointerArray
-  - defaultImage
-
-- #### DeckQueue
-  ##### Props
-  - page
-  - dataRecord
-  - query
-  - params
-  - pointer
-  - pointerArray
-
-### Layout Components
-
-- #### Column1
-- #### Column2
-  ##### Props
-  - rightItems
-- #### Column3
-  ##### Props
-  - leftItems
-  - rightItems
-  ##### Common Props (Column1, Column2, Column3)
-  - title
-  - children
-- #### Header
-  ##### Props
-  - title
-  - keyword
-  - description
-- #### LeftNav
-  ##### Props
-  - leftItems
-- #### AccordionPanel
-  ##### Props
-  - accordionClassName
-  - data
-
-### Navigation Components
-
-- #### NavMagazine
-  ##### Props
-  - logo
-  - dataObject
-- #### NavNative
-  ##### Props
-  - logo
-  - dataObject
-- #### NavNormal
-  ##### Props
-  - logo
-  - dataObject
-  - variant
-- #### NavDvm
-  ##### Props
-  - logo
-  - dataObject
-  - subNavHeads
-
-### Template Components
-
-- #### TemplateNormal
-  ##### Props
-  - config
-  - title
-  - keywords
-  - description
-  - website
-
-### Ad Components
-
-- #### AD300x250
-- #### AD300x250x600
-- #### AD728x90
-  ##### Common Props
-  - networkID
-  - adUnit
-
-### Serializers
-
-- #### getSerializers (function)
-  ##### arguments
-  - client
-  ##### types
-  - youtube
-  - figure
-  - slideshow
-
-## License
-
-MIT © [mjh-framework](https://github.com/mjh-framework)
+# mjh-framework v. 1.0.972
+
+[![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save @mjhls/mjh-framework
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react'
+
+import { NavMagazine, DeckQueue } from 'mjh-framework'
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <NavMagazine />
+        <DeckQueue />
+      </div>
+    )
+  }
+}
+```
+
+## Publish new updates to the npm registry
+
+```bash
+npm publish
+```
+
+## For getting updates in the template without publishing each time a change is made in the framework
+
+Link react and react-dom of the template repo, so that it can be used by the framework.
+This is to avoid the error arising due to multiple instances of React.
+
+```bash
+cd ../mjh-template/node_modules/react
+
+yarn link
+
+cd ../react-dom
+
+yarn link
+
+cd ../../../mjh-framework
+
+yarn link react && yarn link react-dom
+```
+
+Link the framework repo so that it can be used in the template
+
+```bash
+npm link
+
+cd ../mjh-template
+
+npm link @mjhls/mjh-framework
+```
+
+## Components and "props"
+
+### Deck Components
+
+- #### DeckContent
+
+  ##### Props
+
+  - mapping
+  - dataRecord
+  - query
+  - params
+  - pointer
+  - pointerArray
+  - defaultImage
+
+- #### DeckQueue
+  ##### Props
+  - page
+  - dataRecord
+  - query
+  - params
+  - pointer
+  - pointerArray
+
+### Layout Components
+
+- #### Column1
+- #### Column2
+  ##### Props
+  - rightItems
+- #### Column3
+  ##### Props
+  - leftItems
+  - rightItems
+  ##### Common Props (Column1, Column2, Column3)
+  - title
+  - children
+- #### Header
+  ##### Props
+  - title
+  - keyword
+  - description
+- #### LeftNav
+  ##### Props
+  - leftItems
+- #### AccordionPanel
+  ##### Props
+  - accordionClassName
+  - data
+
+### Navigation Components
+
+- #### NavMagazine
+  ##### Props
+  - logo
+  - dataObject
+- #### NavNative
+  ##### Props
+  - logo
+  - dataObject
+- #### NavNormal
+  ##### Props
+  - logo
+  - dataObject
+  - variant
+- #### NavDvm
+  ##### Props
+  - logo
+  - dataObject
+  - subNavHeads
+
+### Template Components
+
+- #### TemplateNormal
+  ##### Props
+  - config
+  - title
+  - keywords
+  - description
+  - website
+
+### Ad Components
+
+- #### AD300x250
+- #### AD300x250x600
+- #### AD728x90
+  ##### Common Props
+  - networkID
+  - adUnit
+
+### Serializers
+
+- #### getSerializers (function)
+  ##### arguments
+  - client
+  ##### types
+  - youtube
+  - figure
+  - slideshow
+
+## License
+
+MIT © [mjh-framework](https://github.com/mjh-framework)

package/dist/cjs/AlgoliaSearch.js

@@ -829,7 +829,7 @@ function parseAlgoliaHit(_ref2) {
   });
 }
 
-var version$1 = '6.11.2';
+var version$1 = '6.12.0';
 
 var withKeysPropType = function withKeysPropType(keys) {
   return function (props, propName, componentName) {
@@ -911,6 +911,10 @@ function translatable(defaultTranslations) {
 function getIndexId(context) {
   return hasMultipleIndices(context) ? context.multiIndexContext.targetedIndex : context.ais.mainTargetedIndex;
 }
+/**
+ * @returns {import('algoliasearch-helper').SearchResults} results
+ */
+
 function getResults(searchResults, context) {
   if (searchResults.results) {
     if (searchResults.results.hits) {
@@ -4775,7 +4779,7 @@ var requestBuilder = {
 
 var requestBuilder_1 = requestBuilder;
 
-var version = '3.5.3';
+var version = '3.5.4';
 
 /**
  * Event triggered when a parameter is set or updated
@@ -6423,6 +6427,87 @@ ConfigureRelatedItems.propTypes = {
 };
 connectConfigureRelatedItems(ConfigureRelatedItems);
 
+var connectDynamicWidgets = createConnectorWithContext({
+  displayName: 'AlgoliaDynamicWidgets',
+  defaultProps: {
+    transformItems: function transformItems(items) {
+      return items;
+    }
+  },
+  propTypes: {
+    transformItems: PropTypes__default['default'].func
+  },
+  getProvidedProps: function getProvidedProps(props, _searchState, searchResults) {
+    var results = getResults(searchResults, {
+      ais: props.contextValue,
+      multiIndexContext: props.indexContextValue
+    });
+
+    if (!results) {
+      return {
+        attributesToRender: []
+      };
+    }
+
+    var facetOrder = results.renderingContent && results.renderingContent.facetOrdering && results.renderingContent.facetOrdering.facets && results.renderingContent.facetOrdering.facets.order || [];
+    return {
+      attributesToRender: props.transformItems(facetOrder, {
+        results: results
+      })
+    };
+  }
+});
+
+function getAttribute(component) {
+  if (_typeof(component) !== 'object') {
+    return undefined;
+  }
+
+  if (component.props.attribute) {
+    return component.props.attribute;
+  }
+
+  if (Array.isArray(component.props.attributes)) {
+    return component.props.attributes[0];
+  }
+
+  if (component.props.children) {
+    return getAttribute(React__default['default'].Children.only(component.props.children));
+  }
+
+  return undefined;
+}
+
+function DynamicWidgets(_ref) {
+  var children = _ref.children,
+      attributesToRender = _ref.attributesToRender,
+      _ref$fallbackComponen = _ref.fallbackComponent,
+      Fallback = _ref$fallbackComponen === void 0 ? function () {
+    return null;
+  } : _ref$fallbackComponen;
+  var widgets = new Map();
+  React__default['default'].Children.forEach(children, function (child) {
+    var attribute = getAttribute(child);
+
+    if (!attribute) {
+      throw new Error("Could not find \"attribute\" prop for ".concat(getDisplayName(child), "."));
+    }
+
+    widgets.set(attribute, child);
+  }); // on initial render this will be empty, but React InstantSearch keeps
+  // search state for unmounted components in place, so routing works.
+
+  return React__default['default'].createElement(React__default['default'].Fragment, null, attributesToRender.map(function (attribute) {
+    return React__default['default'].createElement(React.Fragment, {
+      key: attribute
+    }, widgets.get(attribute) || React__default['default'].createElement(Fallback, {
+      attribute: attribute
+    }));
+  }));
+}
+
+connectDynamicWidgets(DynamicWidgets);
+
 // A context rule must consist only of alphanumeric characters, hyphens, and underscores.
 // See https://www.algolia.com/doc/guides/managing-results/refine-results/merchandising-and-promoting/in-depth/implementing-query-rules/#context
 function escapeRuleContext(ruleName) {
@@ -7832,7 +7917,8 @@ var connectHierarchicalMenu = createConnectorWithContext({
     showMore: PropTypes__default['default'].bool,
     limit: PropTypes__default['default'].number,
     showMoreLimit: PropTypes__default['default'].number,
-    transformItems: PropTypes__default['default'].func
+    transformItems: PropTypes__default['default'].func,
+    facetOrdering: PropTypes__default['default'].bool
   },
   defaultProps: {
     showMore: false,
@@ -7840,12 +7926,14 @@ var connectHierarchicalMenu = createConnectorWithContext({
     showMoreLimit: 20,
     separator: ' > ',
     rootPath: null,
-    showParentLevel: true
+    showParentLevel: true,
+    facetOrdering: true
   },
   getProvidedProps: function getProvidedProps(props, searchState, searchResults) {
     var showMore = props.showMore,
         limit = props.limit,
-        showMoreLimit = props.showMoreLimit;
+        showMoreLimit = props.showMoreLimit,
+        facetOrdering = props.facetOrdering;
     var id = getId$c(props);
     var results = getResults(searchResults, {
       ais: props.contextValue,
@@ -7866,7 +7954,8 @@ var connectHierarchicalMenu = createConnectorWithContext({
 
     var itemsLimit = showMore ? showMoreLimit : limit;
     var value = results.getFacetValues(id, {
-      sortBy: sortBy$1
+      sortBy: sortBy$1,
+      facetOrdering: facetOrdering
     });
     var items = value.data ? transformValue(value.data, props, searchState, {
       ais: props.contextValue,
@@ -8418,17 +8507,20 @@ var connectMenu = createConnectorWithContext({
     showMoreLimit: PropTypes__default['default'].number,
     defaultRefinement: PropTypes__default['default'].string,
     transformItems: PropTypes__default['default'].func,
-    searchable: PropTypes__default['default'].bool
+    searchable: PropTypes__default['default'].bool,
+    facetOrdering: PropTypes__default['default'].bool
   },
   defaultProps: {
     showMore: false,
     limit: 10,
-    showMoreLimit: 20
+    showMoreLimit: 20,
+    facetOrdering: true
   },
   getProvidedProps: function getProvidedProps(props, searchState, searchResults, meta, searchForFacetValuesResults) {
     var attribute = props.attribute,
         searchable = props.searchable,
-        indexContextValue = props.indexContextValue;
+        indexContextValue = props.indexContextValue,
+        facetOrdering = props.facetOrdering;
     var results = getResults(searchResults, {
       ais: props.contextValue,
       multiIndexContext: props.indexContextValue
@@ -8474,7 +8566,8 @@ var connectMenu = createConnectorWithContext({
       });
     } else {
       items = results.getFacetValues(attribute, {
-        sortBy: searchable ? undefined : defaultSortBy
+        sortBy: searchable ? undefined : defaultSortBy,
+        facetOrdering: facetOrdering
       }).map(function (v) {
         return {
           label: v.name,
@@ -9331,18 +9424,21 @@ var connectRefinementList = createConnectorWithContext({
     showMoreLimit: PropTypes__default['default'].number,
     defaultRefinement: PropTypes__default['default'].arrayOf(PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number])),
     searchable: PropTypes__default['default'].bool,
-    transformItems: PropTypes__default['default'].func
+    transformItems: PropTypes__default['default'].func,
+    facetOrdering: PropTypes__default['default'].bool
   },
   defaultProps: {
     operator: 'or',
     showMore: false,
     limit: 10,
-    showMoreLimit: 20
+    showMoreLimit: 20,
+    facetOrdering: true
   },
   getProvidedProps: function getProvidedProps(props, searchState, searchResults, metadata, searchForFacetValuesResults) {
     var attribute = props.attribute,
         searchable = props.searchable,
-        indexContextValue = props.indexContextValue;
+        indexContextValue = props.indexContextValue,
+        facetOrdering = props.facetOrdering;
     var results = getResults(searchResults, {
       ais: props.contextValue,
       multiIndexContext: props.indexContextValue
@@ -9383,7 +9479,8 @@ var connectRefinementList = createConnectorWithContext({
         isRefined: v.isRefined
       };
     }) : results.getFacetValues(attribute, {
-      sortBy: sortBy
+      sortBy: sortBy,
+      facetOrdering: facetOrdering
     }).map(function (v) {
       return {
         label: v.name,
@@ -10883,6 +10980,7 @@ function (_Component) {
 
       var _this$props4 = this.props,
           className = _this$props4.className,
+          inputId = _this$props4.inputId,
           translate = _this$props4.translate,
           autoFocus = _this$props4.autoFocus,
           loadingIndicator = _this$props4.loadingIndicator,
@@ -10910,6 +11008,7 @@ function (_Component) {
         role: "search"
       }, React__default['default'].createElement("input", index._extends({
         ref: this.onInputMount,
+        id: inputId,
         type: "search",
         placeholder: translate('placeholder'),
         autoFocus: autoFocus,
@@ -10961,7 +11060,8 @@ _defineProperty(SearchBox$1, "propTypes", {
   showLoadingIndicator: PropTypes__default['default'].bool,
   inputRef: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].exact({
     current: PropTypes__default['default'].object
-  })])
+  })]),
+  inputId: PropTypes__default['default'].string
 });
 
 _defineProperty(SearchBox$1, "defaultProps", {
@@ -11600,9 +11700,11 @@ function (_Component) {
     value: function render() {
       var _this$props = this.props,
           cx = _this$props.cx,
+          id = _this$props.id,
           items = _this$props.items,
           selectedItem = _this$props.selectedItem;
       return React__default['default'].createElement("select", {
+        id: id,
         className: cx('select'),
         value: selectedItem,
         onChange: this.onChange
@@ -11622,6 +11724,7 @@ function (_Component) {
 
 _defineProperty(Select, "propTypes", {
   cx: PropTypes__default['default'].func.isRequired,
+  id: PropTypes__default['default'].string,
   onSelect: PropTypes__default['default'].func.isRequired,
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
     value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number]).isRequired,
@@ -11649,6 +11752,7 @@ function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          id = _this$props.id,
           items = _this$props.items,
           currentRefinement = _this$props.currentRefinement,
           refine = _this$props.refine,
@@ -11656,6 +11760,7 @@ function (_Component) {
       return React__default['default'].createElement("div", {
         className: index.classnames(cx$h(''), className)
       }, React__default['default'].createElement(Select, {
+        id: id,
         onSelect: refine,
         selectedItem: currentRefinement,
         items: items,
@@ -11668,6 +11773,7 @@ function (_Component) {
 }(React.Component);
 
 _defineProperty(HitsPerPage, "propTypes", {
+  id: PropTypes__default['default'].string,
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
     value: PropTypes__default['default'].number.isRequired,
     label: PropTypes__default['default'].string
@@ -11690,6 +11796,7 @@ _defineProperty(HitsPerPage, "defaultProps", {
  *
  * @name HitsPerPage
  * @kind widget
+ * @propType {string} id - The id of the select input
  * @propType {{value: number, label: string}[]} items - List of available options.
  * @propType {number} defaultRefinement - The number of items selected by default
  * @propType {function} [transformItems] - Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.
@@ -12058,6 +12165,7 @@ function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          id = _this$props.id,
           items = _this$props.items,
           canRefine = _this$props.canRefine,
           translate = _this$props.translate,
@@ -12065,6 +12173,7 @@ function (_Component) {
       return React__default['default'].createElement("div", {
         className: index.classnames(cx$e('', !canRefine && '-noRefinement'), className)
       }, React__default['default'].createElement("select", {
+        id: id,
         value: this.selectedValue,
         onChange: this.handleSelectChange,
         className: cx$e('select')
@@ -12097,6 +12206,7 @@ function (_Component) {
 }(React.Component);
 
 _defineProperty(MenuSelect, "propTypes", {
+  id: PropTypes__default['default'].string,
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
     label: PropTypes__default['default'].string.isRequired,
     value: PropTypes__default['default'].string.isRequired,
@@ -12123,6 +12233,7 @@ var MenuSelect$1 = translatable({
  * @kind widget
  * @requirements The attribute passed to the `attribute` prop must be present in "attributes for faceting"
  * on the Algolia dashboard or configured as `attributesForFaceting` via a set settings call to the Algolia API.
+ * @propType {string} id - the id of the select input
  * @propType {string} attribute - the name of the attribute in the record
  * @propType {string} [defaultRefinement] - the value of the item selected by default
  * @propType {number} [limit=10] - the minimum number of diplayed items
@@ -13454,6 +13565,7 @@ connectScrollTo(ScrollTo);
  * @propType {node} [reset] - Change the apparence of the default reset button (cross).
  * @propType {node} [loadingIndicator] - Change the apparence of the default loading indicator (spinning circle).
  * @propType {string} [defaultRefinement] - Provide default refinement value when component is mounted.
+ * @propType {string} [inputId] - The id of the search input
  * @propType {boolean} [showLoadingIndicator=false] - Display that the search is loading. This only happens after a certain amount of time to avoid a blinking effect. This timer can be configured with `stalledSearchDelay` props on <InstantSearch>. By default, the value is 200ms.
  * @themeKey ais-SearchBox - the root div of the widget
  * @themeKey ais-SearchBox-form - the wrapping form
@@ -13604,6 +13716,7 @@ function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          id = _this$props.id,
           items = _this$props.items,
           currentRefinement = _this$props.currentRefinement,
           refine = _this$props.refine,
@@ -13611,6 +13724,7 @@ function (_Component) {
       return React__default['default'].createElement("div", {
         className: index.classnames(cx$4(''), className)
       }, React__default['default'].createElement(Select, {
+        id: id,
         cx: cx$4,
         items: items,
         selectedItem: currentRefinement,
@@ -13623,6 +13737,7 @@ function (_Component) {
 }(React.Component);
 
 _defineProperty(SortBy, "propTypes", {
+  id: PropTypes__default['default'].string,
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
     label: PropTypes__default['default'].string,
     value: PropTypes__default['default'].string.isRequired
@@ -13642,6 +13757,7 @@ _defineProperty(SortBy, "defaultProps", {
  * @requirements Algolia handles sorting by creating replica indices. [Read more about sorting](https://www.algolia.com/doc/guides/relevance/sorting/) on
  * the Algolia website.
  * @kind widget
+ * @propType {string} id - The id of the select input
  * @propType {{value: string, label: string}[]} items - The list of indexes to search in.
  * @propType {string} defaultRefinement - The default selected index.
  * @propType {function} [transformItems] - Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.