@mbpockets/shared-ui 0.1.18

package/dist/SearchPage/Filters.cjs

@@ -0,0 +1,270 @@
+"use client";
+'use strict';
+
+var Typography2 = require('@mui/material/Typography');
+var FormControl = require('@mui/material/FormControl');
+var RadioGroup = require('@mui/material/RadioGroup');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Radio = require('@mui/material/Radio');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Box = require('@mui/material/Box');
+var Autocomplete = require('@mui/material/Autocomplete');
+var TextField = require('@mui/material/TextField');
+var Popper = require('@mui/material/Popper');
+var Divider = require('@mui/material/Divider');
+var FormGroup = require('@mui/material/FormGroup');
+var Checkbox = require('@mui/material/Checkbox');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Typography2__default = /*#__PURE__*/_interopDefault(Typography2);
+var FormControl__default = /*#__PURE__*/_interopDefault(FormControl);
+var RadioGroup__default = /*#__PURE__*/_interopDefault(RadioGroup);
+var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
+var Radio__default = /*#__PURE__*/_interopDefault(Radio);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Box__default = /*#__PURE__*/_interopDefault(Box);
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var TextField__default = /*#__PURE__*/_interopDefault(TextField);
+var Popper__default = /*#__PURE__*/_interopDefault(Popper);
+var Divider__default = /*#__PURE__*/_interopDefault(Divider);
+var FormGroup__default = /*#__PURE__*/_interopDefault(FormGroup);
+var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
+
+var SORT_OPTIONS = [
+  { id: "relevance", label: "Relevance" },
+  { id: "newest", label: "Newest" },
+  { id: "popular", label: "Most Popular" }
+];
+var SortOptions = ({
+  defaultValue = "relevance",
+  onChange
+}) => {
+  const handleSortChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup__default.default, { defaultValue, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        value: option.id,
+        control: /* @__PURE__ */ jsxRuntime.jsx(Radio__default.default, {}),
+        label: option.label
+      },
+      option.id
+    )) }) })
+  ] });
+};
+var SortOptions_default = SortOptions;
+var TagsFilter = ({
+  onChange,
+  tags: Tags = []
+}) => {
+  const [mustHaveTags, setMustHaveTags] = React__default.default.useState([]);
+  const [mustNotHaveTags, setMustNotHaveTags] = React__default.default.useState([]);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React__default.default.useState([]);
+  Tags = !!Tags ? Tags : [];
+  const [inputValues, setInputValues] = React__default.default.useState({
+    mustHave: "",
+    mustNotHave: "",
+    shouldHaveAtLeastOne: ""
+  });
+  const tagOptions = React__default.default.useMemo(() => {
+    console.log("available tags: " + JSON.stringify(Tags));
+    console.log(!Tags);
+    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    return Tags.map((tag) => ({
+      value: tag.id,
+      label: tag.label
+    }));
+  }, [Tags]);
+  const handleTagChange = (tagId, category) => {
+    let newTags = [];
+    switch (category) {
+      case "mustHave":
+        newTags = mustHaveTags.includes(tagId) ? mustHaveTags.filter((id) => id !== tagId) : [...mustHaveTags, tagId];
+        setMustHaveTags(newTags);
+        break;
+      case "mustNotHave":
+        newTags = mustNotHaveTags.includes(tagId) ? mustNotHaveTags.filter((id) => id !== tagId) : [...mustNotHaveTags, tagId];
+        setMustNotHaveTags(newTags);
+        break;
+      case "shouldHaveAtLeastOne":
+        newTags = shouldHaveAtLeastOneTags.includes(tagId) ? shouldHaveAtLeastOneTags.filter((id) => id !== tagId) : [...shouldHaveAtLeastOneTags, tagId];
+        setShouldHaveAtLeastOneTags(newTags);
+        break;
+    }
+    if (onChange) {
+      onChange({
+        mustHave: category === "mustHave" ? newTags : mustHaveTags,
+        mustNotHave: category === "mustNotHave" ? newTags : mustNotHaveTags,
+        shouldHaveAtLeastOne: category === "shouldHaveAtLeastOne" ? newTags : shouldHaveAtLeastOneTags
+      });
+    }
+  };
+  const renderSelectedTags = (selectedTags, category) => {
+    const tagValues = [];
+    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    Tags.forEach((tag) => {
+      if (selectedTags.includes(tag.id)) {
+        tagValues.push(tag);
+      }
+    });
+    if (tagValues.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+        style: {
+          background: tag.color || "#bfbcbb",
+          color: "white",
+          textShadow: "black 0.2em 0.2em 0.4em"
+        },
+        children: [
+          tag.label,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleTagChange(tag.id, category),
+              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      tag.id
+    )) });
+  };
+  const createTagSelector = (category, label) => {
+    const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      renderSelectedTags(selectedTags, category),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options: tagOptions,
+          filterOptions: (options, state) => {
+            const tagsToExclude = /* @__PURE__ */ new Set();
+            selectedTags.forEach((id) => tagsToExclude.add(id));
+            if (category !== "mustHave") {
+              mustHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "mustNotHave") {
+              mustNotHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "shouldHaveAtLeastOne") {
+              shouldHaveAtLeastOneTags.forEach((id) => tagsToExclude.add(id));
+            }
+            return options.filter(
+              (option) => (
+                // Exclude options already selected in any category
+                !tagsToExclude.has(option.value) && // Filter based on user input
+                option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+              )
+            ).slice(0, 3);
+          },
+          value: null,
+          inputValue: inputValues[category],
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValues({
+                ...inputValues,
+                [category]: newInputValue
+              });
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              handleTagChange(newValue.value, category);
+            }
+            setInputValues({
+              ...inputValues,
+              [category]: ""
+            });
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: `Select ${label}` })
+        },
+        `${category}-${selectedTags.join("-")}`
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    createTagSelector("mustHave", "Must Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    createTagSelector("mustNotHave", "Must Not Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
+  ] });
+};
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport"
+            // Prevent the Popper from going outside the viewport
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset: [0, -10]
+            // Set negative vertical offset (adjust value as needed)
+          }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+var TagsFilter_default = TagsFilter;
+var FILTER_TYPES = [
+  { id: "player", label: "Players" },
+  { id: "event", label: "Events", disabled: true },
+  { id: "table", label: "Tables", disabled: true }
+];
+var TypeFilter = ({ onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React__default.default.useState([]);
+  const handleTypeChange = (typeId) => {
+    const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
+    setSelectedTypes(newSelectedTypes);
+    onChange == null ? void 0 : onChange(newSelectedTypes);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormGroup__default.default, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        control: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox__default.default,
+          {
+            checked: selectedTypes.includes(type.id),
+            onChange: () => handleTypeChange(type.id),
+            disabled: type.disabled
+          }
+        ),
+        label: type.label
+      },
+      type.id
+    )) })
+  ] });
+};
+var TypeFilter_default = TypeFilter;
+
+exports.SortOptions = SortOptions_default;
+exports.TagsFilter = TagsFilter_default;
+exports.TypeFilter = TypeFilter_default;
+//# sourceMappingURL=Filters.cjs.map
+//# sourceMappingURL=Filters.cjs.map

