\n )\n}\n\nSearchSort.propTypes = {\n searchSort: PropTypes.array.isRequired,\n handleToggleSortView: PropTypes.func,\n selectedSort: PropTypes.string.isRequired,\n isSortViewExpanded: PropTypes.bool.isRequired,\n}\n\nexport default SearchSort\n","const eventsConstants = {\n ON_CLICK: \"click\",\n ON_MOUSE_ENTER: \"mouseenter\",\n ON_MOUSE_LEAVE: \"mouseleave\",\n ON_MOUSE_UP: \"mouseup\",\n ON_TOUCH_END: \"touchend\",\n ON_FOCUS: \"focus\",\n ON_BLUR: \"blur\",\n}\n\nexport default eventsConstants\n","import { Children, cloneElement, isValidElement } from 'react';\n/**\n * Given `this.props.children`, return an object mapping key to child.\n *\n * @param {*} children `this.props.children`\n * @return {object} Mapping of key to child\n */\n\nexport function getChildMapping(children, mapFn) {\n var mapper = function mapper(child) {\n return mapFn && isValidElement(child) ? mapFn(child) : child;\n };\n\n var result = Object.create(null);\n if (children) Children.map(children, function (c) {\n return c;\n }).forEach(function (child) {\n // run the map function here instead so that the key is the computed one\n result[child.key] = mapper(child);\n });\n return result;\n}\n/**\n * When you're adding or removing children some may be added or removed in the\n * same render pass. We want to show *both* since we want to simultaneously\n * animate elements in and out. This function takes a previous set of keys\n * and a new set of keys and merges them with its best guess of the correct\n * ordering. In the future we may expose some of the utilities in\n * ReactMultiChild to make this easy, but for now React itself does not\n * directly have this concept of the union of prevChildren and nextChildren\n * so we implement it here.\n *\n * @param {object} prev prev children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @param {object} next next children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @return {object} a key set that contains all keys in `prev` and all keys\n * in `next` in a reasonable order.\n */\n\nexport function mergeChildMappings(prev, next) {\n prev = prev || {};\n next = next || {};\n\n function getValueForKey(key) {\n return key in next ? next[key] : prev[key];\n } // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n\n\n var nextKeysPending = Object.create(null);\n var pendingKeys = [];\n\n for (var prevKey in prev) {\n if (prevKey in next) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n } else {\n pendingKeys.push(prevKey);\n }\n }\n\n var i;\n var childMapping = {};\n\n for (var nextKey in next) {\n if (nextKeysPending[nextKey]) {\n for (i = 0; i < nextKeysPending[nextKey].length; i++) {\n var pendingNextKey = nextKeysPending[nextKey][i];\n childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n } // Finally, add the keys which didn't appear before any key in `next`\n\n\n for (i = 0; i < pendingKeys.length; i++) {\n childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);\n }\n\n return childMapping;\n}\n\nfunction getProp(child, prop, props) {\n return props[prop] != null ? props[prop] : child.props[prop];\n}\n\nexport function getInitialChildMapping(props, onExited) {\n return getChildMapping(props.children, function (child) {\n return cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n appear: getProp(child, 'appear', props),\n enter: getProp(child, 'enter', props),\n exit: getProp(child, 'exit', props)\n });\n });\n}\nexport function getNextChildMapping(nextProps, prevChildMapping, onExited) {\n var nextChildMapping = getChildMapping(nextProps.children);\n var children = mergeChildMappings(prevChildMapping, nextChildMapping);\n Object.keys(children).forEach(function (key) {\n var child = children[key];\n if (!isValidElement(child)) return;\n var hasPrev = (key in prevChildMapping);\n var hasNext = (key in nextChildMapping);\n var prevChild = prevChildMapping[key];\n var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)\n\n if (hasNext && (!hasPrev || isLeaving)) {\n // console.log('entering', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n } else if (!hasNext && hasPrev && !isLeaving) {\n // item is old (exiting)\n // console.log('leaving', key)\n children[key] = cloneElement(child, {\n in: false\n });\n } else if (hasNext && hasPrev && isValidElement(prevChild)) {\n // item hasn't changed transition states\n // copy over the last transition props;\n // console.log('unchanged', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: prevChild.props.in,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n }\n });\n return children;\n}","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { getChildMapping, getInitialChildMapping, getNextChildMapping } from './utils/ChildMapping';\n\nvar values = Object.values || function (obj) {\n return Object.keys(obj).map(function (k) {\n return obj[k];\n });\n};\n\nvar defaultProps = {\n component: 'div',\n childFactory: function childFactory(child) {\n return child;\n }\n};\n/**\n * The `` component manages a set of transition components\n * (`` and ``) in a list. Like with the transition\n * components, `` is a state machine for managing the mounting\n * and unmounting of components over time.\n *\n * Consider the example below. As items are removed or added to the TodoList the\n * `in` prop is toggled automatically by the ``.\n *\n * Note that `` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual transition\n * component. This means you can mix and match animations across different list\n * items.\n */\n\nvar TransitionGroup = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(TransitionGroup, _React$Component);\n\n function TransitionGroup(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n\n var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear\n\n\n _this.state = {\n contextValue: {\n isMounting: true\n },\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n\n var _proto = TransitionGroup.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.mounted = true;\n this.setState({\n contextValue: {\n isMounting: false\n }\n });\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.mounted = false;\n };\n\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n return {\n children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n } // node is `undefined` when user provided `nodeRef` prop\n ;\n\n _proto.handleExited = function handleExited(child, node) {\n var currentChildMapping = getChildMapping(this.props.children);\n if (child.key in currentChildMapping) return;\n\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n\n if (this.mounted) {\n this.setState(function (state) {\n var children = _extends({}, state.children);\n\n delete children[child.key];\n return {\n children: children\n };\n });\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n Component = _this$props.component,\n childFactory = _this$props.childFactory,\n props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n\n var contextValue = this.state.contextValue;\n var children = values(this.state.children).map(childFactory);\n delete props.appear;\n delete props.enter;\n delete props.exit;\n\n if (Component === null) {\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, children);\n }\n\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, /*#__PURE__*/React.createElement(Component, props, children));\n };\n\n return TransitionGroup;\n}(React.Component);\n\nTransitionGroup.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * `` renders a `
` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","\n import API from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n \n import setAttributes from \"!../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!../../../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./Overlay.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = (styleElement) => {\n const stackerElement = document.querySelector(\"dy-stackers\")\n if (stackerElement === null) {\n return\n }\n if (stackerElement.__DY_INSERT_STYLE_FN === undefined) {\n return\n }\n stackerElement.__DY_INSERT_STYLE_FN(styleElement)\n};\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!../../../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./Overlay.scss\";\n export default content && content.locals ? content.locals : undefined;\n","// Libraries\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\nimport domUtil from \"lib/dom/dom-util\"\n\n// Styles\nimport \"./Overlay.scss\"\n\nfunction Overlay({ isCsAgent }) {\n if (isCsAgent) {\n const asmBanner = domUtil.findFirst(\"#asmBanner\")\n const overlayTopStyle = {\n top: asmBanner ? asmBanner.offsetHeight + 100 : \"auto\",\n }\n\n return \n }\n\n const promoStrip = domUtil.findFirst(\".persistent-promo\")\n const overlayTopStyle = {\n top: promoStrip ? promoStrip.offsetHeight + 100 : \"auto\",\n }\n return \n}\nexport default Overlay\n\nOverlay.propTypes = {\n isCsAgent: PropTypes.bool,\n}\n","const searchPageConfig = {\n FILTER_DISPLAY_COUNT_DESKTOP: 5,\n FILTER_DISPLAY_COUNT_MOBILE: 10,\n INFINITE_LOADING_HEIGHT_RANGE_DESKTOP: 700,\n INFINITE_LOADING_HEIGHT_RANGE_MOBILE: 1200,\n BLOOMREACH_COOKIE: \"_br_uid_2\",\n FILTER_PRICE_CODE: \"dyprice\",\n}\n\nexport default searchPageConfig\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n \n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!../../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!../../../../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!../../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./FilterMainCategory.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = (styleElement) => {\n const stackerElement = document.querySelector(\"dy-stackers\")\n if (stackerElement === null) {\n return\n }\n if (stackerElement.__DY_INSERT_STYLE_FN === undefined) {\n return\n }\n stackerElement.__DY_INSERT_STYLE_FN(styleElement)\n};\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!../../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!../../../../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!../../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./FilterMainCategory.scss\";\n export default content && content.locals ? content.locals : undefined;\n","// Packages\nimport { Fragment, useCallback, useEffect, useState } from \"react\"\nimport queryString from \"query-string\"\nimport PropTypes from \"prop-types\"\nimport classNames from \"classnames\"\nimport MediaQuery from \"react-responsive\"\n// import { Field } from 'redux-form';\n//import { CSSTransition } from \"react-transition-group\"\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\"\n\n// Utils\nimport isMobile from \"components/Stacker/utils/device-check\"\n\n// Components\n// import ClearFilter from 'components/search/ClearFilter/ClearFilter';\nimport Overlay from \"components/Stacker/components/Overlay/Overlay\"\n\n// Configs\nimport BreakPointConfig from \"components/Stacker/constants/breakpoints\"\nimport SPC from \"components/Stacker/config/SearchPageConfig\"\nimport Events from \"components/Stacker/constants/events\"\n\n// Actions\nimport {\n toogleFilterCategory,\n expandFilterCategory,\n} from \"components/Stacker/actions/SearchActions\"\n\n// Styles\nimport \"./FilterMainCategory.scss\"\nimport { useSelector } from \"react-redux\"\nimport { useDispatch } from \"react-redux\"\nimport { useI18nContext } from \"i18n/i18n-react\"\n\nfunction findQueryValue({ code, filterItemCode, searchValues }) {\n if (\n searchValues &&\n searchValues[code] &&\n searchValues[code].findIndex((i) => i === `\"${filterItemCode}\"`) >= 0\n ) {\n return true\n }\n return false\n}\n\nfunction FilterMainCategory({\n filterCategory,\n isExpanded,\n shouldShowOverlay = true,\n index,\n collapsedFilterCategories,\n handleFilterChange,\n}) {\n const dispatch = useDispatch()\n const { LL } = useI18nContext()\n //const searchValues = useSelector((state) => state.search.filters)\n const selectedFilterItems = useSelector(\n (state) => state.search.filters.selectedFilterItems\n )\n\n // useEffect(() => {\n // handleNativeToogle()\n // })\n const getSubCategories = () => {\n const { code, values, rangeFilter, category, decimalFilter } =\n filterCategory\n let subFilters = values\n\n // here the change will happen for the category name\n const isShowAllFilterOption =\n collapsedFilterCategories[code] && category === \"true\" // If not expanded yet\n\n if (isShowAllFilterOption) {\n let filterDisplayCount = SPC.FILTER_DISPLAY_COUNT_DESKTOP\n if (isMobile()) {\n filterDisplayCount = SPC.FILTER_DISPLAY_COUNT_MOBILE\n }\n subFilters = subFilters.slice(0, filterDisplayCount)\n }\n\n const filterMenuDirectionReverse =\n index > 3\n ? \"filter-dropdown-menu filter-dropdown-menu--left\"\n : \"filter-dropdown-menu filter-dropdown-menu--right\"\n\n if (isExpanded && subFilters.length > 0) {\n return (\n \n {subFilters.map((filterItem) => {\n const {\n name: filterItemName,\n imageUrl,\n count,\n code: filterItemCode,\n } = filterItem\n if (filterItemName) {\n let selectedQuery = `${code}:\"${filterItemCode}\"`\n\n const filterName = filterItemName.toLowerCase()\n\n let dataQuery = selectedQuery\n\n if (rangeFilter) {\n selectedQuery = `${code}:\"${filterItemName}\"`\n dataQuery = `${code}:[${filterItemCode}]`\n }\n\n // redux form is having some issue with the decimal as part of string thus replacing it with '-'\n // but when the query goes to the server , it will be with the '.'\n\n if (decimalFilter && filterItemCode.indexOf(\".\") > -1) {\n selectedQuery = `${code}:\"${filterItemCode.replace(\n /\\./g,\n \"-\"\n )}\"`\n }\n\n const queryValue = findQueryValue({\n code,\n filterItemCode,\n searchValues: selectedFilterItems,\n })\n\n return (\n
\n onProductClick(selectedVariant.code)}\n />\n {/* //TODO: was d-inline before needing to hide for portable */}\n \n {LL.bracelets.quickView()}\n \n \n
*/}\n