jcicl 0.0.132 → 0.0.135

package/Search/Search.js

@@ -1,20 +1,31 @@
-import { jsx as o } from "react/jsx-runtime";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import r from "../theme.js";
-import p from "../Icon/Icon.js";
-import { Button as m } from "../Button/Button.js";
-import { c as a } from "../.chunks/createSvgIcon.js";
-import { T as u } from "../.chunks/TextField.js";
-const g = a(/* @__PURE__ */ o("path", {
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as l } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import z from "../Icon/Icon.js";
+import { Button as p } from "../Button/Button.js";
+import { c as m } from "../.chunks/createSvgIcon.js";
+import { T as y } from "../.chunks/TextField.js";
+const k = m(/* @__PURE__ */ r("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
-}), "Search"), b = a(/* @__PURE__ */ o("path", {
+}), "Search"), C = m(/* @__PURE__ */ r("path", {
   d: "M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"
-}), "FilterList"), x = h(u)(({ borderColor: e, borderFocusColor: t, shadowTertiary: i }) => ({
-  backgroundColor: r.colors.white,
+}), "FilterList"), M = s("div")(() => ({
+  ...l`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `
+})), R = s(y)(({ borderColor: o, borderFocusColor: i, shadowTertiary: a }) => ({
+  backgroundColor: e.colors.white,
   borderRadius: "1rem",
   height: "2rem",
-  border: `1px solid ${e}`,
+  border: `1px solid ${o}`,
   transition: "313ms all ease-out",
+  zIndex: 1327,
   ".MuiInputBase-root": {
     padding: "0 2px"
   },
@@ -31,7 +42,7 @@ const g = a(/* @__PURE__ */ o("path", {
     },
     "&:hover": {
       svg: {
-        boxShadow: `0 0 2px ${r.colors.midnight}`
+        boxShadow: `0 0 2px ${e.colors.midnight}`
       }
     }
   },
@@ -39,8 +50,8 @@ const g = a(/* @__PURE__ */ o("path", {
     borderRadius: "50%",
     "&:hover": {
       svg: {
-        backgroundColor: t,
-        fill: r.colors.white
+        backgroundColor: i,
+        fill: e.colors.white
       },
       ".MuiTouchRipple-root": {
         backgroundColor: "transparent"
@@ -59,11 +70,11 @@ const g = a(/* @__PURE__ */ o("path", {
     alignItems: "center"
   },
   "&:hover, :focus-visible, :focus-within": {
-    borderColor: t,
-    boxShadow: i
+    borderColor: i,
+    boxShadow: a
   },
   "&:focus-visible": {
-    borderColor: e,
+    borderColor: o,
     borderWidth: "2px"
   },
   fieldset: {
@@ -75,54 +86,107 @@ const g = a(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-})), C = ({
-  borderColor: e = r.colors.green,
+})), $ = s("div")(({ open: o }) => ({
+  ...l`
+    box-sizing: border-box;
+    position: absolute;
+    width: calc(50%);
+    top: 1rem;
+    right: 3px;
+    z-index: 1313;
+    display: flex;
+    gap: 1rem;
+    background-color: ${e.colors.white};
+    box-shadow: ${e.boxShadows.midnight};
+    padding: ${o ? "2rem 1rem" : 0};
+    transition: 313ms all ease-in-out;
+    display: grid;
+    grid-template-rows: ${o ? "1fr" : "0fr"};
+
+    .filtersWrapper {
+      overflow: hidden;
+    }
+
+    @media screen and (max-width: ${e.screenSizes.tablet}) {
+      width: calc(100% - 6px);
+    }
+  `
+})), F = s("div")(() => ({
+  ...l`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 1.3rem;
+    grid-column-gap: 1.3rem;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+
+    @media screen and (max-width: ${e.screenSizes.tablet}) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media screen and (max-width: 786px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .filtersButton {
+      width: 100%;
+      justify-self: center;
+    }
+  `
+})), P = ({
+  borderColor: o = e.colors.green,
   // border primary
-  borderFocusColor: t = r.colors.darkGreen,
+  borderFocusColor: i = e.colors.darkGreen,
   // icon primary
-  shadowTertiary: i = r.boxShadows.darkGreenThick,
-  onSearch: n,
-  ...d
+  shadowTertiary: a = e.boxShadows.darkGreenThick,
+  filters: t,
+  onSearch: d,
+  ...h
 }) => {
-  const l = (s) => {
-    s.preventDefault(), s.key === "Enter" && n && n();
-  }, c = { borderColor: e, borderFocusColor: t, shadowTertiary: i, ...d };
-  return /* @__PURE__ */ o(
-    x,
-    {
-      slotProps: {
-        input: {
-          startAdornment: /* @__PURE__ */ o(
-            m,
-            {
-              variant: "icon",
-              size: 28,
-              onClick: n,
-              color: t,
-              highlightColor: "transparent",
-              children: /* @__PURE__ */ o(g, {})
-            }
-          ),
-          endAdornment: /* @__PURE__ */ o(
-            p,
-            {
-              onClick: () => "",
-              icon: /* @__PURE__ */ o(b, {}),
-              backgroundColor: e,
-              iconColor: r.colors.white,
-              size: 28,
-              padding: 3
-            }
-          )
-        }
-      },
-      type: "search",
-      ...c,
-      onKeyUp: l
-    }
-  );
+  const [c, g] = S(!1), u = (n) => {
+    n.preventDefault(), n.key === "Enter" && d && d();
+  }, x = { borderColor: o, borderFocusColor: i, shadowTertiary: a, ...h }, b = t && t.length > 0;
+  return /* @__PURE__ */ v(M, { children: [
+    /* @__PURE__ */ r(
+      R,
+      {
+        slotProps: {
+          input: {
+            startAdornment: /* @__PURE__ */ r(
+              p,
+              {
+                variant: "icon",
+                size: 28,
+                onClick: d,
+                color: i,
+                highlightColor: "transparent",
+                children: /* @__PURE__ */ r(k, {})
+              }
+            ),
+            endAdornment: b && /* @__PURE__ */ r(
+              z,
+              {
+                onClick: () => g(!c),
+                icon: /* @__PURE__ */ r(C, {}),
+                backgroundColor: o,
+                iconColor: e.colors.white,
+                size: 28,
+                padding: 3
+              }
+            )
+          }
+        },
+        type: "search",
+        ...x,
+        onKeyUp: u
+      }
+    ),
+    /* @__PURE__ */ r($, { open: c, children: /* @__PURE__ */ r(F, { className: "filtersWrapper", children: t == null ? void 0 : t.map(({ name: n, onClick: f, active: w }) => /* @__PURE__ */ r(p, { className: "filtersButton", variant: "filter", onClick: f, active: w, children: n }, n)) }) })
+  ] });
 };
 export {
-  C as Search,
-  C as default
+  P as Search,
+  P as default
 };

package/Search/index.d.ts

@@ -1 +1 @@
-export { default, type SearchProps, type SearchFilter } from './Search';
+export { default, type SearchProps, type SearchFilterProps } from './Search';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.132",
+  "version": "0.0.135",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",