package/dist/SearchPage/Filters.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SearchPage/Filters/SortOptions.tsx","../../src/components/SearchPage/Filters/TagsFilter.tsx","../../src/components/SearchPage/Filters/TypeFilter.tsx"],"names":["jsxs","Fragment","jsx","Typography","FormControl","RadioGroup","FormControlLabel","Radio","React","Box","Autocomplete","TextField","Divider","Popper","FormGroup","Checkbox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAE,EAAA,EAAI,WAAA,EAAa,KAAA,EAAO,WAAA,EAAY;AAAA,EACtC,EAAE,EAAA,EAAI,QAAA,EAAU,KAAA,EAAO,QAAA,EAAS;AAAA,EAChC,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,cAAA;AAC1B,CAAA;AAEA,IAAM,cAA0C,CAAC;AAAA,EAC/C,YAAA,GAAe,WAAA;AAAA,EACf;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAA+C;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,MAAM,MAAA,CAAO,KAAA,CAAA;AAAA,EAC1B,CAAA;AAEA,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,4BAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,YAAA,EAAY,MAAC,QAAA,EAAA,SAAA,EAEtC,CAAA;AAAA,oBACAD,cAAA,CAACE,4BAAA,EAAA,EACC,QAAA,kBAAAF,cAAA,CAACG,2BAAA,EAAA,EAAW,YAAA,EAA4B,UAAU,gBAAA,EAC/C,QAAA,EAAA,YAAA,CAAa,GAAA,CAAI,CAAC,MAAA,qBACjBH,cAAA;AAAA,MAACI,iCAAA;AAAA,MAAA;AAAA,QAEC,OAAO,MAAA,CAAO,EAAA;AAAA,QACd,OAAA,iCAAUC,sBAAA,EAAA,EAAM,CAAA;AAAA,QAChB,OAAO,MAAA,CAAO;AAAA,OAAA;AAAA,MAHT,MAAA,CAAO;AAAA,KAKf,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,mBAAA,GAAQ;ACvBf,IAAM,aAAwC,CAAC;AAAA,EAC7C,QAAA;AAAA,EAAU,IAAA,EAAM,OAAO;AACzB,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,IAAIC,sBAAA,CAAM,QAAA,CAAmB,EAAE,CAAA;AACnE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,IAAIA,sBAAA,CAAM,QAAA,CAAmB,EAAE,CAAA;AACzE,EAAA,MAAM,CAAC,wBAAA,EAA0B,2BAA2B,IAAIA,sBAAA,CAAM,QAAA,CAAmB,EAAE,CAAA;AAC3F,EAAA,IAAA,GAAO,CAAC,CAAC,IAAA,GAAO,IAAA,GAAO,EAAC;AAExB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,uBAAM,QAAA,CAAS;AAAA,IACnD,QAAA,EAAU,EAAA;AAAA,IACV,WAAA,EAAa,EAAA;AAAA,IACb,oBAAA,EAAsB;AAAA,GACvB,CAAA;AAGD,EAAA,MAAM,UAAA,GAAaA,sBAAA,CAAM,OAAA,CAAQ,MAAM;AACrC,IAAA,OAAA,CAAQ,GAAA,CAAI,kBAAA,GAAqB,IAAA,CAAK,SAAA,CAAU,IAAI,CAAC,CAAA;AACrD,IAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAI,CAAA;AACjB,IAAA,IAAI,CAAC,QAAQ,IAAA,CAAK,MAAA,IAAU,KAAK,CAAC,IAAA,CAAK,GAAA,EAAK,OAAO,EAAC;AACpD,IAAA,OAAO,IAAA,CAAK,IAAI,CAAA,GAAA,MAAQ;AAAA,MACtB,OAAO,GAAA,CAAI,EAAA;AAAA,MACX,OAAO,GAAA,CAAI;AAAA,KACb,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,EAAe,QAAA,KAA0B;AAChE,IAAA,IAAI,UAAoB,EAAC;AAEzB,IAAA,QAAQ,QAAA;AAAU,MAChB,KAAK,UAAA;AACH,QAAA,OAAA,GAAU,YAAA,CAAa,QAAA,CAAS,KAAK,CAAA,GACjC,YAAA,CAAa,MAAA,CAAO,CAAA,EAAA,KAAM,EAAA,KAAO,KAAK,CAAA,GACtC,CAAC,GAAG,cAAc,KAAK,CAAA;AAC3B,QAAA,eAAA,CAAgB,OAAO,CAAA;AACvB,QAAA;AAAA,MACF,KAAK,aAAA;AACH,QAAA,OAAA,GAAU,eAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GACpC,eAAA,CAAgB,MAAA,CAAO,CAAA,EAAA,KAAM,EAAA,KAAO,KAAK,CAAA,GACzC,CAAC,GAAG,iBAAiB,KAAK,CAAA;AAC9B,QAAA,kBAAA,CAAmB,OAAO,CAAA;AAC1B,QAAA;AAAA,MACF,KAAK,sBAAA;AACH,QAAA,OAAA,GAAU,wBAAA,CAAyB,QAAA,CAAS,KAAK,CAAA,GAC7C,wBAAA,CAAyB,MAAA,CAAO,CAAA,EAAA,KAAM,EAAA,KAAO,KAAK,CAAA,GAClD,CAAC,GAAG,0BAA0B,KAAK,CAAA;AACvC,QAAA,2BAAA,CAA4B,OAAO,CAAA;AACnC,QAAA;AAAA;AAGJ,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,QAAA,CAAS;AAAA,QACP,QAAA,EAAU,QAAA,KAAa,UAAA,GAAa,OAAA,GAAU,YAAA;AAAA,QAC9C,WAAA,EAAa,QAAA,KAAa,aAAA,GAAgB,OAAA,GAAU,eAAA;AAAA,QACpD,oBAAA,EAAsB,QAAA,KAAa,sBAAA,GAAyB,OAAA,GAAU;AAAA,OACvE,CAAA;AAAA,IACH;AAAA,EACF,CAAA;AAGA,EAAA,MAAM,kBAAA,GAAqB,CAAC,YAAA,EAAwB,QAAA,KAA0B;AAC5E,IAAA,MAAM,YAAmB,EAAC;AAE1B,IAAA,IAAI,CAAC,QAAQ,IAAA,CAAK,MAAA,IAAU,KAAK,CAAC,IAAA,CAAK,KAAK,OAAO,IAAA;AACnD,IAAA,IAAA,CAAK,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACpB,MAAA,IAAI,YAAA,CAAa,QAAA,CAAS,GAAA,CAAI,EAAE,CAAA,EAAG;AACjC,QAAA,SAAA,CAAU,KAAK,GAAG,CAAA;AAAA,MACpB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,IAAI,SAAA,CAAU,WAAW,CAAA,EAAG;AAC1B,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACEN,cAAAA,CAACO,oBAAA,EAAA,EAAI,IAAI,EAAE,OAAA,EAAS,QAAQ,QAAA,EAAU,MAAA,EAAQ,GAAA,EAAK,CAAA,EAAG,IAAI,CAAA,EAAE,EACzD,oBAAU,GAAA,CAAI,CAAC,wBACdT,eAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QAEC,SAAA,EAAU,mFAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,UAAA,EAAY,IAAI,KAAA,IAAS,SAAA;AAAA,UACzB,KAAA,EAAO,OAAA;AAAA,UACP,UAAA,EAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,GAAA,CAAI,KAAA;AAAA,0BACLE,cAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,MAAM,eAAA,CAAgB,GAAA,CAAI,IAAI,QAAQ,CAAA;AAAA,cAC/C,SAAA,EAAU,6FAAA;AAAA,cACX,QAAA,EAAA;AAAA;AAAA;AAED;AAAA,OAAA;AAAA,MAfK,GAAA,CAAI;AAAA,KAiBZ,CAAA,EACH,CAAA;AAAA,EAEJ,CAAA;AAGA,EAAA,MAAM,iBAAA,GAAoB,CAAC,QAAA,EAAuB,KAAA,KAAkB;AAClE,IAAA,MAAM,eACJ,QAAA,KAAa,UAAA,GACT,YAAA,GACA,QAAA,KAAa,gBACX,eAAA,GACA,wBAAA;AAER,IAAA,uBACEF,eAAAA,CAAAC,mBAAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAC,cAAAA,CAACC,4BAAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAY,YAAA,EAAY,IAAA,EAAC,EAAA,EAAI,EAAE,EAAA,EAAI,CAAA,EAAE,EACtD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAEC,kBAAA,CAAmB,cAAc,QAAQ,CAAA;AAAA,sBAE1CD,cAAAA;AAAA,QAACQ,6BAAA;AAAA,QAAA;AAAA,UAEC,OAAA,EAAS,UAAA;AAAA,UACT,aAAA,EAAe,CAAC,OAAA,EAAS,KAAA,KAAU;AAEjC,YAAA,MAAM,aAAA,uBAAoB,GAAA,EAAY;AAGtC,YAAA,YAAA,CAAa,OAAA,CAAQ,CAAA,EAAA,KAAM,aAAA,CAAc,GAAA,CAAI,EAAE,CAAC,CAAA;AAGhD,YAAA,IAAI,aAAa,UAAA,EAAY;AAC3B,cAAA,YAAA,CAAa,OAAA,CAAQ,CAAA,EAAA,KAAM,aAAA,CAAc,GAAA,CAAI,EAAE,CAAC,CAAA;AAAA,YAClD;AACA,YAAA,IAAI,aAAa,aAAA,EAAe;AAC9B,cAAA,eAAA,CAAgB,OAAA,CAAQ,CAAA,EAAA,KAAM,aAAA,CAAc,GAAA,CAAI,EAAE,CAAC,CAAA;AAAA,YACrD;AACA,YAAA,IAAI,aAAa,sBAAA,EAAwB;AACvC,cAAA,wBAAA,CAAyB,OAAA,CAAQ,CAAA,EAAA,KAAM,aAAA,CAAc,GAAA,CAAI,EAAE,CAAC,CAAA;AAAA,YAC9D;AAEA,YAAA,OAAO,OAAA,CACJ,MAAA;AAAA,cACC,CAAC,MAAA;AAAA;AAAA,gBAEC,CAAC,aAAA,CAAc,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA;AAAA,gBAE/B,MAAA,CAAO,MAAM,WAAA,EAAY,CAAE,SAAS,KAAA,CAAM,UAAA,CAAW,aAAa;AAAA;AAAA,aACtE,CACC,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAAA,UACf,CAAA;AAAA,UACA,KAAA,EAAO,IAAA;AAAA,UACP,UAAA,EAAY,YAAY,QAAQ,CAAA;AAAA,UAChC,aAAA,EAAe,CAAC,KAAA,EAAO,aAAA,KAAkB;AAEvC,YAAA,IAAI,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,QAAA,EAAU;AACpC,cAAA,cAAA,CAAe;AAAA,gBACb,GAAG,WAAA;AAAA,gBACH,CAAC,QAAQ,GAAG;AAAA,eACb,CAAA;AAAA,YACH;AAAA,UACF,CAAA;AAAA,UACA,QAAA,EAAU,CAAC,KAAA,EAAO,QAAA,KAAa;AAC7B,YAAA,IAAI,QAAA,EAAU;AACZ,cAAA,eAAA,CAAgB,QAAA,CAAS,OAAO,QAAQ,CAAA;AAAA,YAC1C;AAEA,YAAA,cAAA,CAAe;AAAA,cACb,GAAG,WAAA;AAAA,cACH,CAAC,QAAQ,GAAG;AAAA,aACb,CAAA;AAAA,UACH,CAAA;AAAA,UACA,KAAA,EAAO,EAAE,MAAA,EAAQ,YAAA,EAAa;AAAA,UAC9B,WAAA,EAAa,CAAC,MAAA,qBAAWR,cAAAA,CAACS,0BAAA,EAAA,EAAW,GAAG,MAAA,EAAQ,KAAA,EAAO,CAAA,OAAA,EAAU,KAAK,CAAA,CAAA,EAAI;AAAA,SAAA;AAAA,QApDrE,GAAG,QAAQ,CAAA,CAAA,EAAI,YAAA,CAAa,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA;AAqD5C,KAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACEX,eAAAA,CAAAC,mBAAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,eAACC,4BAAAA,EAAA,EAAW,SAAQ,IAAA,EAAK,YAAA,EAAY,MAAC,QAAA,EAAA,MAAA,EAEtC,CAAA;AAAA,IAEC,iBAAA,CAAkB,YAAY,gBAAgB,CAAA;AAAA,oBAE/CD,cAAAA,CAACU,wBAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,GAAE,EAAG,CAAA;AAAA,IAEvB,iBAAA,CAAkB,eAAe,oBAAoB,CAAA;AAAA,oBAEtDV,cAAAA,CAACU,wBAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,GAAE,EAAG,CAAA;AAAA,IAEvB,iBAAA,CAAkB,wBAAwB,iCAAiC;AAAA,GAAA,EAC9E,CAAA;AAEJ,CAAA;AAGA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuB;AAC3C,EAAA,uBACEV,cAAAA;AAAA,IAACW,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW;AAAA,QACT;AAAA,UACE,IAAA,EAAM,iBAAA;AAAA,UACN,OAAA,EAAS;AAAA,YACP,QAAA,EAAU;AAAA;AAAA;AACZ,SACF;AAAA,QACA;AAAA,UACE,IAAA,EAAM,QAAA;AAAA,UACN,OAAA,EAAS;AAAA,YACP,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAG;AAAA;AAAA;AACjB;AACF,OACF;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ;ACvOf,IAAM,YAAA,GAAmF;AAAA,EACvF,EAAE,EAAA,EAAI,QAAA,EAAU,KAAA,EAAO,SAAA,EAAU;AAAA,EACjC,EAAE,EAAA,EAAI,OAAA,EAAS,KAAA,EAAO,QAAA,EAAU,UAAU,IAAA,EAAK;AAAA,EAC/C,EAAE,EAAA,EAAI,OAAA,EAAS,KAAA,EAAO,QAAA,EAAU,UAAU,IAAA;AAC5C,CAAA;AAEA,IAAM,UAAA,GAAwC,CAAC,EAAE,QAAA,EAAS,KAAM;AAC9D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,IAAIL,sBAAAA,CAAM,QAAA,CAA6B,EAAE,CAAA;AAE/E,EAAA,MAAM,gBAAA,GAAmB,CAAC,MAAA,KAA6B;AACrD,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,QAAA,CAAS,MAAM,IAClD,aAAA,CAAc,MAAA,CAAO,CAAC,EAAA,KAAO,OAAO,MAAM,CAAA,GAC1C,CAAC,GAAG,eAAe,MAAM,CAAA;AAE7B,IAAA,gBAAA,CAAiB,gBAAgB,CAAA;AACjC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,gBAAA,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,uBACER,eAAAA,CAAAC,mBAAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,eAACC,4BAAAA,EAAA,EAAW,SAAQ,IAAA,EAAK,YAAA,EAAY,MAAC,QAAA,EAAA,MAAA,EAEtC,CAAA;AAAA,oBACAD,cAAAA,CAACY,0BAAA,EAAA,EACE,uBAAa,GAAA,CAAI,CAAC,yBACjBZ,cAAAA;AAAA,MAACI,iCAAAA;AAAA,MAAA;AAAA,QAEC,yBACEJ,cAAAA;AAAA,UAACa,yBAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,aAAA,CAAc,QAAA,CAAS,IAAA,CAAK,EAAE,CAAA;AAAA,YACvC,QAAA,EAAU,MAAM,gBAAA,CAAiB,IAAA,CAAK,EAAE,CAAA;AAAA,YACxC,UAAU,IAAA,CAAK;AAAA;AAAA,SACjB;AAAA,QAEF,OAAO,IAAA,CAAK;AAAA,OAAA;AAAA,MARP,IAAA,CAAK;AAAA,KAUb,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"Filters.cjs","sourcesContent":["\"use client\";\n\nimport React from 'react';\nimport Typography from '@mui/material/Typography';\nimport FormControl from '@mui/material/FormControl';\nimport RadioGroup from '@mui/material/RadioGroup';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Radio from '@mui/material/Radio';\n\ninterface SortOptionsProps {\n  defaultValue?: string;\n  onChange?: (sortOption: string) => void;\n}\n\nconst SORT_OPTIONS = [\n  { id: 'relevance', label: 'Relevance' },\n  { id: 'newest', label: 'Newest' },\n  { id: 'popular', label: 'Most Popular' },\n];\n\nconst SortOptions: React.FC<SortOptionsProps> = ({\n  defaultValue = 'relevance',\n  onChange\n}) => {\n  const handleSortChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value);\n  };\n\n  return (\n    <>\n      <Typography variant=\"h6\" gutterBottom>\n        Sort By\n      </Typography>\n      <FormControl>\n        <RadioGroup defaultValue={defaultValue} onChange={handleSortChange}>\n          {SORT_OPTIONS.map((option) => (\n            <FormControlLabel\n              key={option.id}\n              value={option.id}\n              control={<Radio />}\n              label={option.label}\n            />\n          ))}\n        </RadioGroup>\n      </FormControl>\n    </>\n  );\n};\n\nexport default SortOptions;\n","\"use client\"\nimport React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport TextField from '@mui/material/TextField';\nimport Popper, { PopperProps } from '@mui/material/Popper';\nimport {Tag} from '@/types/tag';\nimport Divider from '@mui/material/Divider';\n\ninterface TagsFilterProps {\n  onChange?: (selectedTags: {\n    mustHave: number[];\n    mustNotHave: number[];\n    shouldHaveAtLeastOne: number[];\n  }) => void;\n  tags: Tag[];\n}\n\ntype TagCategory = 'mustHave' | 'mustNotHave' | 'shouldHaveAtLeastOne';\n\n/**\n * Component for filtering search results by tags\n * Uses Autocomplete for interactive tag selection similar to PlayerTagsEdit\n * Provides three separate sections for tags: must haves, must not haves, and should contain at least one\n */\nconst TagsFilter: React.FC<TagsFilterProps> = ({ \n  onChange, tags: Tags = []\n}) => {\n  const [mustHaveTags, setMustHaveTags] = React.useState<number[]>([]);\n  const [mustNotHaveTags, setMustNotHaveTags] = React.useState<number[]>([]);\n  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React.useState<number[]>([]);\n  Tags = !!Tags ? Tags : [];\n  \n  const [inputValues, setInputValues] = React.useState({\n    mustHave: '',\n    mustNotHave: '',\n    shouldHaveAtLeastOne: ''\n  });\n\n  // Convert tags to format needed for Autocomplete\n  const tagOptions = React.useMemo(() => {\n    console.log(\"available tags: \" + JSON.stringify(Tags))\n    console.log(!Tags)\n    if (!Tags || Tags.length == 0 || !Tags.map) return [];\n    return Tags.map(tag => ({\n      value: tag.id,\n      label: tag.label\n    }));\n  }, [Tags]);\n\n  const handleTagChange = (tagId: number, category: TagCategory) => {\n    let newTags: number[] = [];\n    \n    switch (category) {\n      case 'mustHave':\n        newTags = mustHaveTags.includes(tagId)\n          ? mustHaveTags.filter(id => id !== tagId)\n          : [...mustHaveTags, tagId];\n        setMustHaveTags(newTags);\n        break;\n      case 'mustNotHave':\n        newTags = mustNotHaveTags.includes(tagId)\n          ? mustNotHaveTags.filter(id => id !== tagId)\n          : [...mustNotHaveTags, tagId];\n        setMustNotHaveTags(newTags);\n        break;\n      case 'shouldHaveAtLeastOne':\n        newTags = shouldHaveAtLeastOneTags.includes(tagId)\n          ? shouldHaveAtLeastOneTags.filter(id => id !== tagId)\n          : [...shouldHaveAtLeastOneTags, tagId];\n        setShouldHaveAtLeastOneTags(newTags);\n        break;\n    }\n    \n    if (onChange) {\n      onChange({\n        mustHave: category === 'mustHave' ? newTags : mustHaveTags,\n        mustNotHave: category === 'mustNotHave' ? newTags : mustNotHaveTags,\n        shouldHaveAtLeastOne: category === 'shouldHaveAtLeastOne' ? newTags : shouldHaveAtLeastOneTags\n      });\n    }\n  };\n\n  // Render selected tags as labels with remove buttons\n  const renderSelectedTags = (selectedTags: number[], category: TagCategory) => {\n    const tagValues: Tag[] = [];\n\n    if (!Tags || Tags.length == 0 || !Tags.map) return null;\n    Tags.forEach((tag) => {\n      if (selectedTags.includes(tag.id)) {\n        tagValues.push(tag);\n      }\n    });\n\n    if (tagValues.length === 0) {\n      return null;\n    }\n\n    return (\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\n        {tagValues.map((tag) => (\n          <span\n            key={tag.id}\n            className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n            style={{\n              background: tag.color || '#bfbcbb',\n              color: \"white\",\n              textShadow: \"black 0.2em 0.2em 0.4em\"\n            }}\n          >\n            {tag.label}\n            <button \n              type=\"button\" \n              onClick={() => handleTagChange(tag.id, category)}\n              className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n            >\n              &times;\n            </button>\n          </span>\n        ))}\n      </Box>\n    );\n  };\n\n  // Helper function to create an Autocomplete component for a specific category\n  const createTagSelector = (category: TagCategory, label: string) => {\n    const selectedTags = \n      category === 'mustHave' \n        ? mustHaveTags \n        : category === 'mustNotHave' \n          ? mustNotHaveTags \n          : shouldHaveAtLeastOneTags;\n    \n    return (\n      <>\n        <Typography variant=\"subtitle1\" gutterBottom sx={{ mt: 2 }}>\n          {label}\n        </Typography>\n        \n        {renderSelectedTags(selectedTags, category)}\n        \n        <Autocomplete\n          key={`${category}-${selectedTags.join('-')}`}\n          options={tagOptions}\n          filterOptions={(options, state) => {\n            // Determine which tags to exclude based on the current category\n            const tagsToExclude = new Set<number>();\n            \n            // Always exclude tags already selected in the current category\n            selectedTags.forEach(id => tagsToExclude.add(id));\n            \n            // Exclude tags selected in other categories\n            if (category !== 'mustHave') {\n              mustHaveTags.forEach(id => tagsToExclude.add(id));\n            }\n            if (category !== 'mustNotHave') {\n              mustNotHaveTags.forEach(id => tagsToExclude.add(id));\n            }\n            if (category !== 'shouldHaveAtLeastOne') {\n              shouldHaveAtLeastOneTags.forEach(id => tagsToExclude.add(id));\n            }\n            \n            return options\n              .filter(\n                (option) =>\n                  // Exclude options already selected in any category\n                  !tagsToExclude.has(option.value) &&\n                  // Filter based on user input\n                  option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n              )\n              .slice(0, 3); // Show up to 3 results\n          }}\n          value={null} // Clearing the selected value immediately\n          inputValue={inputValues[category]} // Bind the input value to state\n          onInputChange={(event, newInputValue) => {\n            // Check if this is clearing after selection\n            if (event && event.type === 'change') {\n              setInputValues({\n                ...inputValues,\n                [category]: newInputValue\n              });\n            }\n          }}\n          onChange={(event, newValue) => {\n            if (newValue) {\n              handleTagChange(newValue.value, category); // Update selected tags\n            }\n            // Clear the text box after selection\n            setInputValues({\n              ...inputValues,\n              [category]: ''\n            });\n          }}\n          slots={{ popper: CustomPopper }}\n          renderInput={(params) => <TextField {...params} label={`Select ${label}`} />}\n        />\n      </>\n    );\n  };\n\n  return (\n    <>\n      <Typography variant=\"h6\" gutterBottom>\n        Tags\n      </Typography>\n      \n      {createTagSelector('mustHave', 'Must Have Tags')}\n      \n      <Divider sx={{ my: 2 }} />\n      \n      {createTagSelector('mustNotHave', 'Must Not Have Tags')}\n      \n      <Divider sx={{ my: 2 }} />\n      \n      {createTagSelector('shouldHaveAtLeastOne', 'Should Contain At Least One Tag')}\n    </>\n  );\n};\n\n// Custom popper for dropdown placement\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: {\n            boundary: \"viewport\", // Prevent the Popper from going outside the viewport\n          },\n        },\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, -10], // Set negative vertical offset (adjust value as needed)\n          },\n        },\n      ]}\n      placement=\"top-start\" // Position the dropdown above the input field\n    />\n  );\n};\n\nexport default TagsFilter;","\"use client\";\n\nimport React from 'react';\nimport Typography from '@mui/material/Typography';\nimport FormGroup from '@mui/material/FormGroup';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Checkbox from '@mui/material/Checkbox';\nimport type { SearchResultType } from '@/types/search';\n\ninterface TypeFilterProps {\n  onChange?: (selectedTypes: SearchResultType[]) => void;\n}\n\nconst FILTER_TYPES: Array<{ id: SearchResultType; label: string; disabled?: boolean }> = [\n  { id: 'player', label: 'Players' },\n  { id: 'event', label: 'Events', disabled: true },\n  { id: 'table', label: 'Tables', disabled: true },\n];\n\nconst TypeFilter: React.FC<TypeFilterProps> = ({ onChange }) => {\n  const [selectedTypes, setSelectedTypes] = React.useState<SearchResultType[]>([]);\n\n  const handleTypeChange = (typeId: SearchResultType) => {\n    const newSelectedTypes = selectedTypes.includes(typeId)\n      ? selectedTypes.filter((id) => id !== typeId)\n      : [...selectedTypes, typeId];\n\n    setSelectedTypes(newSelectedTypes);\n    onChange?.(newSelectedTypes);\n  };\n\n  return (\n    <>\n      <Typography variant=\"h6\" gutterBottom>\n        Type\n      </Typography>\n      <FormGroup>\n        {FILTER_TYPES.map((type) => (\n          <FormControlLabel\n            key={type.id}\n            control={\n              <Checkbox\n                checked={selectedTypes.includes(type.id)}\n                onChange={() => handleTypeChange(type.id)}\n                disabled={type.disabled}\n              />\n            }\n            label={type.label}\n          />\n        ))}\n      </FormGroup>\n    </>\n  );\n};\n\nexport default TypeFilter;\n"]}

