@bynder/compact-view 5.1.3 → 5.1.4

package/AssetCardMetaproperties.js

@@ -0,0 +1,47 @@
+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);
+    return /* @__PURE__ */ n(x, { "data-testid": "asset-card-metaproperty", children: [
+      /* @__PURE__ */ n(h, { children: [
+        t,
+        ":"
+      ] }),
+      /* @__PURE__ */ e(w, { title: o, children: s })
+    ] }, t);
+  }) }) }) : null;
+}, f = r.dl`
+	color: rgba(0, 34, 51, 0.5);
+	font-size: ${l.fontSize75};
+	display: flex;
+	flex-direction: column;
+	grid-row-gap: 1px;
+	row-gap: 1px;
+	margin: 0;
+`, x = r.div`
+	display: flex;
+	flex-wrap: wrap;
+`, h = r.dt`
+	color: rgba(0, 34, 51, 0.3);
+	padding-right: 4px;
+	margin: 0;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`, w = r.dd`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin: 0;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+export {
+  b as AssetCardMetaproperties
+};
+//# sourceMappingURL=AssetCardMetaproperties.js.map

package/AssetCardMetaproperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCardMetaproperties.js","sources":["../../src/views/asset/asset-card/AssetCardMetaproperties.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Card, token } from '@bynder/design-system';\nimport { MetapropertyType } from '@src/filter/filters/metaproperty/MetapropertyFilterContent';\nimport { TextMetapropertiesType } from '@src/views/asset/asset.type';\nimport { combineMetaproperties } from '@src/utils/combineMetaproperties';\nimport { trimMetapropertyValue } from '@src/utils/trimMetapropertyValue';\n\ninterface Props {\n\tmetaproperties?: MetapropertyType[];\n\ttextMetaproperties?: TextMetapropertiesType[];\n}\n\nexport const AssetCardMetaproperties = ({ metaproperties, textMetaproperties }: Props) => {\n\tconst combinedProperties = combineMetaproperties(metaproperties, textMetaproperties);\n\n\treturn combinedProperties?.length ? (\n\t\t<Card.AdditionalInfo>\n\t\t\t<DescriptionList>\n\t\t\t\t{combinedProperties.map(({ label, value }) => {\n\t\t\t\t\tconst trimmedValue = trimMetapropertyValue(value);\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DescriptionWrapper key={label} data-testid=\"asset-card-metaproperty\">\n\t\t\t\t\t\t\t<DescriptionTerm>{label}:</DescriptionTerm>\n\t\t\t\t\t\t\t<DescriptionDefinition title={value}>\n\t\t\t\t\t\t\t\t{trimmedValue}\n\t\t\t\t\t\t\t</DescriptionDefinition>\n\t\t\t\t\t\t</DescriptionWrapper>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</DescriptionList>\n\t\t</Card.AdditionalInfo>\n\t) : null;\n};\n\nconst DescriptionList = styled.dl`\n\tcolor: rgba(0, 34, 51, 0.5);\n\tfont-size: ${token.fontSize75};\n\tdisplay: flex;\n\tflex-direction: column;\n\tgrid-row-gap: 1px;\n\trow-gap: 1px;\n\tmargin: 0;\n`;\n\nconst DescriptionWrapper = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n`;\n\nconst DescriptionTerm = styled.dt`\n\tcolor: rgba(0, 34, 51, 0.3);\n\tpadding-right: 4px;\n\tmargin: 0;\n\twidth: 100%;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nconst DescriptionDefinition = styled.dd`\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmargin: 0;\n\twidth: 100%;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n"],"names":["AssetCardMetaproperties","metaproperties","textMetaproperties","combinedProperties","combineMetaproperties","jsx","Card","DescriptionList","label","value","trimmedValue","trimMetapropertyValue","jsxs","DescriptionWrapper","DescriptionTerm","DescriptionDefinition","styled","token"],"mappings":";;;;;AAaO,MAAMA,IAA0B,CAAC,EAAE,gBAAAC,GAAgB,oBAAAC,QAAgC;AACzF,QAAMC,IAAqBC,EAAsBH,GAAgBC,CAAkB;AAEnF,SAAOC,GAAoB,SAC1B,gBAAAE,EAACC,EAAK,gBAAL,EACA,UAAA,gBAAAD,EAACE,GAAA,EACC,UAAAJ,EAAmB,IAAI,CAAC,EAAE,OAAAK,GAAO,OAAAC,QAAY;AAC7C,UAAMC,IAAeC,EAAsBF,CAAK;AAEhD,WACC,gBAAAG,EAACC,GAAA,EAA+B,eAAY,2BAC3C,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAiB,UAAA;AAAA,QAAAN;AAAA,QAAM;AAAA,MAAA,GAAC;AAAA,MACzB,gBAAAH,EAACU,GAAA,EAAsB,OAAON,GAC5B,UAAAC,EAAA,CACF;AAAA,IAAA,EAAA,GAJwBF,CAKzB;AAAA,EAEF,CAAC,EAAA,CACF,EAAA,CACD,IACG;AACL,GAEMD,IAAkBS,EAAO;AAAA;AAAA,cAEjBC,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBJ,IAAqBG,EAAO;AAAA;AAAA;AAAA,GAK5BF,IAAkBE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASzBD,IAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/AssetFilter.js

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

