@bonlineza/luxity-lib 2.17.5 → 2.18.1

package/LuxityGraphQLDropdownSelector.js

@@ -10323,7 +10323,10 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter;
+            nameFilter = _this$state.nameFilter,
+            brands = _this$state.brands,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -10344,10 +10347,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -10360,6 +10363,9 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
+        brands: props.brands,
+        models: props.models,
+        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -10368,11 +10374,23 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
+
+        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -10383,6 +10401,24 @@
           };
         }
 
+        if (prevState.brands !== props.brands) {
+          return {
+            brands: props.brands
+          };
+        }
+
+        if (prevState.models !== props.models) {
+          return {
+            models: props.models
+          };
+        }
+
+        if (prevState.materials !== props.materials) {
+          return {
+            materials: props.materials
+          };
+        }
+
         return null;
       }
     }]);
@@ -10431,7 +10467,10 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
+        requestInstance = _ref.requestInstance,
+        brands = _ref.brands,
+        models = _ref.models,
+        materials = _ref.materials;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -10440,6 +10479,9 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
+      brands: brands,
+      models: models,
+      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,
@@ -10967,7 +11009,8 @@
         _this.setState({
           brands: brandsArray.map(function (brand) {
             return brand.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10991,7 +11034,8 @@
         _this.setState({
           models: modelsArray.map(function (model) {
             return model.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10999,7 +11043,8 @@
         _this.setState({
           materials: materialsArray.map(function (material) {
             return material.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -11102,7 +11147,9 @@
         var _this$state2 = _this.state,
             category_type = _this$state2.category_type,
             fetching = _this$state2.request.fetching,
-            brands = _this$state2.brands;
+            brands = _this$state2.brands,
+            models = _this$state2.models,
+            materials = _this$state2.materials;
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
             baseGraphApi = _this$props.baseGraphApi,
@@ -11153,7 +11200,10 @@
           onChange: _this.onStylesChanged,
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
-          getGraphQuery: getStylesGraphQuery
+          getGraphQuery: getStylesGraphQuery,
+          brands: brands,
+          models: models,
+          materials: materials
         })) : null, /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer, null, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right"
         }, /*#__PURE__*/React__default.createElement("div", {

package/LuxityGraphQLMultiselector.js

@@ -817,7 +817,10 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter;
+            nameFilter = _this$state.nameFilter,
+            brands = _this$state.brands,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -838,10 +841,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -854,6 +857,9 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
+        brands: props.brands,
+        models: props.models,
+        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -862,11 +868,23 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
+
+        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -877,6 +895,24 @@
           };
         }
 
+        if (prevState.brands !== props.brands) {
+          return {
+            brands: props.brands
+          };
+        }
+
+        if (prevState.models !== props.models) {
+          return {
+            models: props.models
+          };
+        }
+
+        if (prevState.materials !== props.materials) {
+          return {
+            materials: props.materials
+          };
+        }
+
         return null;
       }
     }]);

package/MaterialSelector.js

@@ -10323,7 +10323,10 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter;
+            nameFilter = _this$state.nameFilter,
+            brands = _this$state.brands,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -10344,10 +10347,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -10360,6 +10363,9 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
+        brands: props.brands,
+        models: props.models,
+        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -10368,11 +10374,23 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
+
+        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -10383,6 +10401,24 @@
           };
         }
 
+        if (prevState.brands !== props.brands) {
+          return {
+            brands: props.brands
+          };
+        }
+
+        if (prevState.models !== props.models) {
+          return {
+            models: props.models
+          };
+        }
+
+        if (prevState.materials !== props.materials) {
+          return {
+            materials: props.materials
+          };
+        }
+
         return null;
       }
     }]);