package/dist/SearchPage/Filters.d.cts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Tag } from '../types/tag';
+import { SearchResultType } from '../types/search';
+
+interface SortOptionsProps {
+    defaultValue?: string;
+    onChange?: (sortOption: string) => void;
+}
+declare const SortOptions: React__default.FC<SortOptionsProps>;
+
+interface TagsFilterProps {
+    onChange?: (selectedTags: {
+        mustHave: number[];
+        mustNotHave: number[];
+        shouldHaveAtLeastOne: number[];
+    }) => void;
+    tags: Tag[];
+}
+/**
+ * Component for filtering search results by tags
+ * Uses Autocomplete for interactive tag selection similar to PlayerTagsEdit
+ * Provides three separate sections for tags: must haves, must not haves, and should contain at least one
+ */
+declare const TagsFilter: React__default.FC<TagsFilterProps>;
+
+interface TypeFilterProps {
+    onChange?: (selectedTypes: SearchResultType[]) => void;
+}
+declare const TypeFilter: React__default.FC<TypeFilterProps>;
+
+export { SortOptions, TagsFilter, TypeFilter };

package/dist/SearchPage/Filters.d.ts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Tag } from '../types/tag';
+import { SearchResultType } from '../types/search';
+
+interface SortOptionsProps {
+    defaultValue?: string;
+    onChange?: (sortOption: string) => void;
+}
+declare const SortOptions: React__default.FC<SortOptionsProps>;
+
+interface TagsFilterProps {
+    onChange?: (selectedTags: {
+        mustHave: number[];
+        mustNotHave: number[];
+        shouldHaveAtLeastOne: number[];
+    }) => void;
+    tags: Tag[];
+}
+/**
+ * Component for filtering search results by tags
+ * Uses Autocomplete for interactive tag selection similar to PlayerTagsEdit
+ * Provides three separate sections for tags: must haves, must not haves, and should contain at least one
+ */
+declare const TagsFilter: React__default.FC<TagsFilterProps>;
+
+interface TypeFilterProps {
+    onChange?: (selectedTypes: SearchResultType[]) => void;
+}
+declare const TypeFilter: React__default.FC<TypeFilterProps>;
+
+export { SortOptions, TagsFilter, TypeFilter };

