@bynder/compact-view 5.2.0 → 5.2.2

package/AssetCard.js

@@ -1,60 +1,66 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { useState as g, useEffect as x } from "react";
-import s from "styled-components";
-import { token as r, Card as l, Badge as w, TruncatedText as P } from "@bynder/design-system";
-import { useConfig as U } from "./ConfigContext.js";
-import { getStatusText as V, getExtension as W, getThumbnail as b } from "./utils.js";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { useState as x, useEffect as w } from "react";
+import s from "./styled-components.browser.esm.js";
+import { Badge as $ } from "./Badge.js";
+import { Card as l } from "./Card.js";
+import { TruncatedText as U } from "./TruncatedText.js";
+import { token as o } from "./token.js";
+import { useConfig as V } from "./ConfigContext.js";
+import { getStatusText as W, getExtension as _, getThumbnail as b } from "./utils2.js";
 import { __ as d } from "./index2.js";
-import { ContextAction as _ } from "./ContextAction.js";
-import { AssetCardMetaproperties as z } from "./AssetCardMetaproperties.js";
-import { useDat as L } from "./useDatStore.js";
-function Z({
+import { ContextAction as z } from "./ContextAction.js";
+import { AssetCardMetaproperties as L } from "./AssetCardMetaproperties.js";
+import { useDat as j } from "./useDatStore.js";
+function it({
   className: e,
+  dragState: p,
   fadeIn: y = !0,
   asset: t,
   isSelected: n,
   isOutlined: C,
-  onClick: p,
-  children: $ = null,
-  isSilimilaritySearchEnabled: v = !1,
+  onClick: m,
+  children: v = null,
+  isSimilaritySearchEnabled: S = !1,
   onSimilaritySearch: T
 }) {
-  const [B, S] = g(), [I, k] = g(), { openDat: A, setTransformation: M } = L(), { theme: m } = U(), c = V(t), h = W(t);
-  x(() => {
-    const o = t.metaproperties?.nodes.filter(
+  const [B, I] = x(), [k, A] = x(), { openDat: M, setTransformation: D } = j(), { theme: c } = V(), h = W(t), f = _(t);
+  w(() => {
+    const i = t.metaproperties?.nodes.filter(
       (a) => a.showInGridView || a.showInListView
     );
-    S(o);
-  }, [t.metaproperties]), x(() => {
-    const o = t.textMetaproperties?.filter(
+    I(i);
+  }, [t.metaproperties]), w(() => {
+    const i = t.textMetaproperties?.filter(
       (a) => a.showInGridView || a.showInListView
     );
-    k(o);
+    A(i);
   }, [t.textMetaproperties]);
-  const u = (o) => {
-    p !== void 0 && (o.stopPropagation(), M(), p(t, o));
-  }, D = (o) => {
-    o.stopPropagation(), T([t.databaseId ? t.databaseId : t.id]);
+  const u = (i) => {
+    m !== void 0 && (i.stopPropagation(), D(), m(t, i));
+  }, P = (i) => {
+    i.stopPropagation(), T([t.databaseId ? t.databaseId : t.id]);
   };
-  return /* @__PURE__ */ i(
-    j,
+  return /* @__PURE__ */ r(
+    E,
     {
       id: t.id,
-      $theme: m,
-      $isOutlined: (n || C) && m?.colorPrimary !== void 0,
+      $dragState: p,
+      $theme: c,
+      $isOutlined: (n || C) && c?.colorPrimary !== void 0,
       $fadeIn: y,
       className: e,
       "data-drag-select-id": t.id,
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ g(
         l,
         {
-          contextAction: /* @__PURE__ */ i(
-            _,
+          contextAction: /* @__PURE__ */ r(
+            z,
             {
+              dragState: p,
               transformBaseUrl: t.files?.transformBaseUrl?.url,
               portalUrl: t.url,
               onOpenDAT: () => {
-                A(t.files?.transformBaseUrl?.url, t, t.name);
+                M(t.files?.transformBaseUrl?.url, t, t.name);
               }
             }
           ),
@@ -65,14 +71,14 @@ function Z({
           "aria-selected": n,
           "data-testid": "asset-card",
           children: [
-            /* @__PURE__ */ f(
+            /* @__PURE__ */ g(
               l.Frame,
               {
-                icon: c ? /* @__PURE__ */ i(E, { $limitWidth: !!h, children: /* @__PURE__ */ i(w, { color: "black-alpha", "data-testid": "asset-tag", children: /* @__PURE__ */ i(P, { children: c }) }) }) : void 0,
+                icon: h ? /* @__PURE__ */ r(G, { $limitWidth: !!f, children: /* @__PURE__ */ r($, { color: "black-alpha", "data-testid": "asset-tag", children: /* @__PURE__ */ r(U, { children: h }) }) }) : void 0,
                 "data-testid": "asset-type",
-                badge: h,
+                badge: f,
                 children: [
-                  /* @__PURE__ */ i(l.Images, { children: b(t) && /* @__PURE__ */ i(
+                  /* @__PURE__ */ r(l.Images, { children: b(t) && /* @__PURE__ */ r(
                     l.Img,
                     {
                       src: b(t),
@@ -80,27 +86,27 @@ function Z({
                       contentResize: "fit"
                     }
                   ) }),
-                  v && t.__typename === "Image" && /* @__PURE__ */ i(
-                    H,
+                  S && t.__typename === "Image" && /* @__PURE__ */ r(
+                    N,
                     {
-                      onClick: D,
+                      onClick: P,
                       "data-testid": "similarity-search-indicator",
                       type: "button",
                       "aria-label": "similarity-search-button",
                       className: "showSimilarButton",
-                      children: /* @__PURE__ */ i(w, { isSmall: !0, children: d("Show similar") })
+                      children: /* @__PURE__ */ r($, { isSmall: !0, children: d("Show similar") })
                     }
                   )
                 ]
               }
             ),
-            $,
-            /* @__PURE__ */ i(G, { "data-testid": "asset-name", children: t.name }),
-            /* @__PURE__ */ i(
-              z,
+            v,
+            /* @__PURE__ */ r(H, { "data-testid": "asset-name", children: t.name }),
+            /* @__PURE__ */ r(
+              L,
               {
                 metaproperties: B,
-                textMetaproperties: I
+                textMetaproperties: k
               }
             )
           ]
@@ -109,8 +115,8 @@ function Z({
     }
   );
 }
-const j = s.div`
-	margin: ${r.spacing3};
+const E = s.div`
+	margin: ${o.spacing3};
 	width: 224px;
 	align-self: flex-start;
 	position: relative;
@@ -125,20 +131,26 @@ const j = s.div`
 	}
 
 	&:hover .showSimilarButton {
+		${(e) => e.$dragState !== "select" && `
 		display: block;
+		`}
 	}
-`, E = s.div`
+
+	[data-testid='asset-card']:hover {
+		${(e) => e.$dragState === "select" && "--card-frame-overlay-color: transparent;"}
+	}
+`, G = s.div`
 	${(e) => e.$limitWidth && "max-width: 142px;"}
-	margin-top: ${r.spacing2};
-`, G = s.p`
+	margin-top: ${o.spacing2};
+`, H = s.p`
 	width: auto;
 	max-width: 100%;
 	height: auto;
 	line-height: 20px;
 	min-height: 20px;
 	max-height: 20px;
-	padding: 0 ${r.spacing5};
-	margin: ${r.spacing3} 0;
+	padding: 0 ${o.spacing5};
+	margin: ${o.spacing3} 0;
 	transition: all 200ms ease;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -150,7 +162,7 @@ const j = s.div`
 		word-break: break-all;
 		white-space: normal;
 	}
-`, H = s.button`
+`, N = s.button`
 	background: none;
 	border: none;
 	padding: 0;
@@ -162,11 +174,10 @@ const j = s.div`
 	text-align: inherit;
 
 	position: absolute;
-	bottom: ${r.spacing4};
-	left: ${r.spacing4};
+	bottom: ${o.spacing4};
+	left: ${o.spacing4};
 	z-index: 1;
 `;
 export {
-  Z as AssetCard
+  it as AssetCard
 };
-//# sourceMappingURL=AssetCard.js.map

package/AssetCardMetaproperties.js

@@ -1,23 +1,24 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import r from "styled-components";
-import { token as l, Card as a } from "@bynder/design-system";
-import { combineMetaproperties as c } from "./combineMetaproperties.js";
-import { trimMetapropertyValue as m } from "./trimMetapropertyValue.js";
-const b = ({ metaproperties: p, textMetaproperties: d }) => {
-  const i = c(p, d);
-  return i?.length ? /* @__PURE__ */ e(a.AdditionalInfo, { children: /* @__PURE__ */ e(f, { children: i.map(({ label: t, value: o }) => {
-    const s = m(o);
+import r from "./styled-components.browser.esm.js";
+import { Card as l } from "./Card.js";
+import { token as a } from "./token.js";
+import { combineMetaproperties as m } from "./combineMetaproperties.js";
+import { trimMetapropertyValue as c } from "./trimMetapropertyValue.js";
+const M = ({ metaproperties: p, textMetaproperties: d }) => {
+  const i = m(p, d);
+  return i?.length ? /* @__PURE__ */ e(l.AdditionalInfo, { children: /* @__PURE__ */ e(f, { children: i.map(({ label: o, value: t }) => {
+    const s = c(t);
     return /* @__PURE__ */ n(x, { "data-testid": "asset-card-metaproperty", children: [
       /* @__PURE__ */ n(h, { children: [
-        t,
+        o,
         ":"
       ] }),
-      /* @__PURE__ */ e(w, { title: o, children: s })
-    ] }, t);
+      /* @__PURE__ */ e(w, { title: t, children: s })
+    ] }, o);
   }) }) }) : null;
 }, f = r.dl`
 	color: rgba(0, 34, 51, 0.5);
-	font-size: ${l.fontSize75};
+	font-size: ${a.fontSize75};
 	display: flex;
 	flex-direction: column;
 	grid-row-gap: 1px;
@@ -42,6 +43,5 @@ const b = ({ metaproperties: p, textMetaproperties: d }) => {
 	text-overflow: ellipsis;
 `;
 export {
-  b as AssetCardMetaproperties
+  M as AssetCardMetaproperties
 };
-//# sourceMappingURL=AssetCardMetaproperties.js.map

package/AssetFilter.js

@@ -1,61 +1,62 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useState as u, useEffect as C } from "react";
-import { styled as p } from "styled-components";
-import { token as F, Button as L } from "@bynder/design-system";
-import { IconMultiSelect as B, IconRectangle as E } from "@bynder/icons";
+import { useState as f, useEffect as C } from "react";
+import p from "./styled-components.browser.esm.js";
+import { Button as F } from "./Button.js";
+import { token as L } from "./token.js";
+import { IconMultiSelect as B, IconRectangle as E } from "./index4.js";
 import { useRouterSelectors as H } from "./useRouterStore.js";
 import { useAssetFilter as R } from "./AssetFilterContext.js";
-import { useLocalization as U } from "./index2.js";
-import { useConfig as V } from "./ConfigContext.js";
-import { useGetFilters as W } from "./getFilters.js";
-import { useGetFilters as q } from "./getFilters_new.js";
-import { Skeleton as f } from "./Skeleton.js";
-import { HorizontalScroll as J } from "./HorizontalScroll.js";
-import { Tags as K } from "./Tags.js";
-import { Advanced as Q } from "./Advanced.js";
+import { useLocalization as Q } from "./index2.js";
+import { useConfig as U } from "./ConfigContext.js";
+import { useGetFilters as V } from "./getFilters.js";
+import { useGetFilters as W } from "./getFilters_new.js";
+import { Skeleton as u } from "./Skeleton.js";
+import { HorizontalScroll as q } from "./HorizontalScroll.js";
+import { Tags as J } from "./Tags.js";
+import { Advanced as K } from "./Advanced.js";
 import { useSelection as X } from "./SelectionContext.js";
 import { useAuth as Y } from "./LoginContext.js";
 import { getAssetCounts as Z } from "./getAssetCounts.js";
 import { Smartfilter as _ } from "./Smartfilters_new.js";
 import { useSearchStateByPage as ee } from "./useSearchStore.js";
 import { useSimilaritySearchStore as te } from "./useSimilaritySearchStore.js";
-function Te() {
+function Ie() {
   const s = R(), t = H.use.page(), { value: i } = ee("assets"), {
-    assetTypes: l,
+    assetTypes: a,
     language: g,
     assetFilter: x,
     noCache: S,
     selectionMode: w,
     selectAllOption: T
-  } = V(), { clear: I, selectAll: b } = X(), N = Y(), [h, P] = u(t.page);
-  U(g);
-  const [j, A] = u(!1), {
+  } = U(), { clear: I, selectAll: b } = X(), N = Y(), [h, P] = f(t.page);
+  Q(g);
+  const [j, A] = f(!1), {
     isSelected: z,
     isNLSSelected: D,
     NLSSearchText: G
-  } = te(), [M, y] = u(!1), { data: n, isLoading: v } = W(
+  } = te(), [M, v] = f(!1), { data: l, isLoading: y } = V(
     {
       filter: s,
       searchTerm: i || null,
-      allAssetTypes: l,
+      allAssetTypes: a,
       language: g,
       predefinedFilter: x,
       collectionId: t.page === "collection" ? t.collection.id : null
     },
     S
-  ), { data: r } = q(S);
+  ), { data: r } = W(S);
   if (C(() => (t.page !== h && (P(t.page), s.clear()), () => {
     s.clear();
   }), [h, t.page]), C(() => {
     let o = !1;
     return (async () => {
-      y(!0);
+      v(!0);
       try {
         const d = await Z({
           auth: N,
           filter: {
             searchTerm: i,
-            assetTypes: l,
+            assetTypes: a,
             collectionId: t.page === "collection" ? t.collection.id : void 0,
             tagNames: s.tags,
             isLimitedUse: s.isLimited,
@@ -66,15 +67,15 @@ function Te() {
       } catch (d) {
         o || console.error("Error fetching asset counts:", d);
       } finally {
-        o || y(!1);
+        o || v(!1);
       }
     })(), () => {
       o = !0;
     };
-  }, [s.tags, i, l, t.page, s.selectedSmartfilterOptions]), n.tag === "Failure" || !n.value || r.tag === "Failure" || r.tag === "Loading" || !r.value || M)
+  }, [s.tags, i, a, t.page, s.selectedSmartfilterOptions]), l.tag === "Failure" || !l.value || r.tag === "Failure" || r.tag === "Loading" || !r.value || M)
     return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(se, {}) });
-  const { tags: a, count: O } = n.value.searchAssets, { value: c } = r, $ = j ? /* @__PURE__ */ e(
-    L,
+  const { tags: n, count: O } = l.value.searchAssets, { value: c } = r, $ = j ? /* @__PURE__ */ e(
+    F,
     {
       onClick: () => {
         I(), A(!1);
@@ -85,7 +86,7 @@ function Te() {
       "data-testid": "deselect-all"
     }
   ) : /* @__PURE__ */ e(
-    L,
+    F,
     {
       onClick: () => {
         b(), A(!0);
@@ -97,26 +98,26 @@ function Te() {
     }
   );
   return z || D && G ? null : /* @__PURE__ */ m(k, { "data-testid": "filter-nav", children: [
-    /* @__PURE__ */ m(J, { children: [
+    /* @__PURE__ */ m(q, { children: [
       c && c.filters.length > 0 && /* @__PURE__ */ e(_, { filterData: c }),
-      a && a.nodes.length > 0 && /* @__PURE__ */ e(K, { tags: a.nodes, isLoading: v }),
-      /* @__PURE__ */ e(Q, { isLoading: v, count: O.assetType })
+      n && n.nodes.length > 0 && /* @__PURE__ */ e(J, { tags: n.nodes, isLoading: y }),
+      /* @__PURE__ */ e(K, { isLoading: y, count: O.assetType })
     ] }),
     /* @__PURE__ */ e(re, { children: w === "MultiSelect" && T && t.page === "assets" && $ })
   ] });
 }
 function se() {
   return /* @__PURE__ */ m(oe, { children: [
-    /* @__PURE__ */ e(f, { width: 100 }),
-    /* @__PURE__ */ e(f, { width: 80 }),
-    /* @__PURE__ */ e(f, { width: 110 })
+    /* @__PURE__ */ e(u, { width: 100 }),
+    /* @__PURE__ */ e(u, { width: 80 }),
+    /* @__PURE__ */ e(u, { width: 110 })
   ] });
 }
 const k = p.nav`
 	display: flex;
 	justify-content: space-between;
 	background-color: #fff;
-	padding: ${F.spacing3} ${F.spacing4};
+	padding: ${L.spacing3} ${L.spacing4};
 	z-index: 20;
 `, re = p.div`
 	display: flex;
@@ -133,6 +134,5 @@ const k = p.nav`
 	align-items: center;
 `;
 export {
-  Te as AssetFilter
+  Ie as AssetFilter
 };
-//# sourceMappingURL=AssetFilter.js.map

package/AssetFilterContext.js

@@ -1,5 +1,5 @@
 import { jsx as R } from "react/jsx-runtime";
-import { createContext as V, useContext as X, useState as c, useEffect as x, useMemo as Y } from "react";
+import { createContext as V, useState as c, useEffect as x, useMemo as X, useContext as Y } from "react";
 const j = V(null);
 function U({
   children: o,
@@ -114,7 +114,7 @@ function U({
   function J(e) {
     C(e);
   }
-  const K = Y(
+  const K = X(
     () => ({
       assetTypes: b,
       metaproperties: h,
@@ -149,7 +149,7 @@ function A(o, u) {
   return o.filter((s) => s !== u);
 }
 function F() {
-  const o = X(j);
+  const o = Y(j);
   if (o === null)
     throw new Error("useAssetFilter must be used with a AssetFilterProvider");
   return o;
@@ -159,4 +159,3 @@ export {
   U as AssetFilterProvider,
   F as useAssetFilter
 };
-//# sourceMappingURL=AssetFilterContext.js.map

package/AssetItem.js

@@ -1,40 +1,40 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import i from "styled-components";
-import { token as n, Thumbnail as s } from "@bynder/design-system";
-import { getExtension as o, getThumbnail as l } from "./utils.js";
-import { useSelection as a } from "./SelectionContext.js";
-import { SelectedItemContainer as p } from "./SelectedItemContainer.js";
-function A({ asset: e }) {
-  const r = a();
+import i from "./styled-components.browser.esm.js";
+import { Thumbnail as s } from "./Thumbnail.js";
+import { token as o } from "./token.js";
+import { getExtension as n, getThumbnail as l } from "./utils2.js";
+import { useSelection as p } from "./SelectionContext.js";
+import { SelectedItemContainer as a } from "./SelectedItemContainer.js";
+function b({ asset: e }) {
+  const r = p();
   return /* @__PURE__ */ m(
-    p,
+    a,
     {
       title: e.name,
       onRemove: () => r.toggleAssets([e]),
       children: [
         /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(s, { variant: "preview", imageUrl: l(e), size: "m" }) }),
         /* @__PURE__ */ t(g, { children: e.name }),
-        o(e) && /* @__PURE__ */ t(h, { children: o(e) })
+        n(e) && /* @__PURE__ */ t(h, { children: n(e) })
       ]
     }
   );
 }
 const c = i.div`
-	margin-right: ${n.spacing4};
+	margin-right: ${o.spacing4};
 	max-width: 40px;
 `, g = i.span`
 	width: 160px;
-	margin-right: ${n.spacing3};
+	margin-right: ${o.spacing3};
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 `, h = i.span`
 	flex-grow: 1;
 	color: rgba(0, 34, 51, 0.5);
-	font-size: ${n.fontSize75};
+	font-size: ${o.fontSize75};
 	text-align: right;
 `;
 export {
-  A as AssetItem
+  b as AssetItem
 };
-//# sourceMappingURL=AssetItem.js.map