@bynder/compact-view 5.2.2 → 5.2.4

package/Option_new.js

@@ -1,48 +1,55 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import s from "./styled-components.browser.esm.js";
-import { TruncatedText as m } from "./TruncatedText.js";
-import { token as n } from "./token.js";
-import { IconCheckCircle as a } from "./index4.js";
-import { ListItem as g, StyledCheckboxWrapper as h, Content as f } from "./Checkbox.styles.js";
+import { TruncatedText as l } from "./TruncatedText.js";
+import { token as r } from "./token.js";
+import { IconCheckCircle as n } from "./index3.js";
+import { ListItem as h, StyledCheckboxWrapper as g, Content as k } from "./Checkbox.styles.js";
 const w = ({
-  option: o,
-  onClick: c,
-  metapropertyName: d,
-  isSelected: i,
-  metapropertyMultifilter: l,
-  showCount: t = !0,
-  count: p
-}) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(h, { $isChecked: i, children: /* @__PURE__ */ e(
-  f,
+  option: e,
+  onClick: p,
+  metapropertyName: c,
+  isSelected: o,
+  metapropertyMultifilter: d,
+  showCount: a = !0,
+  count: m
+}) => /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(g, { $isChecked: o, children: /* @__PURE__ */ i(
+  k,
   {
-    $isChecked: i,
+    $isChecked: o,
     onClick: () => {
-      c(d, o, l);
+      p(c, e, d);
     },
     "data-testid": "metaproperty-option",
     children: [
-      /* @__PURE__ */ r(m, { children: o.label }),
-      i && !t ? /* @__PURE__ */ r(a, {}) : null,
-      t && /* @__PURE__ */ e(C, { className: "fade-in-down", children: [
-        i ? /* @__PURE__ */ r(a, {}) : null,
-        " ",
-        p
-      ] })
+      /* @__PURE__ */ t(l, { children: e.label }),
+      o && !a ? /* @__PURE__ */ t(n, { "data-testid": "metaproperty-option-checkmark" }) : null,
+      a && /* @__PURE__ */ i(
+        f,
+        {
+          className: "fade-in-down",
+          "data-testid": "metaproperty-option-count",
+          children: [
+            o ? /* @__PURE__ */ t(n, { "data-testid": "metaproperty-option-checkmark" }) : null,
+            " ",
+            m
+          ]
+        }
+      )
     ]
   }
-) }) }), C = s.span`
+) }) }), f = s.span`
 	display: flex;
 	align-items: center;
-	padding: 0 ${n.spacing3};
+	padding: 0 ${r.spacing3};
 	color: rgba(0, 34, 51, 0.8);
 	background-color: #f7f8f9;
 	border: 1px solid rgba(0, 34, 51, 0.1);
