@blateral/b.kit 2.8.0 → 2.8.2

package/esm/sections.pois.js

@@ -1,4 +1,4 @@
-import { a as __makeTemplateObject, _ as __assign, h as Magnifier, ab as CrossBubble, f as Cross, ac as Filter, L as LocationPin, a9 as CurrentLocation, $ as MyLocation, k as __awaiter, l as __generator } from './Filter-19220970.js';
+import { a as __makeTemplateObject, _ as __assign, h as Magnifier, ab as CrossBubble, f as Cross, ac as Filter, e as __spreadArray, L as LocationPin, a9 as CurrentLocation, $ as MyLocation, k as __awaiter, l as __generator } from './Filter-19220970.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { S as Section, m as mapToBgMode } from './Section-bd61eb2f.js';
@@ -9,7 +9,7 @@ import { s as spacings, m as mq, g as getColors, w as withRange, c as getGlobals
 import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
 import { G as Grid } from './Grid-7b33e271.js';
 import { I as InfoList } from './InfoList-b6980a42.js';
-import { P as POIFacts, F as FilterBar, a as POICard } from './FilterBar-f9e957c1.js';
+import { P as POIFacts, F as FilterBar, a as POICard } from './FilterBar-2a2a09b7.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 import { s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
 import './useScroll-881c7b04.js';
@@ -22,7 +22,7 @@ import './concat-ab3c66f2.js';
 import './clamp-12d37b65.js';
 import './FilterField-bec061bc.js';
 import './useLazyInput-0b6932aa.js';
-import './MultiselectDropdown-10ab18cf.js';
+import './MultiselectDropdown-a97be6bc.js';
 import './formFieldText-f4188e55.js';
 import './useMounted-1e4cc87b.js';
 import './Checkbox-1957067a.js';
@@ -44,7 +44,7 @@ var Facts = styled(POIFacts).withConfig({
 var PoiTitle = styled(Heading).withConfig({
   displayName: "PointOfInterestDetail__PoiTitle",
   componentId: "sc-hksryh-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
 var PoiText = styled(Copy).withConfig({
   displayName: "PointOfInterestDetail__PoiText",
   componentId: "sc-hksryh-3"
@@ -114,7 +114,7 @@ var PointOfInterestDetail = function (_a) {
   })))));
 };
 var PointOfInterestDetail$1 = withLibTheme(PointOfInterestDetail);
-var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1;
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1;
 
 var poiExactNameFilter = function (filterQuery) {
   return function (value) {
@@ -249,10 +249,12 @@ var filterPois = function (filterQuery, pois) {
   return prioList;
 };
 
-var getFilterMatches = function (filterQuery, includeIds, items) {
+var getFilterMatches = function (filterQuery, categoryFilters, items) {
+  var _a;
+
   var searchMatches = new Map();
 
-  if (!filterQuery && !includeIds.length) {
+  if (!filterQuery && !categoryFilters.length) {
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
       var item = items_1[_i];
       searchMatches.set(item.id, {
@@ -262,10 +264,12 @@ var getFilterMatches = function (filterQuery, includeIds, items) {
     }
   }
 
-  for (var _a = 0, items_2 = items; _a < items_2.length; _a++) {
-    var item = items_2[_a];
+  for (var _b = 0, items_2 = items; _b < items_2.length; _b++) {
+    var item = items_2[_b];
 
-    if (includeIds.includes(item.id)) {
+    if ((_a = item.facts) === null || _a === void 0 ? void 0 : _a.some(function (fact) {
+      return categoryFilters.includes(fact);
+    })) {
       searchMatches.set(item.id, {
         item: item,
         priority: 1
@@ -276,8 +280,8 @@ var getFilterMatches = function (filterQuery, includeIds, items) {
 
   var matches = filterQuery ? filterPois(escapeRegExp(filterQuery), items || []) : [];
 
-  for (var _b = 0, matches_1 = matches; _b < matches_1.length; _b++) {
-    var match = matches_1[_b];
+  for (var _c = 0, matches_1 = matches; _c < matches_1.length; _c++) {
+    var match = matches_1[_c];
     if (searchMatches.has(match.item.id)) continue;
     searchMatches.set(match.item.id, match);
   }
@@ -341,17 +345,24 @@ var index = /*#__PURE__*/Object.freeze({
     PoiFilterBar: PoiFilterBar
 });
 
+var POISection = styled(Section).withConfig({
+  displayName: "PointOfInterestOverview__POISection",
+  componentId: "sc-epctuk-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    overflow: visible;\n"], ["\n    overflow: visible;\n"])));
 var Content = styled.div.withConfig({
   displayName: "PointOfInterestOverview__Content",
-  componentId: "sc-epctuk-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge * 5, mq.large, spacings.nudge * 3);
+  componentId: "sc-epctuk-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge * 5, mq.large, spacings.nudge * 3);
 var PoiOverviewFilterBar = styled(PoiFilterBar).withConfig({
   displayName: "PointOfInterestOverview__PoiOverviewFilterBar",
-  componentId: "sc-epctuk-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"])), function (_a) {
+  componentId: "sc-epctuk-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n    border-radius: ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n    border-radius: ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.globals.sections.edgeRadius;
 }, spacings.nudge * 5, mq.medium);
 
 var PointOfInterestOverview = function (_a) {
@@ -380,12 +391,27 @@ var PointOfInterestOverview = function (_a) {
       filters = _d[0],
       setFilters = _d[1];
 
+  var categories = useMemo(function () {
+    return pois === null || pois === void 0 ? void 0 : pois.reduce(function (acc, poi) {
+      var newCategories = __spreadArray([], acc, true);
+
+      for (var _i = 0, _a = poi.facts || []; _i < _a.length; _i++) {
+        var fact = _a[_i];
+
+        if (!newCategories.includes(fact)) {
+          newCategories.push(fact);
+        }
+      }
+
+      return newCategories;
+    }, []);
+  }, [pois]);
   var poiMatches = useMemo(function () {
     var matches = getFilterMatches((filters === null || filters === void 0 ? void 0 : filters.textFilter) || '', (filters === null || filters === void 0 ? void 0 : filters.categoryFilter) || [], pois || []) || pois;
     return Array.from(matches).map(function (m) {
       return m[1];
     });
-  }, [pois, filters]);
+  }, [filters === null || filters === void 0 ? void 0 : filters.textFilter, filters === null || filters === void 0 ? void 0 : filters.categoryFilter, pois]);
   useEffect(function () {
     if (filters.textFilter) {
       setUrlParam(filterName, filters.textFilter);
@@ -399,7 +425,7 @@ var PointOfInterestOverview = function (_a) {
       deleteUrlParam(factFiltername);
     }
   }, [filterName, factFiltername, filters.textFilter, filters.categoryFilter]);
-  return React__default.createElement(Section, {
+  return React__default.createElement(POISection, {
     addSeperation: true,
     anchorId: anchorId,
     bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
@@ -417,10 +443,10 @@ var PointOfInterestOverview = function (_a) {
     onChange: setFilters,
     textFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.textFilter) || undefined,
     categoryFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.categoryFilter) ? __assign(__assign({}, poiFilters.categoryFilter), {
-      items: pois === null || pois === void 0 ? void 0 : pois.map(function (poi) {
+      items: categories === null || categories === void 0 ? void 0 : categories.map(function (cat) {
         return {
-          value: poi.id,
-          label: poi.name
+          value: cat,
+          label: cat
         } || [];
       })
     }) : undefined,
@@ -428,7 +454,8 @@ var PointOfInterestOverview = function (_a) {
     closeIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.closeIcon,
     toggleLabel: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.toggleLabel,
     filterIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.filterIcon,
-    indicator: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.indicator
+    indicator: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.indicator,
+    isInverted: isInverted
   }) : null, React__default.createElement(Content, null, (_b = poiMatches === null || poiMatches === void 0 ? void 0 : poiMatches.sort(function (a, b) {
     return a.priority - b.priority;
   })) === null || _b === void 0 ? void 0 : _b.map(function (poi, i) {
@@ -440,7 +467,7 @@ var PointOfInterestOverview = function (_a) {
   }))));
 };
 var PointOfInterestOverview$1 = withLibTheme(PointOfInterestOverview);
-var templateObject_1$1, templateObject_2$1;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1;
 
 var genHeightStyles = function () {
   return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"], ["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"])), function (_a) {
@@ -618,13 +645,27 @@ var PointOfInterestMap = function (_a) {
       filters = _k[0],
       setFilters = _k[1];
 
+  var categories = useMemo(function () {
+    return pois === null || pois === void 0 ? void 0 : pois.reduce(function (acc, poi) {
+      var newCategories = __spreadArray([], acc, true);
+
+      for (var _i = 0, _a = poi.facts || []; _i < _a.length; _i++) {
+        var fact = _a[_i];
+
+        if (!newCategories.includes(fact)) {
+          newCategories.push(fact);
+        }
+      }
+
+      return newCategories;
+    }, []);
+  }, [pois]);
   var activePois = useMemo(function () {
-    // text matches
     var matches = getFilterMatches((filters === null || filters === void 0 ? void 0 : filters.textFilter) || '', (filters === null || filters === void 0 ? void 0 : filters.categoryFilter) || [], pois || []) || pois;
     return Array.from(matches).map(function (m) {
       return m[1].item;
     });
-  }, [pois, filters]);
+  }, [filters === null || filters === void 0 ? void 0 : filters.textFilter, filters === null || filters === void 0 ? void 0 : filters.categoryFilter, pois]);
   var activePOI = useMemo(function () {
     return activePois === null || activePois === void 0 ? void 0 : activePois.find(function (poi) {
       return poi.id === activePoiId;
@@ -825,10 +866,10 @@ var PointOfInterestMap = function (_a) {
     onChange: setFilters,
     textFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.textFilter) || undefined,
     categoryFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.categoryFilter) ? __assign(__assign({}, poiFilters.categoryFilter), {
-      items: pois === null || pois === void 0 ? void 0 : pois.map(function (poi) {
+      items: categories === null || categories === void 0 ? void 0 : categories.map(function (cat) {
         return {
-          value: poi.id,
-          label: poi.name
+          value: cat,
+          label: cat
         } || [];
       })
     }) : undefined,