package/dist/SearchPage/Filters.mjs

@@ -0,0 +1,250 @@
+"use client";
+import Typography2 from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Box from '@mui/material/Box';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Popper from '@mui/material/Popper';
+import Divider from '@mui/material/Divider';
+import FormGroup from '@mui/material/FormGroup';
+import Checkbox from '@mui/material/Checkbox';
+
+var SORT_OPTIONS = [
+  { id: "relevance", label: "Relevance" },
+  { id: "newest", label: "Newest" },
+  { id: "popular", label: "Most Popular" }
+];
+var SortOptions = ({
+  defaultValue = "relevance",
+  onChange
+}) => {
+  const handleSortChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, { defaultValue, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.id,
+        control: /* @__PURE__ */ jsx(Radio, {}),
+        label: option.label
+      },
+      option.id
+    )) }) })
+  ] });
+};
+var SortOptions_default = SortOptions;
+var TagsFilter = ({
+  onChange,
+  tags: Tags = []
+}) => {
+  const [mustHaveTags, setMustHaveTags] = React.useState([]);
+  const [mustNotHaveTags, setMustNotHaveTags] = React.useState([]);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React.useState([]);
+  Tags = !!Tags ? Tags : [];
+  const [inputValues, setInputValues] = React.useState({
+    mustHave: "",
+    mustNotHave: "",
+    shouldHaveAtLeastOne: ""
+  });
+  const tagOptions = React.useMemo(() => {
+    console.log("available tags: " + JSON.stringify(Tags));
+    console.log(!Tags);
+    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    return Tags.map((tag) => ({
+      value: tag.id,
+      label: tag.label
+    }));
+  }, [Tags]);
+  const handleTagChange = (tagId, category) => {
+    let newTags = [];
+    switch (category) {
+      case "mustHave":
+        newTags = mustHaveTags.includes(tagId) ? mustHaveTags.filter((id) => id !== tagId) : [...mustHaveTags, tagId];
+        setMustHaveTags(newTags);
+        break;
+      case "mustNotHave":
+        newTags = mustNotHaveTags.includes(tagId) ? mustNotHaveTags.filter((id) => id !== tagId) : [...mustNotHaveTags, tagId];
+        setMustNotHaveTags(newTags);
+        break;
+      case "shouldHaveAtLeastOne":
+        newTags = shouldHaveAtLeastOneTags.includes(tagId) ? shouldHaveAtLeastOneTags.filter((id) => id !== tagId) : [...shouldHaveAtLeastOneTags, tagId];
+        setShouldHaveAtLeastOneTags(newTags);
+        break;
+    }
+    if (onChange) {
+      onChange({
+        mustHave: category === "mustHave" ? newTags : mustHaveTags,
+        mustNotHave: category === "mustNotHave" ? newTags : mustNotHaveTags,
+        shouldHaveAtLeastOne: category === "shouldHaveAtLeastOne" ? newTags : shouldHaveAtLeastOneTags
+      });
+    }
+  };
+  const renderSelectedTags = (selectedTags, category) => {
+    const tagValues = [];
+    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    Tags.forEach((tag) => {
+      if (selectedTags.includes(tag.id)) {
+        tagValues.push(tag);
+      }
+    });
+    if (tagValues.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+        style: {
+          background: tag.color || "#bfbcbb",
+          color: "white",
+          textShadow: "black 0.2em 0.2em 0.4em"
+        },
+        children: [
+          tag.label,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleTagChange(tag.id, category),
+              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      tag.id
+    )) });
+  };
+  const createTagSelector = (category, label) => {
+    const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography2, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      renderSelectedTags(selectedTags, category),
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options: tagOptions,
+          filterOptions: (options, state) => {
+            const tagsToExclude = /* @__PURE__ */ new Set();
+            selectedTags.forEach((id) => tagsToExclude.add(id));
+            if (category !== "mustHave") {
+              mustHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "mustNotHave") {
+              mustNotHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "shouldHaveAtLeastOne") {
+              shouldHaveAtLeastOneTags.forEach((id) => tagsToExclude.add(id));
+            }
+            return options.filter(
+              (option) => (
+                // Exclude options already selected in any category
+                !tagsToExclude.has(option.value) && // Filter based on user input
+                option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+              )
+            ).slice(0, 3);
+          },
+          value: null,
+          inputValue: inputValues[category],
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValues({
+                ...inputValues,
+                [category]: newInputValue
+              });
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              handleTagChange(newValue.value, category);
+            }
+            setInputValues({
+              ...inputValues,
+              [category]: ""
+            });
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: `Select ${label}` })
+        },
+        `${category}-${selectedTags.join("-")}`
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    createTagSelector("mustHave", "Must Have Tags"),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    createTagSelector("mustNotHave", "Must Not Have Tags"),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
+  ] });
+};
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport"
+            // Prevent the Popper from going outside the viewport
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset: [0, -10]
+            // Set negative vertical offset (adjust value as needed)
+          }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+var TagsFilter_default = TagsFilter;
+var FILTER_TYPES = [
+  { id: "player", label: "Players" },
+  { id: "event", label: "Events", disabled: true },
+  { id: "table", label: "Tables", disabled: true }
+];
+var TypeFilter = ({ onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React.useState([]);
+  const handleTypeChange = (typeId) => {
+    const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
+    setSelectedTypes(newSelectedTypes);
+    onChange == null ? void 0 : onChange(newSelectedTypes);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsx(FormGroup, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selectedTypes.includes(type.id),
+            onChange: () => handleTypeChange(type.id),
+            disabled: type.disabled
+          }
+        ),
+        label: type.label
+      },
+      type.id
+    )) })
+  ] });
+};
+var TypeFilter_default = TypeFilter;
+
+export { SortOptions_default as SortOptions, TagsFilter_default as TagsFilter, TypeFilter_default as TypeFilter };
+//# sourceMappingURL=Filters.mjs.map
+//# sourceMappingURL=Filters.mjs.map