package/AssetFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetFilter.js","sources":["../../src/filter/AssetFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from 'styled-components';\nimport { Button, token } from '@bynder/design-system';\nimport { IconMultiSelect, IconRectangle } from '@bynder/icons';\nimport { useRouterSelectors } from '@src/store/useRouterStore';\nimport { useAssetFilter } from './AssetFilterContext';\nimport { useLocalization } from '../localization';\nimport { useConfig } from '../app-config/ConfigContext';\nimport { useGetFilters } from '../api/getFilters';\nimport { Skeleton } from '../common/components/Skeleton';\nimport { HorizontalScroll } from '../common/components/HorizontalScroll';\nimport { Tags } from './filters/tags/Tags';\nimport { Advanced } from './filters/advanced/Advanced';\nimport { useSelection } from '@src/select/SelectionContext';\nimport { useAuth } from '@src/login/LoginContext';\nimport { getInitialFilters } from '../api/rest/getInitialFilters';\nimport { getAssetCounts } from '../api/rest/getAssetCounts';\nimport { Smartfilter, SmartfilterMetaproperty } from '@src/api/rest/types';\nimport { Smartfilter as SmartfilterComponent } from './filters/smartfilters/Smartfilters';\nimport { useSearchStateByPage } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\nexport function AssetFilter() {\n\tconst filter = useAssetFilter();\n\tconst page = useRouterSelectors.use.page();\n\tconst { value: searchValue } = useSearchStateByPage('assets');\n\tconst {\n\t\tassetTypes,\n\t\tlanguage,\n\t\tassetFilter: predefinedFilter,\n\t\tnoCache,\n\t\tselectionMode,\n\t\tselectAllOption,\n\t} = useConfig();\n\tconst { clear: clearSelection, selectAll } = useSelection();\n\tconst auth = useAuth();\n\n\tconst [currentPage, setCurrentPage] = useState(page.page);\n\tuseLocalization(language);\n\tconst [isAllSelected, setIsAllSelected] = useState(false);\n\tconst {\n\t\tisSelected: isSimilaritySearchSelected,\n\t\tisNLSSelected,\n\t\tNLSSearchText,\n\t} = useSimilaritySearchStore();\n\tconst [isSmartfiltersLoading, setIsSmartfiltersLoading] = useState(false);\n\tconst [isAssetCountsLoading, setIsAssetCountsLoading] = useState(false);\n\tconst [smartfilters, setSmartfilters] = useState<Smartfilter[]>();\n\tconst [metaproperties, setMetaproperties] = useState<\n\t\tRecord<string, Record<string, SmartfilterMetaproperty>>\n\t>({});\n\n\tconst { data, isLoading } = useGetFilters(\n\t\t{\n\t\t\tfilter,\n\t\t\tsearchTerm: searchValue || null,\n\t\t\tallAssetTypes: assetTypes,\n\t\t\tlanguage,\n\t\t\tpredefinedFilter,\n\t\t\tcollectionId: page.page === 'collection' ? page.collection.id : null,\n\t\t},\n\t\tnoCache,\n\t);\n\tuseEffect(() => {\n\t\tconst requestFilters = async () => {\n\t\t\tsetIsSmartfiltersLoading(true);\n\n\t\t\ttry {\n\t\t\t\tconst { filters, metaproperties: fetchedMetaproperties } = await getInitialFilters({\n\t\t\t\t\tauth,\n\t\t\t\t});\n\t\t\t\tsetSmartfilters(filters);\n\t\t\t\tsetMetaproperties(fetchedMetaproperties);\n\t\t\t} catch (error) {\n\t\t\t\tsetSmartfilters([]);\n\t\t\t} finally {\n\t\t\t\tsetIsSmartfiltersLoading(false);\n\t\t\t}\n\t\t};\n\n\t\trequestFilters();\n\t}, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tuseEffect(() => {\n\t\tif (page.page !== currentPage) {\n\t\t\tsetCurrentPage(page.page);\n\t\t\tfilter.clear();\n\t\t}\n\n\t\treturn () => {\n\t\t\tfilter.clear();\n\t\t};\n\t}, [currentPage, page.page]); // eslint-disable-line react-hooks/exhaustive-deps\n\t// filter is not a dependency because it's a context value\n\t// we do not need to re-run the effect when the filter context value changes\n\n\tuseEffect(() => {\n\t\tlet isCancelled = false;\n\n\t\tconst fetchAssetCounts = async () => {\n\t\t\tsetIsAssetCountsLoading(true);\n\n\t\t\ttry {\n\t\t\t\tconst response = await getAssetCounts({\n\t\t\t\t\tauth,\n\t\t\t\t\tfilter: {\n\t\t\t\t\t\tsearchTerm: searchValue,\n\t\t\t\t\t\tassetTypes,\n\t\t\t\t\t\tcollectionId: page.page === 'collection' ? page.collection.id : undefined,\n\t\t\t\t\t\ttagNames: filter.tags,\n\t\t\t\t\t\tisLimitedUse: filter.isLimited,\n\t\t\t\t\t\tmetaproperties: filter.selectedSmartfilterOptions,\n\t\t\t\t\t},\n\t\t\t\t});\n\n\t\t\t\tif (!isCancelled) {\n\t\t\t\t\tfilter.setActiveFiltersState(response);\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tif (!isCancelled) {\n\t\t\t\t\tconsole.error('Error fetching asset counts:', error);\n\t\t\t\t}\n\t\t\t} finally {\n\t\t\t\tif (!isCancelled) {\n\t\t\t\t\tsetIsAssetCountsLoading(false);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfetchAssetCounts();\n\n\t\treturn () => {\n\t\t\tisCancelled = true;\n\t\t};\n\t}, [filter.tags, searchValue, assetTypes, page.page, filter.selectedSmartfilterOptions]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tif (data.tag === 'Failure' || !data.value || isSmartfiltersLoading || isAssetCountsLoading) {\n\t\treturn (\n\t\t\t<NavParent>\n\t\t\t\t<SkeletonFilters />\n\t\t\t</NavParent>\n\t\t);\n\t}\n\n\tconst { tags, count } = data.value.searchAssets;\n\n\tconst selectAllHandler = (() => {\n\t\tif (isAllSelected) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tclearSelection();\n\t\t\t\t\t\tsetIsAllSelected(false);\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<IconMultiSelect />}\n\t\t\t\t\ttitle=\"\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tdata-testid=\"deselect-all\"\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tselectAll();\n\t\t\t\t\tsetIsAllSelected(true);\n\t\t\t\t}}\n\t\t\t\ticon={<IconRectangle />}\n\t\t\t\ttitle=\"\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tdata-testid=\"select-all\"\n\t\t\t/>\n\t\t);\n\t})();\n\n\tif (isSimilaritySearchSelected || (isNLSSelected && NLSSearchText)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavParent data-testid=\"filter-nav\">\n\t\t\t<HorizontalScroll>\n\t\t\t\t{smartfilters && smartfilters.length > 0 && (\n\t\t\t\t\t<SmartfilterComponent\n\t\t\t\t\t\tsmartfilters={smartfilters}\n\t\t\t\t\t\tmetaproperties={metaproperties}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{tags && tags.nodes.length > 0 && <Tags tags={tags.nodes} isLoading={isLoading} />}\n\t\t\t\t<Advanced isLoading={isLoading} count={count.assetType} />\n\t\t\t</HorizontalScroll>\n\n\t\t\t<AssetFilterDropdownContainer>\n\t\t\t\t{selectionMode === 'MultiSelect' &&\n\t\t\t\t\tselectAllOption &&\n\t\t\t\t\tpage.page === 'assets' &&\n\t\t\t\t\tselectAllHandler}\n\t\t\t</AssetFilterDropdownContainer>\n\t\t</NavParent>\n\t);\n}\n\n// eslint-disable-next-line react/no-multi-comp\nfunction SkeletonFilters() {\n\treturn (\n\t\t<SkeletonWrapper>\n\t\t\t<Skeleton width={100} />\n\t\t\t<Skeleton width={80} />\n\t\t\t<Skeleton width={110} />\n\t\t</SkeletonWrapper>\n\t);\n}\n\nconst NavParent = styled.nav`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbackground-color: #fff;\n\tpadding: ${token.spacing3} ${token.spacing4};\n\tz-index: 20;\n`;\n\nconst AssetFilterDropdownContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\n\tbutton {\n\t\theight: initial;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t}\n`;\n\nconst SkeletonWrapper = styled.div`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n"],"names":["AssetFilter","filter","useAssetFilter","page","useRouterSelectors","searchValue","useSearchStateByPage","assetTypes","language","predefinedFilter","noCache","selectionMode","selectAllOption","useConfig","clearSelection","selectAll","useSelection","auth","useAuth","currentPage","setCurrentPage","useState","useLocalization","isAllSelected","setIsAllSelected","isSimilaritySearchSelected","isNLSSelected","NLSSearchText","useSimilaritySearchStore","isSmartfiltersLoading","setIsSmartfiltersLoading","isAssetCountsLoading","setIsAssetCountsLoading","smartfilters","setSmartfilters","metaproperties","setMetaproperties","data","isLoading","useGetFilters","useEffect","filters","fetchedMetaproperties","getInitialFilters","isCancelled","response","getAssetCounts","error","jsx","NavParent","SkeletonFilters","tags","count","selectAllHandler","Button","IconMultiSelect","IconRectangle","jsxs","HorizontalScroll","SmartfilterComponent","Tags","Advanced","AssetFilterDropdownContainer","SkeletonWrapper","Skeleton","styled","token"],"mappings":"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"}

package/AssetFilterContext.js

@@ -0,0 +1,162 @@
+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";
+const j = V(null);
+function U({
+  children: o,
+  hideLimitedUse: u = !1,
+  predefinedFilter: s
+}) {
+  const [b, l] = c(
+    s?.predefinedAssetType ? [...s?.predefinedAssetType] : []
+  ), [p, g] = c([]), [E, C] = c(!1), [M, m] = c(
+    s?.predefinedTagNames ? [...s.predefinedTagNames] : []
+  ), [O, I] = c(), [P, S] = c({}), [v, d] = c({}), [D, y] = c(null);
+  x(() => {
+    I(u ? !1 : void 0);
+  }, [u]), x(() => {
+    w();
+  }, [s?.predefinedMetapropertiesOptions]);
+  function L(e) {
+    l((t) => T(t, e));
+  }
+  function N(e) {
+    s?.showToolbar && s.predefinedAssetType?.includes(e) || l((t) => A(t, e));
+  }
+  function W(e) {
+    g((t) => T(t, e.id)), S((t) => ({
+      ...t,
+      [e.id]: e
+    }));
+  }
+  function _(e) {
+    g(
+      (t) => A(t, e.id)
+    ), S((t) => {
+      const { [e.id]: i, ...r } = t;
+      return r;
+    });
+  }
+  function w() {
+    s?.predefinedMetapropertiesOptions && d(() => Object.entries(
+      s.predefinedMetapropertiesOptions || {}
+    ).reduce((e, [t, i]) => (e[t] = {}, Object.entries(i).forEach(([r, n]) => {
+      e[t][n] = {
+        id: n,
+        label: r,
+        metapropertyName: t
+      };
+    }), e), {}));
+  }
+  function k(e) {
+    m((t) => T(t, e));
+  }
+  function q(e) {
+    s?.showToolbar && s.predefinedTagNames?.includes(e) || m((t) => A(t, e));
+  }
+  function z(e, t, i) {
+    const r = {
+      id: t.id,
+      label: t.label,
+      metapropertyName: e
+    };
+    d((n) => {
+      const a = n[e] || {}, f = !!a[t.id];
+      return i ? {
+        ...n,
+        [e]: f ? (
+          // Remove if already selected
+          Object.fromEntries(
+            Object.entries(a).filter(
+              ([Q]) => Q !== t.id
+            )
+          )
+        ) : (
+          // Add if not selected already
+          {
+            ...a,
+            [t.id]: r
+          }
+        )
+      } : f ? {
+        ...n,
+        [e]: {}
+      } : {
+        ...n,
+        [e]: {
+          [t.id]: r
+        }
+      };
+    });
+  }
+  function B(e, t) {
+    d((i) => {
+      const { [e]: r, ...n } = i, { [t]: a, ...f } = r || {};
+      return f && Object.keys(f).length > 0 ? {
+        ...i,
+        [e]: f
+      } : n;
+    });
+  }
+  function G(e) {
+    const t = e.count, i = Object.entries(t || {}).filter(
+      ([r, n]) => r.startsWith("property") && n && Object.keys(n).length > 0
+    ).reduce((r, [n, a]) => (r[n.replace("property_", "")] = a, r), {});
+    y(i);
+  }
+  function H() {
+    l(
+      s?.showToolbar && s?.predefinedAssetType ? [...s.predefinedAssetType] : []
+    ), m(
+      s?.showToolbar && s?.predefinedTagNames ? [...s.predefinedTagNames] : []
+    ), d({}), y(null);
+  }
+  const h = p.map((e) => P[e]);
+  function J(e) {
+    C(e);
+  }
+  const K = Y(
+    () => ({
+      assetTypes: b,
+      metaproperties: h,
+      metapropertyIds: p,
+      tags: M,
+      isLimited: O,
+      addAssetType: L,
+      removeAssetType: N,
+      addMetaproperty: W,
+      removeMetaproperty: _,
+      setPredefinedMetaproperties: w,
+      addTag: k,
+      removeTag: q,
+      clear: H,
+      setDropdownState: J,
+      isDropdownActive: E,
+      selectSmartfilterOption: z,
+      removeSmartfilterOption: B,
+      selectedSmartfilterOptions: v,
+      setActiveFiltersState: G,
+      existingFilters: D
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [b, h, M, O, p, v]
+  );
+  return /* @__PURE__ */ R(j.Provider, { value: K, children: o });
+}
+function T(o, u) {
+  return o.includes(u) ? o : [...o, u];
+}
+function A(o, u) {
+  return o.filter((s) => s !== u);
+}
+function F() {
+  const o = X(j);
+  if (o === null)
+    throw new Error("useAssetFilter must be used with a AssetFilterProvider");
+  return o;
+}
+export {
+  j as AssetFilterContext,
+  U as AssetFilterProvider,
+  F as useAssetFilter
+};
+//# sourceMappingURL=AssetFilterContext.js.map

package/AssetFilterContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetFilterContext.js","sources":["../../src/filter/AssetFilterContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useMemo, useEffect } from 'react';\nimport { AssetType } from '../views/asset/asset.type';\nimport { MetapropertyOptionType as MetapropertyOption } from './filters/metaproperty/MetapropertyOption';\nimport { AssetFilterJson } from '@src/filter/assetFilter.type';\nimport {\n\tAutcompleteResponseOption,\n\tSmartfilterOption,\n\tAutocompleteOption,\n\tSmartfilterSelectedOptionType,\n\tselectedSmartfilterOptionsType,\n\tAssetCountType,\n} from '@src/api/rest/types';\n\nexport interface Filter {\n\tassetTypes: AssetType[];\n\tmetaproperties: MetapropertyOption[];\n\tmetapropertyIds?: string[];\n\ttags: string[];\n\tisLimited?: boolean;\n\tisDropdownActive?: boolean;\n\tselectedSmartfilterOptions?: selectedSmartfilterOptionsType;\n\texistingFilters?: Record<string, Record<string, number>> | null;\n}\n\ninterface Actions {\n\taddAssetType: (assetType: AssetType) => void;\n\tremoveAssetType: (assetType: AssetType) => void;\n\taddMetaproperty: (metaproperty: MetapropertyOption) => void;\n\tremoveMetaproperty: (metaproperty: MetapropertyOption) => void;\n\tsetPredefinedMetaproperties: (metaproperties: Record<string, MetapropertyOption>) => void;\n\taddTag: (tag: string) => void;\n\tremoveTag: (tag: string) => void;\n\tclear: () => void;\n\tsetDropdownState: (active: boolean) => void;\n\tselectSmartfilterOption: (\n\t\tmetapropertyName: string,\n\t\toption: SmartfilterOption | AutcompleteResponseOption,\n\t\tisMultifilter?: boolean,\n\t) => void;\n\tremoveSmartfilterOption: (metapropertyName: string, optionId: string) => void;\n\tsetActiveFiltersState: (count: AssetCountType) => void;\n}\n\ntype MetapropertyMapType = Record<string, MetapropertyOption>;\n\nexport const AssetFilterContext = createContext<(Filter & Actions) | null>(null);\n\nexport function AssetFilterProvider({\n\tchildren,\n\thideLimitedUse = false,\n\tpredefinedFilter,\n}: {\n\tchildren: React.ReactNode;\n\thideLimitedUse?: boolean;\n\tpredefinedFilter?: AssetFilterJson;\n}) {\n\tconst [assetTypes, setAssetTypes] = useState<AssetType[]>(\n\t\tpredefinedFilter?.predefinedAssetType ? [...predefinedFilter?.predefinedAssetType] : [],\n\t);\n\tconst [metapropertyIds, setMetapropertyIds] = useState<string[]>([]);\n\tconst [isDropdownActive, setIsDropdownActive] = useState<boolean>(false);\n\tconst [tags, setTags] = useState<string[]>(\n\t\tpredefinedFilter?.predefinedTagNames ? [...predefinedFilter.predefinedTagNames] : [],\n\t);\n\tconst [isLimited, setIsLimited] = useState<boolean | undefined>();\n\tconst [metapropertyMap, setMetapropertyMap] = useState<MetapropertyMapType>({});\n\tconst [selectedSmartfilterOptions, setSelectedSmartfilterOptions] = useState<\n\t\tRecord<string, Record<string, SmartfilterSelectedOptionType>>\n\t>({});\n\tconst [existingFilters, setExistingFilters] = useState<Record<\n\t\tstring,\n\t\tRecord<string, number>\n\t> | null>(null);\n\n\tuseEffect(() => {\n\t\t// If hideLimitedUse is false, we want to display all assets and we don't\n\t\t// filter on isLimited. If hideLimitedUse is true we want to hide limited\n\t\t// assets, so we filter by setting isLimited to false.\n\t\tsetIsLimited(hideLimitedUse ? false : undefined);\n\t}, [hideLimitedUse]);\n\n\tuseEffect(() => {\n\t\tsetPredefinedMetaproperties();\n\t}, [predefinedFilter?.predefinedMetapropertiesOptions]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tfunction addAssetType(assetType: AssetType) {\n\t\tsetAssetTypes((prevAssetTypes) => addToSet(prevAssetTypes, assetType));\n\t}\n\n\tfunction removeAssetType(assetType: AssetType) {\n\t\tif (\n\t\t\tpredefinedFilter?.showToolbar &&\n\t\t\tpredefinedFilter.predefinedAssetType?.includes(assetType)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetAssetTypes((prevAssetTypes) => removeFromSet(prevAssetTypes, assetType));\n\t}\n\n\tfunction addMetaproperty(metaproperty: MetapropertyOption) {\n\t\tsetMetapropertyIds((prevMetapropertyIds) => addToSet(prevMetapropertyIds, metaproperty.id));\n\t\tsetMetapropertyMap((prevMetaproperties) => ({\n\t\t\t...prevMetaproperties,\n\t\t\t[metaproperty.id]: metaproperty,\n\t\t}));\n\t}\n\n\tfunction removeMetaproperty(metaproperty: MetapropertyOption) {\n\t\tsetMetapropertyIds((prevMetapropertyIds) =>\n\t\t\tremoveFromSet(prevMetapropertyIds, metaproperty.id),\n\t\t);\n\t\tsetMetapropertyMap((prevMetaproperties) => {\n\t\t\tconst { [metaproperty.id]: removed, ...remaining } = prevMetaproperties;\n\n\t\t\treturn remaining;\n\t\t});\n\t}\n\n\tfunction setPredefinedMetaproperties() {\n\t\tif (predefinedFilter?.predefinedMetapropertiesOptions) {\n\t\t\tsetSelectedSmartfilterOptions(() => {\n\t\t\t\treturn Object.entries(\n\t\t\t\t\tpredefinedFilter.predefinedMetapropertiesOptions || {},\n\t\t\t\t).reduce((acc, [key, value]) => {\n\t\t\t\t\tacc[key] = {};\n\t\t\t\t\tObject.entries(value).forEach(([name, id]) => {\n\t\t\t\t\t\tacc[key][id] = {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tlabel: name,\n\t\t\t\t\t\t\tmetapropertyName: key,\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {});\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction addTag(tag: string) {\n\t\tsetTags((prevTags) => addToSet(prevTags, tag));\n\t}\n\n\tfunction removeTag(tag: string) {\n\t\tif (predefinedFilter?.showToolbar && predefinedFilter.predefinedTagNames?.includes(tag)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetTags((prevTags) => removeFromSet(prevTags, tag));\n\t}\n\n\tfunction selectSmartfilterOption(\n\t\tmetapropertyName: string,\n\t\toption: SmartfilterOption | AutocompleteOption,\n\t\tisMultifilter?: boolean,\n\t) {\n\t\tconst selectedOption: SmartfilterSelectedOptionType = {\n\t\t\tid: option.id,\n\t\t\tlabel: option.label,\n\t\t\tmetapropertyName,\n\t\t};\n\n\t\tsetSelectedSmartfilterOptions((prevOptions) => {\n\t\t\tconst currentSelections = prevOptions[metapropertyName] || {};\n\t\t\tconst isAlreadySelected = !!currentSelections[option.id];\n\n\t\t\tif (isMultifilter) {\n\t\t\t\treturn {\n\t\t\t\t\t...prevOptions,\n\t\t\t\t\t[metapropertyName]: isAlreadySelected\n\t\t\t\t\t\t? // Remove if already selected\n\t\t\t\t\t\t  Object.fromEntries(\n\t\t\t\t\t\t\t\tObject.entries(currentSelections).filter(\n\t\t\t\t\t\t\t\t\t([key]) => key !== option.id,\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: // Add if not selected already\n\t\t\t\t\t\t  {\n\t\t\t\t\t\t\t\t...currentSelections,\n\t\t\t\t\t\t\t\t[option.id]: selectedOption,\n\t\t\t\t\t\t  },\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// For single selection:\n\t\t\t// Remove selection if already present\n\t\t\tif (isAlreadySelected) {\n\t\t\t\treturn {\n\t\t\t\t\t...prevOptions,\n\t\t\t\t\t[metapropertyName]: {},\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// Otherwise add the new selection\n\t\t\treturn {\n\t\t\t\t...prevOptions,\n\t\t\t\t[metapropertyName]: {\n\t\t\t\t\t[option.id]: selectedOption,\n\t\t\t\t},\n\t\t\t};\n\t\t});\n\t}\n\n\tfunction removeSmartfilterOption(metapropertyName: string, optionId: string) {\n\t\tsetSelectedSmartfilterOptions((prevOptions) => {\n\t\t\tconst { [metapropertyName]: removed, ...remaining } = prevOptions;\n\n\t\t\tconst { [optionId]: removedOption, ...remainingOptions } = removed || {};\n\n\t\t\tif (remainingOptions && Object.keys(remainingOptions).length > 0) {\n\t\t\t\treturn {\n\t\t\t\t\t...prevOptions,\n\t\t\t\t\t[metapropertyName]: remainingOptions,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn remaining;\n\t\t});\n\t}\n\n\tfunction setActiveFiltersState(count: AssetCountType) {\n\t\tconst activeMetaproperties = count.count;\n\t\tconst nonEmptyMetaproperties = Object.entries(activeMetaproperties || {})\n\t\t\t.filter(\n\t\t\t\t([key, value]) =>\n\t\t\t\t\tkey.startsWith('property') && value && Object.keys(value).length > 0,\n\t\t\t)\n\t\t\t.reduce((acc, [key, value]) => {\n\t\t\t\tacc[key.replace('property_', '')] = value;\n\n\t\t\t\treturn acc;\n\t\t\t}, {});\n\n\t\tsetExistingFilters(nonEmptyMetaproperties);\n\t}\n\n\tfunction clear() {\n\t\tsetAssetTypes(\n\t\t\tpredefinedFilter?.showToolbar && predefinedFilter?.predefinedAssetType\n\t\t\t\t? [...predefinedFilter.predefinedAssetType]\n\t\t\t\t: [],\n\t\t);\n\n\t\tsetTags(\n\t\t\tpredefinedFilter?.showToolbar && predefinedFilter?.predefinedTagNames\n\t\t\t\t? [...predefinedFilter.predefinedTagNames]\n\t\t\t\t: [],\n\t\t);\n\n\t\tsetSelectedSmartfilterOptions({});\n\t\tsetExistingFilters(null);\n\t}\n\n\tconst metaproperties = metapropertyIds.map((id) => metapropertyMap[id]);\n\n\t// This function is used to set the state of the dropdown\n\t// so we can re-render the content in order to set the ref\n\t// which we need for scrolling. Wihout this, the ref is not\n\t// set and we can't scroll unless we click a metaproperty which\n\t// causes a re-render.\n\tfunction setDropdownState(state: boolean) {\n\t\tsetIsDropdownActive(state);\n\t}\n\n\tconst assetFilterContext = useMemo(\n\t\t() => ({\n\t\t\tassetTypes,\n\t\t\tmetaproperties,\n\t\t\tmetapropertyIds,\n\t\t\ttags,\n\t\t\tisLimited,\n\t\t\taddAssetType,\n\t\t\tremoveAssetType,\n\t\t\taddMetaproperty,\n\t\t\tremoveMetaproperty,\n\t\t\tsetPredefinedMetaproperties,\n\t\t\taddTag,\n\t\t\tremoveTag,\n\t\t\tclear,\n\t\t\tsetDropdownState,\n\t\t\tisDropdownActive,\n\t\t\tselectSmartfilterOption,\n\t\t\tremoveSmartfilterOption,\n\t\t\tselectedSmartfilterOptions,\n\t\t\tsetActiveFiltersState,\n\t\t\texistingFilters,\n\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[assetTypes, metaproperties, tags, isLimited, metapropertyIds, selectedSmartfilterOptions],\n\t);\n\n\treturn (\n\t\t<AssetFilterContext.Provider value={assetFilterContext}>\n\t\t\t{children}\n\t\t</AssetFilterContext.Provider>\n\t);\n}\n\nfunction addToSet<T>(set: T[], value: T) {\n\treturn set.includes(value) ? set : [...set, value];\n}\n\nfunction removeFromSet<T>(set: T[], value: T) {\n\treturn set.filter((prevValue) => prevValue !== value);\n}\n\nexport function keepPredefinedMetapropertiesInMap(\n\tmetapropertyMap: MetapropertyMapType,\n\tpredefinedMetaproperties: string[],\n) {\n\treturn predefinedMetaproperties.reduce((acc, id) => {\n\t\tif (metapropertyMap[id]) {\n\t\t\tacc[id] = metapropertyMap[id];\n\t\t}\n\n\t\treturn acc;\n\t}, {});\n}\n\nexport function useAssetFilter() {\n\tconst context = useContext(AssetFilterContext);\n\n\tif (context === null) {\n\t\tthrow new Error('useAssetFilter must be used with a AssetFilterProvider');\n\t}\n\n\treturn context;\n}\n"],"names":["AssetFilterContext","createContext","AssetFilterProvider","children","hideLimitedUse","predefinedFilter","assetTypes","setAssetTypes","useState","metapropertyIds","setMetapropertyIds","isDropdownActive","setIsDropdownActive","tags","setTags","isLimited","setIsLimited","metapropertyMap","setMetapropertyMap","selectedSmartfilterOptions","setSelectedSmartfilterOptions","existingFilters","setExistingFilters","useEffect","setPredefinedMetaproperties","addAssetType","assetType","prevAssetTypes","addToSet","removeAssetType","removeFromSet","addMetaproperty","metaproperty","prevMetapropertyIds","prevMetaproperties","removeMetaproperty","removed","remaining","acc","key","value","name","id","addTag","tag","prevTags","removeTag","selectSmartfilterOption","metapropertyName","option","isMultifilter","selectedOption","prevOptions","currentSelections","isAlreadySelected","removeSmartfilterOption","optionId","removedOption","remainingOptions","setActiveFiltersState","count","activeMetaproperties","nonEmptyMetaproperties","clear","metaproperties","setDropdownState","state","assetFilterContext","useMemo","set","prevValue","useAssetFilter","context","useContext"],"mappings":"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"}

package/AssetItem.js

@@ -0,0 +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();
+  return /* @__PURE__ */ m(
+    p,
+    {
+      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) })
+      ]
+    }
+  );
+}
+const c = i.div`
+	margin-right: ${n.spacing4};
+	max-width: 40px;
+`, g = i.span`
+	width: 160px;
+	margin-right: ${n.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};
+	text-align: right;
+`;
+export {
+  A as AssetItem
+};
+//# sourceMappingURL=AssetItem.js.map

package/AssetItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetItem.js","sources":["../../src/select/current-selection/AssetItem.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Thumbnail, token } from '@bynder/design-system';\n\nimport { getExtension, getThumbnail } from '../../views/asset/asset-card/utils';\nimport { Asset } from '../../views/asset/asset.type';\nimport { useSelection } from '../SelectionContext';\nimport { SelectedItemContainer } from './SelectedItemContainer';\n\nexport function AssetItem({ asset }: { asset: Asset }) {\n\tconst selectionState = useSelection();\n\n\treturn (\n\t\t<SelectedItemContainer\n\t\t\ttitle={asset.name}\n\t\t\tonRemove={() => selectionState.toggleAssets([asset])}\n\t\t>\n\t\t\t<AssetThumbnailWrapper>\n\t\t\t\t<Thumbnail variant=\"preview\" imageUrl={getThumbnail(asset)} size=\"m\" />\n\t\t\t</AssetThumbnailWrapper>\n\n\t\t\t<AssetName>{asset.name}</AssetName>\n\n\t\t\t{getExtension(asset) && <AssetExtensionName>{getExtension(asset)}</AssetExtensionName>}\n\t\t</SelectedItemContainer>\n\t);\n}\n\nconst AssetThumbnailWrapper = styled.div`\n\tmargin-right: ${token.spacing4};\n\tmax-width: 40px;\n`;\n\nconst AssetName = styled.span`\n\twidth: 160px;\n\tmargin-right: ${token.spacing3};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nconst AssetExtensionName = styled.span`\n\tflex-grow: 1;\n\tcolor: rgba(0, 34, 51, 0.5);\n\tfont-size: ${token.fontSize75};\n\ttext-align: right;\n`;\n"],"names":["AssetItem","asset","selectionState","useSelection","jsxs","SelectedItemContainer","jsx","AssetThumbnailWrapper","Thumbnail","getThumbnail","AssetName","getExtension","AssetExtensionName","styled","token"],"mappings":";;;;;;AASO,SAASA,EAAU,EAAE,OAAAC,KAA2B;AACtD,QAAMC,IAAiBC,EAAA;AAEvB,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOJ,EAAM;AAAA,MACb,UAAU,MAAMC,EAAe,aAAa,CAACD,CAAK,CAAC;AAAA,MAEnD,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EACA,UAAA,gBAAAD,EAACE,GAAA,EAAU,SAAQ,WAAU,UAAUC,EAAaR,CAAK,GAAG,MAAK,IAAA,CAAI,GACtE;AAAA,QAEA,gBAAAK,EAACI,GAAA,EAAW,UAAAT,EAAM,KAAA,CAAK;AAAA,QAEtBU,EAAaV,CAAK,uBAAMW,GAAA,EAAoB,UAAAD,EAAaV,CAAK,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;AAEA,MAAMM,IAAwBM,EAAO;AAAA,iBACpBC,EAAM,QAAQ;AAAA;AAAA,GAIzBJ,IAAYG,EAAO;AAAA;AAAA,iBAERC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,GAMzBF,IAAqBC,EAAO;AAAA;AAAA;AAAA,cAGpBC,EAAM,UAAU;AAAA;AAAA;"}