-	border-radius: ${n.spacing5};
+	border-radius: ${r.spacing5};
 
 	svg {
-		max-width: ${n.spacing5};
-		max-height: ${n.spacing5};
-		margin-right: ${n.spacing2};
+		max-width: ${r.spacing5};
+		max-height: ${r.spacing5};
+		margin-right: ${r.spacing2};
 	}
 `;
 export {

package/ReactPropTypesSecret.js

@@ -0,0 +1,10 @@
+var e, r;
+function _() {
+  if (r) return e;
+  r = 1;
+  var t = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+  return e = t, e;
+}
+export {
+  _ as __require
+};

package/RightArrow.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import o from "./styled-components.browser.esm.js";
-import { IconArrowRight as r } from "./index4.js";
+import { IconArrowRight as r } from "./index3.js";
 import { Button as a } from "./Button.js";
 function d(i) {
   return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(

package/SearchInput.js

@@ -2,7 +2,7 @@ import { jsxs as B, jsx as o } from "react/jsx-runtime";
 import { useState as a, useEffect as p } from "react";
 import g from "./styled-components.browser.esm.js";
 import { useDebouncedCallback as m } from "./index.module2.js";
-import { IconSearch as F, IconImage as H } from "./index4.js";
+import { IconSearch as F, IconImage as H } from "./index3.js";
 import { Input as $ } from "./Input.js";
 import { Spinner as j } from "./Spinner.js";
 import { __ as f } from "./index2.js";

package/SearchInput2.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as u } from "react/jsx-runtime";
 import { useRef as f, useEffect as p } from "react";
 import t from "./styled-components.browser.esm.js";
-import { IconSearch as h } from "./index4.js";
+import { IconSearch as h } from "./index3.js";
 import { Input as l } from "./Input.js";
 import { token as n } from "./token.js";
 import { useDropdownContext as a } from "./context3.js";

package/SelectionFooter.js

@@ -1,64 +1,74 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import p from "./styled-components.browser.esm.js";
-import { Button as r } from "./Button.js";
-import { token as n } from "./token.js";
-import { IconSteps as b } from "./index4.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import m from "./styled-components.browser.esm.js";
+import { Button as a } from "./Button.js";
+import { token as r } from "./token.js";
+import { IconSteps as y } from "./index3.js";
 import { Dropdown as v } from "./Dropdown.js";
 import { __ as o } from "./index2.js";
-import { useSelection as w } from "./SelectionContext.js";
-import { AddMedia as C } from "./AddMedia.js";
-import { SelectedItems as A } from "./SelectedItems.js";
-import { useConfig as I } from "./ConfigContext.js";
-import { useRouterSelectors as k } from "./useRouterStore.js";
-import { Tooltip as M } from "./Tooltip.js";
-import { useSimilaritySearchStore as _ } from "./useSimilaritySearchStore.js";
-import { useSimilarityAssets as $ } from "./getSimilarityAssets.js";
+import { AddMedia as w } from "./AddMedia.js";
+import { SelectedItems as C } from "./SelectedItems.js";
+import { useConfig as A } from "./ConfigContext.js";
+import { useRouterSelectors as I } from "./useRouterStore.js";
+import { Tooltip as k } from "./Tooltip.js";
+import { useSimilaritySearchStore as M } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as _ } from "./getSimilarityAssets.js";
+import { useSelectionStore as $ } from "./useSelectionStore.js";
 function L() {
-  const { selection: i, clear: a, selectAll: d } = w(), { selectionMode: l, selectAllOption: f } = I(), g = k.use.page(), { setIsSelected: S, isEnabled: u } = _(), { search: h, resetData: x } = $(), s = i.length >= 1 ? i.filter(
+  const { selection: i, clear: n, selectAll: p } = $(), { selectionMode: l, selectAllOption: u } = A(), f = I.use.page(), { setIsSelected: S, isEnabled: g } = M(), { search: h, resetData: x } = _(), s = i.length >= 1 ? i.filter(
     (t) => t.type === "asset" && t.value.__typename === "Image"
-  ).map((t) => t.value.databaseId ? t.value.databaseId : t.value.id) : [], y = () => {
-    x(), S(!0), h(s), a();
+  ).map((t) => t.value.databaseId ? t.value.databaseId : t.value.id) : [], b = () => {
+    x(), S(!0), h(s), n();
   }, c = i.length;
-  return c === 0 ? null : /* @__PURE__ */ m(j, { "data-testid": "selection-footer", children: [
-    /* @__PURE__ */ m(D, { children: [
+  return c === 0 ? null : /* @__PURE__ */ d(j, { "data-testid": "selection-footer", children: [
+    /* @__PURE__ */ d(D, { children: [
       /* @__PURE__ */ e(
         v,
         {
           buttonKind: "secondary",
           direction: "Up",
           title: o("View {} selected").replace("{}", c.toString()),
-          children: () => /* @__PURE__ */ e(A, { selection: i })
+          "data-testid": "view-selected-dropdown",
+          children: () => /* @__PURE__ */ e(C, { selection: i })
         }
       ),
-      l === "MultiSelect" && f && g.page === "assets" && /* @__PURE__ */ e(r, { variant: "secondary", onClick: d, children: o("Select all") }),
-      /* @__PURE__ */ e(r, { variant: "clean", onClick: a, children: o("Clear selection") })
+      l === "MultiSelect" && u && f.page === "assets" && /* @__PURE__ */ e(a, { variant: "secondary", onClick: p, "data-testid": "select-all-button", children: o("Select all") }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          variant: "clean",
+          onClick: n,
+          "data-testid": "clear-selection-button",
+          children: o("Clear selection")
+        }
+      )
     ] }),
-    l === "MultiSelect" && u && s.length > 0 && /* @__PURE__ */ e(M, { text: o("Show similar"), margin: "right", marginAmount: "spacing3", children: /* @__PURE__ */ e(
-      r,
+    l === "MultiSelect" && g && s.length > 0 && /* @__PURE__ */ e(k, { text: o("Show similar"), margin: "right", marginAmount: "spacing3", children: /* @__PURE__ */ e(
+      a,
       {
         variant: "clean",
-        icon: /* @__PURE__ */ e(b, {}),
+        icon: /* @__PURE__ */ e(y, {}),
         "aria-label": o("Show similar"),
-        onClick: y
+        onClick: b,
+        "data-testid": "show-similar-button"
       }
     ) }),
-    /* @__PURE__ */ e(C, { selection: i })
+    /* @__PURE__ */ e(w, { selection: i })
   ] });
 }
-const j = p.div`
+const j = m.div`
 	display: flex;
 	flex-shrink: 0;
 	z-index: 10;
-	height: ${n.layoutSpacing5};
-	padding: ${n.spacing6};
+	height: ${r.layoutSpacing5};
+	padding: ${r.spacing6};
 	align-items: center;
 	box-shadow: 0 -1px 0 0 rgba(0, 34, 51, 0.1), 0 -1px 6px 0 rgba(0, 34, 51, 0.1);
 	animation: var(--fade-in-down);
-`, D = p.span`
+`, D = m.span`
 	display: flex;
 	flex-grow: 1;
 	align-items: center;
-	gap: ${n.spacing2};
+	gap: ${r.spacing2};
 `;
 export {
   L as SelectionFooter

package/Shield.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import e from "react";
 import { Oops as o } from "./Oops.js";
-class l extends e.Component {
+class p extends e.Component {
   constructor(r) {
     super(r), this.state = { error: null };
   }
@@ -20,5 +20,5 @@ class l extends e.Component {
   }
 }
 export {
-  l as Shield
+  p as Shield
 };

package/Smartfilters_new.js

@@ -1,48 +1,53 @@
-import { jsx as n, Fragment as T, jsxs as C } from "react/jsx-runtime";
-import { useState as u, useRef as m, useEffect as q } from "react";
-import f from "./styled-components.browser.esm.js";
-import { Box as G } from "./Box.js";
-import { Button as J } from "./Button.js";
-import { Flex as K } from "./Flex.js";
-import { token as w } from "./token.js";
-import { IconArrowLeft as Q, IconArrowRight as Y } from "./index4.js";
-import { useConfig as Z } from "./ConfigContext.js";
-import { useAssetFilter as tt } from "./AssetFilterContext.js";
-import { Dropdown as et } from "./Dropdown.js";
-import { Autocomplete as rt } from "./Autocomplete_new.js";
-import { SmartFilterSelect as ot } from "./SmartFilterSelect_new.js";
-import { getAutocompleteOptions as nt } from "./autocomplete.js";
-import { useAuth as it } from "./LoginContext.js";
-import { debounceAsync as st } from "./asyncDebounce.js";
-const Ct = ({ filterData: l }) => {
-  const i = tt(), b = it(), { language: y } = Z(), k = lt(l), [L, D] = u({}), [X, A] = u(), [I, M] = u({}), [g, d] = u(0), [c, P] = u(0), [O, F] = u(!1), a = m(null), x = m(!1), p = m(null), h = m(null), S = m({});
-  q(() => {
-    a.current && P(a.current.scrollWidth - a.current.clientWidth), i.isDropdownActive || (D({}), A({}));
-  }, [l, a, i]);
-  const R = g === 0, U = c > 5 && g !== c;
-  function z() {
-    d((e) => {
+import { jsx as i, Fragment as J, jsxs as k } from "react/jsx-runtime";
+import { useState as d, useRef as f, useEffect as K } from "react";
+import g from "./styled-components.browser.esm.js";
+import { Box as Q } from "./Box.js";
+import { Button as Y } from "./Button.js";
+import { Flex as Z } from "./Flex.js";
+import { token as S } from "./token.js";
+import { IconArrowLeft as tt, IconArrowRight as et } from "./index3.js";
+import { useConfig as rt } from "./ConfigContext.js";
+import { Dropdown as ot } from "./Dropdown.js";
+import { Autocomplete as nt } from "./Autocomplete_new.js";
+import { SmartFilterSelect as it } from "./SmartFilterSelect_new.js";
+import { getAutocompleteOptions as st } from "./autocomplete.js";
+import { useAuth as lt } from "./LoginContext.js";
+import { debounceAsync as at } from "./asyncDebounce.js";
+import { useAssetFilterStore as ct } from "./useAssetFilterStore.js";
+const Lt = ({ filterData: l }) => {
+  const {
+    selectSmartfilterOption: y,
+    selectedSmartfilterOptions: a,
+    existingFilters: n,
+    isDropdownActive: D
+  } = ct(), X = lt(), { language: A } = rt(), I = pt(l, n), [P, M] = d({}), [R, O] = d(), [U, v] = d({}), [h, m] = d(0), [c, W] = d(0), [C, F] = d(!1), p = f(null), x = f(!1), u = f(null), b = f(null), w = f({});
+  K(() => {
+    p.current && W(p.current.scrollWidth - p.current.clientWidth), D || (M({}), O({}));
+  }, [l, p, D]);
+  const z = h === 0, E = c > 5 && h !== c;
+  function N() {
+    m((e) => {
       const t = Math.max(e - 250, 0);
       return t >= 100 ? t : 0;
     });
   }
-  function E() {
-    d((e) => {
+  function _() {
+    m((e) => {
       const t = Math.min(e + 250, c);
       return t <= c - 100 ? t : c;
     });
   }
-  const N = async (e, t, o) => {
+  const j = async (e, t, o) => {
     let s;
-    M((r) => ({
+    v((r) => ({
       ...r,
       [t]: !0
-    })), e.length >= 2 && (s = await nt({
+    })), e.length >= 2 && (s = await st({
       metapropertyId: t,
-      auth: b,
+      auth: X,
       searchTerm: e,
       page: o
-    })), A((r) => ({
+    })), O((r) => ({
       ...r,
       [t]: s ? {
         ...s,
@@ -51,20 +56,20 @@ const Ct = ({ filterData: l }) => {
           ...s.metapropertyOptions
         ] : s.metapropertyOptions
       } : null
-    })), M((r) => ({
+    })), v((r) => ({
       ...r,
       [t]: !1
     }));
-  }, W = (e) => (S.current[e] || (S.current[e] = st(N, 500)), S.current[e]), v = (e, t, o) => {
-    i.selectSmartfilterOption(e, t, o);
-  }, _ = (e, t, o) => {
-    D((r) => ({
+  }, B = (e) => (w.current[e] || (w.current[e] = at(j, 500)), w.current[e]), $ = (e, t, o) => {
+    y(e, t, o);
+  }, H = (e, t, o) => {
+    M((r) => ({
       ...r,
       [e]: t
-    })), W(e)(t, e, o);
-  }, j = (e) => {
-    p.current = e.clientX, x.current = !1, F(!0);
-  }, B = (e) => {
+    })), B(e)(t, e, o);
+  }, V = (e) => {
+    u.current = e.clientX, x.current = !1, F(!0);
+  }, T = (e) => {
     if (x.current) {
       e.preventDefault();
       const t = (o) => {
@@ -75,86 +80,86 @@ const Ct = ({ filterData: l }) => {
         once: !0
       });
     }
-    p.current = null, h.current = null, F(!1);
-  }, H = (e) => {
-    if (!O || !a.current || !p.current) return;
-    e.preventDefault(), h.current === null && (h.current = g), p.current && Math.abs(e.clientX - p.current) > 5 && (x.current = !0);
-    const t = (e.clientX - p.current) * -1 + h.current;
-    return t <= 16 ? d(0) : t + 16 < c ? d(t) : d(c);
+    u.current = null, b.current = null, F(!1);
+  }, q = (e) => {
+    if (!C || !p.current || !u.current) return;
+    e.preventDefault(), b.current === null && (b.current = h), u.current && Math.abs(e.clientX - u.current) > 5 && (x.current = !0);
+    const t = (e.clientX - u.current) * -1 + b.current;
+    return t <= 16 ? m(0) : t + 16 < c ? m(t) : m(c);
   };
-  return /* @__PURE__ */ n(T, { children: k.map((e) => {
+  return /* @__PURE__ */ i(J, { children: I.map((e) => {
     const t = e.smartfilter, o = e.metapropertyFilters;
-    return /* @__PURE__ */ n(
-      et,
+    return /* @__PURE__ */ i(
+      ot,
       {
-        title: t.labels[y] || t.labels.en_US,
-        alt: t.labels[y] || t.labels.en_US,
+        title: t.labels[A] || t.labels.en_US,
+        alt: t.labels[A] || t.labels.en_US,
         isSmall: !0,
         fadeIn: !0,
         isMetapropertyDropdown: !0,
-        children: () => /* @__PURE__ */ C(
-          ct,
+        children: () => /* @__PURE__ */ k(
+          ut,
           {
-            ref: a,
-            onMouseDown: j,
-            onMouseUp: B,
-            onMouseMove: H,
+            ref: p,
+            onMouseDown: V,
+            onMouseUp: T,
+            onMouseMove: q,
             children: [
-              /* @__PURE__ */ n(
-                at,
+              /* @__PURE__ */ i(
+                dt,
                 {
-                  $scroll: g,
+                  $scroll: h,
                   "data-testid": "metaproperty-dropdown-content",
-                  $isDragging: O,
+                  $isDragging: C,
                   children: o.map((s) => {
                     const r = s.metaproperty;
-                    if (!i.existingFilters?.[r.name] || r.type !== "autocomplete" && (r.type !== "smart-single" && r.type !== "select" || r.options.length === 0))
+                    if (!n?.[r.name] || r.type !== "autocomplete" && (r.type !== "smart-single" && r.type !== "select" || r.options.length === 0))
                       return null;
-                    const V = r.type === "autocomplete" ? /* @__PURE__ */ n(
-                      rt,
+                    const G = r.type === "autocomplete" ? /* @__PURE__ */ i(
+                      nt,
                       {
                         metaproperty: r,
-                        value: L[r.id] || "",
-                        onChange: _,
-                        onOptionSelect: v,
-                        autocompleteOptions: X || {},
-                        isLoading: I[r.id] || !1,
-                        selectedOptions: i.selectedSmartfilterOptions || {}
+                        value: P[r.id] || "",
+                        onChange: H,
+                        onOptionSelect: $,
+                        autocompleteOptions: R || {},
+                        isLoading: U[r.id] || !1,
+                        selectedOptions: a || {}
                       }
-                    ) : /* @__PURE__ */ n(
-                      ot,
+                    ) : /* @__PURE__ */ i(
+                      it,
                       {
                         metaproperty: r,
                         smartfilterId: t.id,
-                        onOptionSelect: v,
-                        selectedOptions: i.selectedSmartfilterOptions || {},
-                        filteredMetaproperty: i.existingFilters?.[r.name],
+                        onOptionSelect: $,
+                        selectedOptions: a || {},
+                        filteredMetaproperty: n?.[r.name],
                         metapropertyCursor: s.metadata.nextCursorMark
                       }
                     );
-                    return /* @__PURE__ */ n(pt, { children: V }, r.id);
+                    return /* @__PURE__ */ i(mt, { children: G }, r.id);
                   })
                 }
               ),
-              /* @__PURE__ */ C(ut, { direction: "row", justifyContent: "flex-end", children: [
-                /* @__PURE__ */ n(
-                  $,
+              /* @__PURE__ */ k(ft, { direction: "row", justifyContent: "flex-end", children: [
+                /* @__PURE__ */ i(
+                  L,
                   {
                     title: "Previous",
-                    icon: /* @__PURE__ */ n(Q, {}),
-                    onClick: z,
+                    icon: /* @__PURE__ */ i(tt, {}),
+                    onClick: N,
                     "data-testid": "left-arrow",
-                    isDisabled: R
+                    isDisabled: z
                   }
                 ),
-                /* @__PURE__ */ n(
-                  $,
+                /* @__PURE__ */ i(
+                  L,
                   {
                     title: "Next",
-                    icon: /* @__PURE__ */ n(Y, {}),
-                    onClick: E,
+                    icon: /* @__PURE__ */ i(et, {}),
+                    onClick: _,
                     "data-testid": "right-arrow",
-                    isDisabled: !U
+                    isDisabled: !E
                   }
                 )
               ] })
@@ -166,34 +171,38 @@ const Ct = ({ filterData: l }) => {
     );
   }) });
 };
-function lt(l) {
-  return [...l.filters].sort((i, b) => i.smartfilter.zindex - b.smartfilter.zindex);
+function pt(l, y) {
+  return [...l.filters].filter(
+    (a) => a.metapropertyFilters.some(
+      (n) => a.smartfilter.metaproperties.includes(n.metaproperty.id) && y?.[n.metaproperty.name] && (n.metaproperty.options.length > 0 || n.metaproperty.type === "autocomplete")
+    )
+  ).sort((a, n) => a.smartfilter.zindex - n.smartfilter.zindex);
 }
-const ct = f.div`
+const ut = g.div`
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-`, at = f.div`
+`, dt = g.div`
 	display: flex;
 	flex-direction: row;
 	transform: translateX(-${(l) => l.$scroll}px);
 	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
 	width: fit-content;
 	cursor: ${(l) => l.$isDragging ? "grabbing" : "default"};
-`, pt = f(G)`
+`, mt = g(Q)`
 	border-right: 1px solid rgba(3, 16, 38, 0.1);
 	max-width: 300px;
-`, ut = f(K)`
-	padding: ${w.spacing3};
+`, ft = g(Z)`
+	padding: ${S.spacing3};
 	border-top: 1px solid rgba(3, 16, 38, 0.1);
-	gap: ${w.spacing3};
-`, $ = f(J)`
-	padding: ${w.spacing3};
+	gap: ${S.spacing3};
+`, L = g(Y)`
+	padding: ${S.spacing3};
 	border-radius: 6px;
 	border: 1px solid rgba(3, 16, 38, 0.1);
 	background: rgba(3, 16, 38, 0.03);
 	cursor: pointer;
 `;
 export {
-  Ct as Smartfilter
+  Lt as Smartfilter
 };