@@ -10431,7 +10467,10 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
+        requestInstance = _ref.requestInstance,
+        brands = _ref.brands,
+        models = _ref.models,
+        materials = _ref.materials;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -10440,6 +10479,9 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
+      brands: brands,
+      models: models,
+      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,
@@ -10932,7 +10974,8 @@
         _this.setState({
           brands: brandsArray.map(function (brand) {
             return brand.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10956,7 +10999,8 @@
         _this.setState({
           models: modelsArray.map(function (model) {
             return model.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10964,7 +11008,8 @@
         _this.setState({
           materials: materialsArray.map(function (material) {
             return material.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -11067,7 +11112,9 @@
         var _this$state2 = _this.state,
             category_type = _this$state2.category_type,
             fetching = _this$state2.request.fetching,
-            brands = _this$state2.brands;
+            brands = _this$state2.brands,
+            models = _this$state2.models,
+            materials = _this$state2.materials;
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
             baseGraphApi = _this$props.baseGraphApi,
@@ -11118,7 +11165,10 @@
           onChange: _this.onStylesChanged,
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
-          getGraphQuery: getStylesGraphQuery
+          getGraphQuery: getStylesGraphQuery,
+          brands: brands,
+          models: models,
+          materials: materials
         })) : null, /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer, null, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right"
         }, /*#__PURE__*/React__default.createElement("div", {

package/ModelSelector.js

@@ -10323,7 +10323,10 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter;
+            nameFilter = _this$state.nameFilter,
+            brands = _this$state.brands,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -10344,10 +10347,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -10360,6 +10363,9 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
+        brands: props.brands,
+        models: props.models,
+        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -10368,11 +10374,23 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
+
+        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -10383,6 +10401,24 @@
           };
         }
 
+        if (prevState.brands !== props.brands) {
+          return {
+            brands: props.brands
+          };
+        }
+
+        if (prevState.models !== props.models) {
+          return {
+            models: props.models
+          };
+        }
+
+        if (prevState.materials !== props.materials) {
+          return {
+            materials: props.materials
+          };
+        }
+
         return null;
       }
     }]);
@@ -10431,7 +10467,10 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
+        requestInstance = _ref.requestInstance,
+        brands = _ref.brands,
+        models = _ref.models,
+        materials = _ref.materials;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -10440,6 +10479,9 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
+      brands: brands,
+      models: models,
+      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,
@@ -10932,7 +10974,8 @@
         _this.setState({
           brands: brandsArray.map(function (brand) {
             return brand.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10956,7 +10999,8 @@
         _this.setState({
           models: modelsArray.map(function (model) {
             return model.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -10964,7 +11008,8 @@
         _this.setState({
           materials: materialsArray.map(function (material) {
             return material.value;
-          })
+          }),
+          styles: []
         });
       });
 
@@ -11067,7 +11112,9 @@
         var _this$state2 = _this.state,
             category_type = _this$state2.category_type,
             fetching = _this$state2.request.fetching,
-            brands = _this$state2.brands;
+            brands = _this$state2.brands,
+            models = _this$state2.models,
+            materials = _this$state2.materials;
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
             baseGraphApi = _this$props.baseGraphApi,
@@ -11118,7 +11165,10 @@
           onChange: _this.onStylesChanged,
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
-          getGraphQuery: getStylesGraphQuery
+          getGraphQuery: getStylesGraphQuery,
+          brands: brands,
+          models: models,
+          materials: materials
         })) : null, /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer, null, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right"
         }, /*#__PURE__*/React__default.createElement("div", {

package/RareStepHeader.js

@@ -642,14 +642,12 @@
 
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, links.top.map(function (link, index) {
       return link !== null && link !== void 0 && link.isSubMenu ? /*#__PURE__*/React__default.createElement(SubMenuLinkContainer, {
-        key: index
-      }, /*#__PURE__*/React__default.createElement(SideNavLink, {
-        href: link.url
-      }, link.name), /*#__PURE__*/React__default.createElement(SubMenuRightIcon, {
-        src: rightArrowIconUrl,
         onClick: function onClick() {
           return setShowSideNavSubMenu(true);
-        }
+        },
+        key: index
+      }, /*#__PURE__*/React__default.createElement(SideNavLink, null, link.name), /*#__PURE__*/React__default.createElement(SubMenuRightIcon, {
+        src: rightArrowIconUrl
       })) : /*#__PURE__*/React__default.createElement(SideNavLink, {
         key: index,
         href: link.url

package/StyleSelector.js

@@ -817,7 +817,10 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter;
+            nameFilter = _this$state.nameFilter,
+            brands = _this$state.brands,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -838,10 +841,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -854,6 +857,9 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
+        brands: props.brands,
+        models: props.models,
+        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -862,11 +868,23 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
+
+        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+
+        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -877,6 +895,24 @@
           };
         }
 
+        if (prevState.brands !== props.brands) {
+          return {
+            brands: props.brands
+          };
+        }
+
+        if (prevState.models !== props.models) {
+          return {
+            models: props.models
+          };
+        }
+
+        if (prevState.materials !== props.materials) {
+          return {
+            materials: props.materials
+          };
+        }
+
         return null;
       }
     }]);
@@ -947,7 +983,10 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
+        requestInstance = _ref.requestInstance,
+        brands = _ref.brands,
+        models = _ref.models,
+        materials = _ref.materials;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -956,6 +995,9 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
+      brands: brands,
+      models: models,
+      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,