package/AssetList.js

@@ -0,0 +1,158 @@
+import { jsxs as I, jsx as s, Fragment as G } from "react/jsx-runtime";
+import { useRef as w, useState as P, useEffect as J } from "react";
+import { styled as Q } from "styled-components";
+import { AssetCard as U } from "./AssetCard.js";
+import { CardSkeleton as V } from "./CardSkeleton.js";
+import { DragSelect as X } from "./DragSelect.js";
+import { useDimensions as Y } from "./useDimensions.js";
+import { InfiniteScroll as Z } from "./InfiniteScroll.js";
+import { useSelection as $ } from "./SelectionContext.js";
+import { useSimilaritySearchStore as T } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as ee } from "./getSimilarityAssets.js";
+function he({
+  assets: e,
+  count: l,
+  hasNextPage: m = !1,
+  isLoading: h = !1,
+  loadMore: c = () => {
+  },
+  onSelect: o = () => {
+  },
+  onToggle: d = () => {
+  },
+  emptyStateElement: g = null,
+  selectedAssetIds: a = [],
+  selectionMode: u = "MultiSelect",
+  theme: S,
+  children: k = null
+}) {
+  const x = w(null), { dimensions: B } = Y(x.current), [f, v] = P([]), [M, D] = P("inactive"), { clear: R } = $(), {
+    setIsEnabled: b,
+    isEnabled: H,
+    setIsSelected: W
+  } = T(), { resetData: j, search: y } = ee(), [C, E] = ie(l, B), A = w(!1);
+  J(() => {
+    !A.current && e.value && e.value.length > 0 && (A.current = !0, (async () => {
+      if (e.value && e.value.length > 0) {
+        const t = e.value.find((n) => n.__typename === "Image") || e.value[0], r = await y([t.databaseId]);
+        b(r || !1);
+      }
+    })());
+  }, [e.value, y, b]);
+  const z = (i) => {
+    j(), W(!0), R(), y(i);
+  };
+  function _(i) {
+    if (!(e.tag === "Loading" && !e.value))
+      return e.value?.find((t) => i === t.id);
+  }
+  function F(i) {
+    v((t) => [...t, ...i]);
+  }
+  function K(i) {
+    v(
+      (t) => t.filter((r) => !i.includes(r))
+    );
+  }
+  function N(i) {
+    D(i);
+  }
+  function O(i) {
+    if (D("inactive"), f.length) {
+      const t = [];
+      f.forEach((r) => {
+        const n = _(r);
+        n && t.push(n);
+      }), i === "inverse" ? d(t) : o(t), v([]);
+    }
+  }
+  function L(i) {
+    return M === "inverse" && a.includes(i.id) && f.includes(i.id) ? !1 : a.includes(i.id) || f.includes(i.id);
+  }
+  function q(i, t) {
+    if (t.shiftKey && u === "MultiSelect" && e.value?.length) {
+      const r = e.value.findIndex((p) => p.id === i.id);
+      let n = e.value?.findIndex(
+        (p) => p.id === a[a.length - 1]
+      );
+      n === -1 && (n = 0), n < r ? o(e.value?.slice(n, r + 1)) : o(e.value.slice(r, n + 1));
+    } else
+      d([i]);
+  }
+  return /* @__PURE__ */ I(
+    te,
+    {
+      ref: x,
+      "data-drag-select-container": !0,
+      "data-testid": "asset-list-container",
+      children: [
+        k,
+        /* @__PURE__ */ I("div", { className: "card-list", role: "listbox", children: [
+          e.tag === "Loading" && !e.value && /* @__PURE__ */ s(V, { rows: C, columns: E }),
+          e.tag === "Loaded" && e.value.length === 0 && g,
+          (e.tag === "Loading" && e.value || e.tag === "Loaded") && /* @__PURE__ */ I(G, { children: [
+            u === "MultiSelect" && /* @__PURE__ */ s(
+              X,
+              {
+                dragContainer: "[data-drag-select-container]",
+                selectionBoxCustomAttr: {
+                  style: {
+                    zIndex: 1e6,
+                    borderColor: S?.colorPrimary,
+                    borderWidth: "2px",
+                    borderRadius: "5px",
+                    color: "rgba(0, 34, 51, 0.8)"
+                  }
+                },
+                onSelect: F,
+                onDeselect: K,
+                onDragStart: N,
+                onDragEnd: O
+              }
+            ),
+            /* @__PURE__ */ s(
+              Z,
+              {
+                hasNextPage: m,
+                isLoading: h,
+                loadMore: c,
+                children: e.value?.map((i, t) => /* @__PURE__ */ s(
+                  U,
+                  {
+                    isSilimilaritySearchEnabled: H,
+                    isSelected: L(i),
+                    isOutlined: L(i),
+                    asset: i,
+                    fadeIn: t >= C * E,
+                    onClick: (r, n) => q(r, n),
+                    onSimilaritySearch: z
+                  },
+                  i.id
+                ))
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ie(e, l) {
+  if (e !== void 0)
+    return [1, e];
+  if (!l)
+    return [0, 0];
+  const m = 192, h = 172, c = 8, o = 8, d = m + 2 * c, g = h + 2 * c, a = 2 * o, u = Math.ceil(l.height / g), S = Math.round((l.width - a) / d);
+  return [u, S];
+}
+const te = Q.div`
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
+`;
+export {
+  he as AssetList,
+  ie as calculateAssetsInDimensions
+};
+//# sourceMappingURL=AssetList.js.map