@bynder/compact-view 5.1.3 → 5.2.0

package/AssetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.js","sources":["../../src/views/asset/asset-card/AssetCard.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Badge, Card, token, TruncatedText } from '@bynder/design-system';\nimport { useConfig } from '../../../app-config/ConfigContext';\nimport { Asset, TextMetapropertiesType } from '../asset.type';\nimport { getExtension, getStatusText, getThumbnail } from './utils';\nimport { MetapropertyType } from '../../../filter/filters/metaproperty/MetapropertyFilterContent';\nimport { __ } from '../../../localization';\nimport { Theme } from '../../../style/Theming';\nimport { ContextAction } from './ContextAction';\nimport { AssetCardMetaproperties } from './AssetCardMetaproperties';\nimport { useDat } from '@src/store/useDatStore';\n\ninterface Props {\n\tclassName?: string;\n\tfadeIn?: boolean;\n\tasset: Asset;\n\tisSelected: boolean;\n\tonClick?: (asset: Asset, event: React.MouseEvent) => void;\n\tisOutlined: boolean;\n\tchildren?: React.ReactNode;\n\tisSilimilaritySearchEnabled: boolean;\n\tonSimilaritySearch: (selectedAsset: string[]) => void;\n}\n\nexport function AssetCard({\n\tclassName,\n\tfadeIn = true,\n\tasset,\n\tisSelected,\n\tisOutlined,\n\tonClick,\n\tchildren = null,\n\tisSilimilaritySearchEnabled = false,\n\tonSimilaritySearch,\n}: Props) {\n\tconst [metapropertiesToDisplay, setMetapropertiesToDisplay] = useState<MetapropertyType[]>();\n\tconst [textMetapropertiesToDisplay, setTextMetapropertiesToDisplay] =\n\t\tuseState<TextMetapropertiesType[]>();\n\tconst { openDat, setTransformation } = useDat();\n\n\tconst { theme } = useConfig();\n\n\tconst statusText = getStatusText(asset);\n\tconst extension = getExtension(asset);\n\n\tuseEffect(() => {\n\t\tconst filteredMetaProps = asset.metaproperties?.nodes.filter(\n\t\t\t(prop) => prop.showInGridView || prop.showInListView,\n\t\t);\n\t\tsetMetapropertiesToDisplay(filteredMetaProps);\n\t}, [asset.metaproperties]);\n\n\tuseEffect(() => {\n\t\tconst filteredTextMetaProps = asset.textMetaproperties?.filter(\n\t\t\t(prop) => prop.showInGridView || prop.showInListView,\n\t\t);\n\t\tsetTextMetapropertiesToDisplay(filteredTextMetaProps);\n\t}, [asset.textMetaproperties]);\n\n\tconst handleClick = (e: React.MouseEvent) => {\n\t\tif (onClick !== undefined) {\n\t\t\te.stopPropagation();\n\t\t\tsetTransformation();\n\t\t\tonClick(asset, e);\n\t\t}\n\t};\n\n\tconst handleSimilaritySearchClick = (event: React.MouseEvent) => {\n\t\tevent.stopPropagation();\n\t\tonSimilaritySearch([asset.databaseId ? asset.databaseId : asset.id]);\n\t};\n\n\treturn (\n\t\t<Container\n\t\t\tid={asset.id}\n\t\t\t$theme={theme}\n\t\t\t$isOutlined={(isSelected || isOutlined) && theme?.colorPrimary !== undefined}\n\t\t\t$fadeIn={fadeIn}\n\t\t\tclassName={className}\n\t\t\tdata-drag-select-id={asset.id}\n\t\t>\n\t\t\t<Card\n\t\t\t\tcontextAction={\n\t\t\t\t\t<ContextAction\n\t\t\t\t\t\ttransformBaseUrl={asset.files?.transformBaseUrl?.url}\n\t\t\t\t\t\tportalUrl={asset.url}\n\t\t\t\t\t\tonOpenDAT={() => {\n\t\t\t\t\t\t\topenDat(asset.files?.transformBaseUrl?.url, asset, asset.name);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tselectButtonAriaLabel={isSelected ? __('Deselect') : __('Select')}\n\t\t\t\tonSelect={handleClick}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\tdata-testid=\"asset-card\"\n\t\t\t>\n\t\t\t\t{/* Image */}\n\t\t\t\t<Card.Frame\n\t\t\t\t\ticon={\n\t\t\t\t\t\tstatusText ? (\n\t\t\t\t\t\t\t<TruncatedBadgeWrapper $limitWidth={!!extension}>\n\t\t\t\t\t\t\t\t<Badge color=\"black-alpha\" data-testid=\"asset-tag\">\n\t\t\t\t\t\t\t\t\t<TruncatedText>{statusText}</TruncatedText>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</TruncatedBadgeWrapper>\n\t\t\t\t\t\t) : undefined\n\t\t\t\t\t}\n\t\t\t\t\tdata-testid=\"asset-type\"\n\t\t\t\t\tbadge={extension}\n\t\t\t\t>\n\t\t\t\t\t<Card.Images>\n\t\t\t\t\t\t{getThumbnail(asset) && (\n\t\t\t\t\t\t\t<Card.Img\n\t\t\t\t\t\t\t\tsrc={getThumbnail(asset)}\n\t\t\t\t\t\t\t\talt={asset.name}\n\t\t\t\t\t\t\t\tcontentResize=\"fit\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Card.Images>\n\t\t\t\t\t{isSilimilaritySearchEnabled && asset.__typename === 'Image' && (\n\t\t\t\t\t\t<SimilarityButtonWrapper\n\t\t\t\t\t\t\tonClick={handleSimilaritySearchClick}\n\t\t\t\t\t\t\tdata-testid=\"similarity-search-indicator\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"similarity-search-button\"\n\t\t\t\t\t\t\tclassName=\"showSimilarButton\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Badge isSmall>{__('Show similar')}</Badge>\n\t\t\t\t\t\t</SimilarityButtonWrapper>\n\t\t\t\t\t)}\n\t\t\t\t</Card.Frame>\n\t\t\t\t{children}\n\t\t\t\t{/* Name */}\n\t\t\t\t{/* In case of problems with shadow dom and design-system tooltip,\n\t\t\t\t behavior was changed to simulate old BynderDAM expanding card*/}\n\t\t\t\t<AssestName data-testid=\"asset-name\">{asset.name}</AssestName>\n\t\t\t\t{/* Metaproperties */}\n\t\t\t\t<AssetCardMetaproperties\n\t\t\t\t\tmetaproperties={metapropertiesToDisplay}\n\t\t\t\t\ttextMetaproperties={textMetapropertiesToDisplay}\n\t\t\t\t/>\n\t\t\t</Card>\n\t\t</Container>\n\t);\n}\n\ninterface ContainerProps {\n\t$theme?: Theme;\n\t$isOutlined: boolean;\n\t$fadeIn: boolean;\n}\n\nconst Container = styled.div<ContainerProps>`\n\tmargin: ${token.spacing3};\n\twidth: 224px;\n\talign-self: flex-start;\n\tposition: relative;\n\t${(p) => (p.$fadeIn ? `animation: var(--fade-in-down);` : '')}\n\n\t--userComponentCardSelectedColor: ${({ $theme }: ContainerProps) => $theme?.colorButtonPrimary};\n\t--userComponentCardSelectedColorHover: ${({ $theme }: ContainerProps) =>\n\t\t$theme?.colorButtonPrimaryHover};\n\t--userComponentCardSelectedColorActive: ${({ $theme }: ContainerProps) =>\n\t\t$theme?.colorButtonPrimaryActive};\n\n\t.showSimilarButton {\n\t\tdisplay: none;\n\t}\n\n\t&:hover .showSimilarButton {\n\t\tdisplay: block;\n\t}\n`;\n\nconst TruncatedBadgeWrapper = styled.div<{ $limitWidth: boolean }>`\n\t${(p) => p.$limitWidth && 'max-width: 142px;'}\n\tmargin-top: ${token.spacing2};\n`;\n\nconst AssestName = styled.p`\n\twidth: auto;\n\tmax-width: 100%;\n\theight: auto;\n\tline-height: 20px;\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tpadding: 0 ${token.spacing5};\n\tmargin: ${token.spacing3} 0;\n\ttransition: all 200ms ease;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tbox-sizing: content-box;\n\n\t&:hover {\n\t\tmax-height: 80px;\n\t\tword-break: break-all;\n\t\twhite-space: normal;\n\t}\n`;\n\nconst SimilarityButtonWrapper = styled.button`\n\tbackground: none;\n\tborder: none;\n\tpadding: 0;\n\tmargin: 0;\n\tfont: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n\toutline: none;\n\ttext-align: inherit;\n\n\tposition: absolute;\n\tbottom: ${token.spacing4};\n\tleft: ${token.spacing4};\n\tz-index: 1;\n`;\n"],"names":["AssetCard","className","fadeIn","asset","isSelected","isOutlined","onClick","children","isSilimilaritySearchEnabled","onSimilaritySearch","metapropertiesToDisplay","setMetapropertiesToDisplay","useState","textMetapropertiesToDisplay","setTextMetapropertiesToDisplay","openDat","setTransformation","useDat","theme","useConfig","statusText","getStatusText","extension","getExtension","useEffect","filteredMetaProps","prop","filteredTextMetaProps","handleClick","e","handleSimilaritySearchClick","event","jsx","Container","jsxs","Card","ContextAction","__","TruncatedBadgeWrapper","Badge","TruncatedText","getThumbnail","SimilarityButtonWrapper","AssestName","AssetCardMetaproperties","styled","token","p","$theme"],"mappings":"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"}

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,138 @@
+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 { 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 { 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() {
+  const s = R(), t = H.use.page(), { value: i } = ee("assets"), {
+    assetTypes: l,
+    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), {
+    isSelected: z,
+    isNLSSelected: D,
+    NLSSearchText: G
+  } = te(), [M, y] = u(!1), { data: n, isLoading: v } = W(
+    {
+      filter: s,
+      searchTerm: i || null,
+      allAssetTypes: l,
+      language: g,
+      predefinedFilter: x,
+      collectionId: t.page === "collection" ? t.collection.id : null
+    },
+    S
+  ), { data: r } = q(S);
+  if (C(() => (t.page !== h && (P(t.page), s.clear()), () => {
+    s.clear();
+  }), [h, t.page]), C(() => {
+    let o = !1;
+    return (async () => {
+      y(!0);
+      try {
+        const d = await Z({
+          auth: N,
+          filter: {
+            searchTerm: i,
+            assetTypes: l,
+            collectionId: t.page === "collection" ? t.collection.id : void 0,
+            tagNames: s.tags,
+            isLimitedUse: s.isLimited,
+            metaproperties: s.selectedSmartfilterOptions
+          }
+        });
+        o || s.setActiveFiltersState(d);
+      } catch (d) {
+        o || console.error("Error fetching asset counts:", d);
+      } finally {
+        o || y(!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)
+    return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(se, {}) });
+  const { tags: a, count: O } = n.value.searchAssets, { value: c } = r, $ = j ? /* @__PURE__ */ e(
+    L,
+    {
+      onClick: () => {
+        I(), A(!1);
+      },
+      icon: /* @__PURE__ */ e(B, {}),
+      title: "",
+      variant: "secondary",
+      "data-testid": "deselect-all"
+    }
+  ) : /* @__PURE__ */ e(
+    L,
+    {
+      onClick: () => {
+        b(), A(!0);
+      },
+      icon: /* @__PURE__ */ e(E, {}),
+      title: "",
+      variant: "secondary",
+      "data-testid": "select-all"
+    }
+  );
+  return z || D && G ? null : /* @__PURE__ */ m(k, { "data-testid": "filter-nav", children: [
+    /* @__PURE__ */ m(J, { 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 })
+    ] }),
+    /* @__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 })
+  ] });
+}
+const k = p.nav`
+	display: flex;
+	justify-content: space-between;
+	background-color: #fff;
+	padding: ${F.spacing3} ${F.spacing4};
+	z-index: 20;
+`, re = p.div`
+	display: flex;
+	align-items: center;
+
+	button {
+		height: initial;
+		background-color: transparent;
+		border: none;
+		padding: 0;
+	}
+`, oe = p.div`
+	display: inline-flex;
+	align-items: center;
+`;
+export {
+  Te 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 { useGetFilters as useNewFilters } from '../api/getFilters_new';\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 { getAssetCounts } from '../api/rest/getAssetCounts';\nimport { Smartfilter as SmartfilterComponentNew } from './filters/smartfilters/Smartfilters_new';\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 [isAssetCountsLoading, setIsAssetCountsLoading] = useState(false);\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\n\tconst { data: newData } = useNewFilters(noCache);\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 (\n\t\tdata.tag === 'Failure' ||\n\t\t!data.value ||\n\t\tnewData.tag === 'Failure' ||\n\t\tnewData.tag === 'Loading' ||\n\t\t!newData.value ||\n\t\tisAssetCountsLoading\n\t) {\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\tconst { value: filterData } = newData;\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{filterData && filterData.filters.length > 0 && (\n\t\t\t\t\t<SmartfilterComponentNew filterData={filterData} />\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","isAssetCountsLoading","setIsAssetCountsLoading","data","isLoading","useGetFilters","newData","useNewFilters","useEffect","isCancelled","response","getAssetCounts","error","jsx","NavParent","SkeletonFilters","tags","count","filterData","selectAllHandler","Button","IconMultiSelect","IconRectangle","jsxs","HorizontalScroll","SmartfilterComponentNew","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';\nimport { MetapropertyOption as MetapropertyOptionType } from '@src/api/types/getFilters_new';\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: MetapropertyOptionType | 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