@bynder/compact-view 5.1.4 → 5.2.1

package/ActiveFilter.js

@@ -30,4 +30,3 @@ const n = r(o)`
 export {
   l as ActiveFilter
 };
-//# sourceMappingURL=ActiveFilter.js.map

package/ActiveFilters.js

@@ -78,4 +78,3 @@ const k = h.div`
 export {
   B as ActiveFilters
 };
-//# sourceMappingURL=ActiveFilters.js.map

package/AddMedia.js

@@ -1,6 +1,6 @@
 import { jsxs as x, Fragment as L, jsx as c } from "react/jsx-runtime";
-import { useRef as C, useState as b, useEffect as A } from "react";
-import { Button as E } from "@bynder/design-system";
+import { useRef as b, useState as C, useEffect as E } from "react";
+import { Button as A } from "@bynder/design-system";
 import { useConfig as M } from "./ConfigContext.js";
 import { useAuth as O } from "./LoginContext.js";
 import { useSelection as T } from "./SelectionContext.js";
@@ -13,46 +13,46 @@ import { ButtonAction as B } from "./ButtonAction.js";
 import { convertAssetIdToBase64 as G } from "./base64Converter.js";
 import { useSimilaritySearchStore as p } from "./useSimilaritySearchStore.js";
 function tt(t) {
-  const { assetFieldSelection: r, onSuccess: i, selectionMode: u, noCache: f } = M(), {
-    isSelected: d,
-    NLSSearchText: h,
-    isNLSSelected: g
-  } = p(), { preselectedAssetIds: F } = T(), m = O(), l = C(!0), [s, a] = b(
+  const { assetFieldSelection: r, onSuccess: i, selectionMode: u, noCache: d } = M(), {
+    isSelected: f,
+    NLSSearchText: m,
+    isNLSSelected: S
+  } = p(), { preselectedAssetIds: y } = T(), h = O(), l = b(!0), [s, a] = C(
     u === "SingleSelectFile" ? { status: "WaitingForFileSelection" } : { status: "Ready" }
   );
-  function y(e) {
+  function F(e) {
     a(e === void 0 ? { status: "WaitingForFileSelection" } : { status: "ReadyWithFile", file: e });
   }
-  A(() => () => {
+  E(() => () => {
     l.current = !1;
   }, []);
   function v() {
     const e = s.status === "ReadyWithFile" ? s.file : void 0;
     a({ status: "Loading" }), u !== "MultiSelect" && t.selection[0]?.type === "asset" ? D({
-      assetId: d || h && g ? G(t.selection[0].value.id) : t.selection[0].value.id,
-      auth: m,
+      assetId: f || m && S ? G(t.selection[0].value.id) : t.selection[0].value.id,
+      auth: h,
       assetFieldSelection: r,
-      noCache: f
+      noCache: d
     }).then((n) => {
-      S(n, e);
+      g(n, e);
     }) : N({
       selectedItems: t.selection,
-      auth: m,
+      auth: h,
       assetFieldSelection: r,
-      noCache: f,
-      isSimilaritySearchEnabled: d
+      noCache: d,
+      isSimilaritySearchEnabled: f || !!m && S
     }).then((n) => {
-      S(n, e);
+      g(n, e);
     });
   }
-  function S(e, n) {
+  function g(e, n) {
     if (k(e)) {
       a({ status: "Error" });
       return;
     }
     try {
       const o = Array.isArray(e.value) ? e.value : [e.value];
-      o.sort((R, W) => w(R, W, F)), i(o, { selectedFile: n });
+      o.sort((R, W) => w(R, W, y)), i(o, { selectedFile: n });
     } catch (o) {
       q.error(o);
     }
@@ -61,9 +61,9 @@ function tt(t) {
     }, 2e3));
   }
   return /* @__PURE__ */ x(L, { children: [
-    u === "SingleSelectFile" && t.selection[0]?.type === "asset" && /* @__PURE__ */ c(j, { asset: t.selection[0].value, onChange: y }),
+    u === "SingleSelectFile" && t.selection[0]?.type === "asset" && /* @__PURE__ */ c(j, { asset: t.selection[0].value, onChange: F }),
     /* @__PURE__ */ c(
-      E,
+      A,
       {
         variant: "primary",
         isDisabled: s.status === "Loading" || s.status === "WaitingForFileSelection",
@@ -87,4 +87,3 @@ function w(t, r, i) {
 export {
   tt as AddMedia
 };
-//# sourceMappingURL=AddMedia.js.map

package/Advanced.js

@@ -63,4 +63,3 @@ const A = o(p)``, $ = o.h1`
 export {
   O as Advanced
 };
-//# sourceMappingURL=Advanced.js.map

package/App.d.ts

@@ -14,6 +14,8 @@ export interface Props {
     onSuccess?: (assets: unknown[], additionalInformation: {
         selectedFile?: File;
     }) => void;
+    defaultImageDerivativeName?: string;
+    defaultVideoDerivativeName?: string;
     theme?: Theme;
     hideExternalAccess?: boolean;
     selectedAssets?: string[];
@@ -24,4 +26,4 @@ export interface Props {
     noCache?: boolean;
     selectAllOption?: boolean;
 }
-export declare function App({ assetFieldSelection, assetFilter, assetTypes, defaultSearchTerm, language, mode, onSuccess, theme, hideExternalAccess, selectedAssets, hideLimitedUse, isContainerMode, __shouldAddOriginal__, hideSwitch, noCache, selectAllOption, }: Props): React.JSX.Element;
+export declare function App({ assetFieldSelection, assetFilter, assetTypes, defaultSearchTerm, language, mode, onSuccess, defaultImageDerivativeName, defaultVideoDerivativeName, theme, hideExternalAccess, selectedAssets, hideLimitedUse, isContainerMode, __shouldAddOriginal__, hideSwitch, noCache, selectAllOption, }: Props): React.JSX.Element;

package/App.js

@@ -1,89 +1,97 @@
-import { jsx as e, jsxs as s, Fragment as P } from "react/jsx-runtime";
-import { useEffect as b } from "react";
-import { BrowserClient as F, makeFetchTransport as V, defaultStackParser as D, Hub as E } from "@sentry/browser";
-import { CollectionsView as I } from "./CollectionsView.js";
-import { CollectionView as T } from "./CollectionView.js";
+import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
+import { BrowserClient as F, makeFetchTransport as I, defaultStackParser as T, Hub as V } from "@sentry/browser";
+import { CollectionsView as D } from "./CollectionsView.js";
+import { CollectionView as O } from "./CollectionView.js";
 import { ConfigProvider as k, useConfig as y } from "./ConfigContext.js";
-import { AssetFilter as M } from "./AssetFilter.js";
-import { useLocalization as O } from "./index2.js";
+import { AssetFilter as E } from "./AssetFilter.js";
+import { useLocalization as M } from "./index2.js";
 import { ShadowRoot as R } from "./ShadowRoot.js";
 import { AssetFilterProvider as U } from "./AssetFilterContext.js";
 import { SelectionProvider as x } from "./SelectionContext.js";
 import { ThemeStyles as j } from "./Theming.js";
-import { Toolbar as H } from "./Toolbar.js";
-import { AssetsView as N } from "./AssetsView.js";
-import { SelectionFooter as z } from "./SelectionFooter.js";
+import { Toolbar as z } from "./Toolbar.js";
+import { AssetsView as H } from "./AssetsView.js";
+import { SelectionFooter as N } from "./SelectionFooter.js";
 import { Shield as B } from "./Shield.js";
 import { Dat as G } from "./Dat.js";
 import "./DatDropdownItem.js";
 import { useRouterSelectors as L } from "./useRouterStore.js";
-import { useSearchStore as _, useClearCollectionOnPageChange as q } from "./useSearchStore.js";
-import { useDat as J } from "./useDatStore.js";
-let n;
-n = new F({
+import { useClearCollectionOnPageChange as _ } from "./useSearchStore.js";
+import { useDat as q } from "./useDatStore.js";
+import { StoreInitializer as J } from "./StoreInitializer.js";
+let s;
+s = new F({
   dsn: "https://dd74b64cc05845468f0c3654b458da29@sentry10.bynder.cloud/464",
   autoSessionTracking: !0,
   tracesSampleRate: 1,
   integrations: [],
-  stackParser: D,
-  transport: V
-}), new E(n);
+  stackParser: T,
+  transport: I
+}), new V(s);
 function he({
   assetFieldSelection: o,
   assetFilter: r,
-  assetTypes: a = ["IMAGE", "AUDIO", "VIDEO", "DOCUMENT", "ARCHIVE"],
-  defaultSearchTerm: l,
-  language: c = "en_US",
+  assetTypes: m = ["IMAGE", "AUDIO", "VIDEO", "DOCUMENT", "ARCHIVE"],
+  defaultSearchTerm: a,
+  language: l = "en_US",
   mode: p = "MultiSelect",
   // eslint-disable-next-line no-console
-  onSuccess: f = (t, { selectedFile: i }) => console.log(t, i),
-  theme: d,
-  hideExternalAccess: u,
-  selectedAssets: h,
-  hideLimitedUse: g,
-  isContainerMode: S = !1,
-  __shouldAddOriginal__: C,
-  hideSwitch: w = !1,
-  noCache: v = !1,
-  selectAllOption: A = !1
+  onSuccess: f = (i, { selectedFile: t }) => console.log(i, t),
+  defaultImageDerivativeName: d,
+  defaultVideoDerivativeName: u,
+  theme: h,
+  hideExternalAccess: g,
+  selectedAssets: S,
+  hideLimitedUse: C,
+  isContainerMode: c = !1,
+  __shouldAddOriginal__: w,
+  hideSwitch: v = !1,
+  noCache: A = !1,
+  selectAllOption: P = !1
 }) {
-  O(c);
-  const { setSearch: t } = _(), { datUrl: i } = J(), m = {
+  M(l);
+  const { datUrl: i } = q(), t = {
     assetFieldSelection: o,
     assetFilter: r,
-    assetTypes: a,
-    language: c,
+    assetTypes: m,
+    language: l,
     onSuccess: f,
+    defaultImageDerivativeName: d,
+    defaultVideoDerivativeName: u,
     selectionMode: p,
-    theme: d,
-    hideExternalAccess: u,
-    __shouldAddOriginal__: C,
-    hideSwitch: w,
-    noCache: v,
-    selectAllOption: A
+    theme: h,
+    hideExternalAccess: g,
+    __shouldAddOriginal__: w,
+    hideSwitch: v,
+    noCache: A,
+    selectAllOption: P
   };
-  return b(() => {
-    t("assets", l ?? "");
-  }, [l, t]), /* @__PURE__ */ e(B, { sentryClient: n, children: /* @__PURE__ */ e(R, { isContainerMode: S, children: /* @__PURE__ */ e(U, { hideLimitedUse: g, predefinedFilter: r, children: /* @__PURE__ */ e(k, { value: m, children: /* @__PURE__ */ s(x, { preselectedAssetIds: h ?? [], children: [
-    /* @__PURE__ */ e(j, { theme: m.theme }),
-    /* @__PURE__ */ s("div", { className: "cv-root cv-container", children: [
-      /* @__PURE__ */ e(H, {}),
-      /* @__PURE__ */ e(K, {}),
+  return /* @__PURE__ */ e(B, { sentryClient: s, children: /* @__PURE__ */ e(R, { isContainerMode: c, children: /* @__PURE__ */ e(U, { hideLimitedUse: C, predefinedFilter: r, children: /* @__PURE__ */ e(k, { value: t, children: /* @__PURE__ */ n(x, { preselectedAssetIds: S ?? [], children: [
+    /* @__PURE__ */ e(
+      J,
+      {
+        defaultSearchTerm: a,
+        resetOnMount: !c
+      }
+    ),
+    /* @__PURE__ */ e(j, { theme: t.theme }),
+    /* @__PURE__ */ n("div", { className: "cv-root cv-container", children: [
       /* @__PURE__ */ e(z, {}),
+      /* @__PURE__ */ e(K, {}),
+      /* @__PURE__ */ e(N, {}),
       i && /* @__PURE__ */ e(G, {})
     ] })
   ] }) }) }) }) });
 }
 function K() {
   const o = L.use.page(), { assetFilter: r } = y();
-  return q(o), /* @__PURE__ */ s(P, { children: [
-    o.page !== "collections" && (r === void 0 || r && r.showToolbar) && /* @__PURE__ */ e(M, {}),
-    o.page === "assets" && /* @__PURE__ */ e(N, {}),
-    o.page === "collections" && /* @__PURE__ */ e(I, {}),
-    o.page === "collection" && /* @__PURE__ */ e(T, { collection: o.collection })
+  return _(o), /* @__PURE__ */ n(b, { children: [
+    o.page !== "collections" && (r === void 0 || r && r.showToolbar) && /* @__PURE__ */ e(E, {}),
+    o.page === "assets" && /* @__PURE__ */ e(H, {}),
+    o.page === "collections" && /* @__PURE__ */ e(D, {}),
+    o.page === "collection" && /* @__PURE__ */ e(O, { collection: o.collection })
   ] });
 }
 export {
   he as App
 };
-//# sourceMappingURL=App.js.map

package/AssetCard.js

@@ -1,76 +1,79 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { useState as g, useEffect as x } from "react";
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { useState as x, useEffect as w } 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 { token as o, Card as l, Badge as $, TruncatedText as U } from "@bynder/design-system";
+import { useConfig as V } from "./ConfigContext.js";
+import { getStatusText as W, getExtension as _, getThumbnail as b } from "./utils.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 tt({
   className: e,
+  dragState: p,
   fadeIn: y = !0,
   asset: t,
   isSelected: n,
   isOutlined: C,
-  onClick: p,
-  children: $ = null,
-  isSilimilaritySearchEnabled: v = !1,
+  onClick: c,
+  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: m } = V(), h = W(t), u = _(t);
+  w(() => {
+    const r = t.metaproperties?.nodes.filter(
       (a) => a.showInGridView || a.showInListView
     );
-    S(o);
-  }, [t.metaproperties]), x(() => {
-    const o = t.textMetaproperties?.filter(
+    I(r);
+  }, [t.metaproperties]), w(() => {
+    const r = t.textMetaproperties?.filter(
       (a) => a.showInGridView || a.showInListView
     );
-    k(o);
+    A(r);
   }, [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 f = (r) => {
+    c !== void 0 && (r.stopPropagation(), D(), c(t, r));
+  }, P = (r) => {
+    r.stopPropagation(), T([t.databaseId ? t.databaseId : t.id]);
   };
   return /* @__PURE__ */ i(
-    j,
+    E,
     {
       id: t.id,
+      $dragState: p,
       $theme: m,
       $isOutlined: (n || C) && m?.colorPrimary !== void 0,
       $fadeIn: y,
       className: e,
       "data-drag-select-id": t.id,
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ g(
         l,
         {
           contextAction: /* @__PURE__ */ i(
-            _,
+            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);
               }
             }
           ),
           selectButtonAriaLabel: n ? d("Deselect") : d("Select"),
-          onSelect: u,
-          onClick: u,
+          onSelect: f,
+          onClick: f,
           isSelected: n,
           "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__ */ i(G, { $limitWidth: !!u, children: /* @__PURE__ */ i($, { color: "black-alpha", "data-testid": "asset-tag", children: /* @__PURE__ */ i(U, { children: h }) }) }) : void 0,
                 "data-testid": "asset-type",
-                badge: h,
+                badge: u,
                 children: [
                   /* @__PURE__ */ i(l.Images, { children: b(t) && /* @__PURE__ */ i(
                     l.Img,
@@ -80,27 +83,27 @@ function Z({
                       contentResize: "fit"
                     }
                   ) }),
-                  v && t.__typename === "Image" && /* @__PURE__ */ i(
-                    H,
+                  S && t.__typename === "Image" && /* @__PURE__ */ i(
+                    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__ */ i($, { isSmall: !0, children: d("Show similar") })
                     }
                   )
                 ]
               }
             ),
-            $,
-            /* @__PURE__ */ i(G, { "data-testid": "asset-name", children: t.name }),
+            v,
+            /* @__PURE__ */ i(H, { "data-testid": "asset-name", children: t.name }),
             /* @__PURE__ */ i(
-              z,
+              L,
               {
                 metaproperties: B,
-                textMetaproperties: I
+                textMetaproperties: k
               }
             )
           ]
@@ -109,8 +112,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 +128,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 +159,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 +171,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
+  tt as AssetCard
 };
-//# sourceMappingURL=AssetCard.js.map

package/AssetCardMetaproperties.js

@@ -44,4 +44,3 @@ const b = ({ metaproperties: p, textMetaproperties: d }) => {
 export {
   b as AssetCardMetaproperties
 };
-//# sourceMappingURL=AssetCardMetaproperties.js.map