@bynder/compact-view 5.1.3 → 5.2.0

package/SmartFilterContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartFilterContent.js","sources":["../../src/filter/filters/metaproperty/SmartFilterContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\n\nimport { MetaPropertyFilterContent, MetapropertyType } from './MetapropertyFilterContent';\nimport { MetapropertyOptionType } from './MetapropertyOption';\n\nexport interface SmartfilterType {\n\t__typename: 'Smartfilter';\n\tid: string;\n\tlabel: string;\n\tmetaproperties: MetapropertyType[];\n\ticon?: string;\n\tzIndex: number;\n}\n\ninterface SmartfilterProps {\n\tsmartfilter: SmartfilterType;\n\tselectedOptionIds: string[];\n\tisLoading: boolean;\n\tonAddOption: (metapropertyOption: MetapropertyOptionType) => void;\n\tonRemoveOption: (metapropertyOption: MetapropertyOptionType) => void;\n}\n\nexport function SmartFilterContent(props: SmartfilterProps) {\n\treturn (\n\t\t<Container>\n\t\t\t{props.smartfilter.metaproperties.map((metaproperty) => (\n\t\t\t\t<MetaPropertyFilterContent\n\t\t\t\t\tkey={metaproperty.id}\n\t\t\t\t\tmetaproperty={metaproperty}\n\t\t\t\t\tselectedOptionIds={props.selectedOptionIds}\n\t\t\t\t\tisLoading={props.isLoading}\n\t\t\t\t\tonAddOption={props.onAddOption}\n\t\t\t\t\tonRemoveOption={props.onRemoveOption}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n}\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: ${token.spacing4};\n\toverflow: auto;\n`;\n"],"names":["styled","token"],"mappings":";;;;AAyCkBA,EAAO;AAAA;AAAA;AAAA,QAGjBC,EAAM,QAAQ;AAAA;AAAA;"}

package/SmartFilterSelect_new.js

@@ -0,0 +1,86 @@
+import { jsxs as O, jsx as o } from "react/jsx-runtime";
+import { useState as a } from "react";
+import n from "styled-components";
+import { token as i } from "@bynder/design-system";
+import { useGetFilterOptions as F } from "./getFilterOptions.js";
+import { InfiniteScroll as S } from "./InfiniteScroll.js";
+import { OptionComponent as v } from "./Option_new.js";
+const G = ({
+  metaproperty: t,
+  smartfilterId: d,
+  onOptionSelect: c,
+  selectedOptions: m,
+  filteredMetaproperty: r,
+  metapropertyCursor: p
+}) => {
+  const [x, h] = a(t.options), [s, l] = a(p), { isLoading: f, fetchFilterOptions: u } = F({
+    smartfilterId: d,
+    metapropertyId: t.id
+  }), g = async () => {
+    const e = await u(s || "");
+    if (!e) {
+      l(void 0);
+      return;
+    }
+    const w = e.filterOptions.metadata.nextCursorMark;
+    l(w);
+    const b = e.filterOptions.metaproperty.options;
+    h((C) => [...C, ...b]);
+  };
+  return /* @__PURE__ */ O(M, { "data-testid": "metaproperty-filter-content", children: [
+    /* @__PURE__ */ o(
+      $,
+      {
+        "data-testid": "metaproperty-title",
+        title: t.label || t.name,
+        children: t.label || t.name
+      }
+    ),
+    /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
+      S,
+      {
+        isLoading: f,
+        hasNextPage: !!s,
+        loadMore: g,
+        children: x.map((e) => r[e?.name] ? /* @__PURE__ */ o(
+          v,
+          {
+            option: e,
+            onClick: c,
+            metapropertyName: t.name,
+            isSelected: !!m[t.name]?.[e.id],
+            metapropertyMultifilter: !!t.isMultifilter,
+            count: r[e.name],
+            showCount: t.showCounter
+          },
+          e.id
+        ) : null)
+      }
+    ) })
+  ] });
+}, M = n.div`
+	color: ${i.colorText};
+	width: 282px;
+`, $ = n.h3`
+	padding: ${i.spacing5};
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: ${i.fontSize100};
+	line-height: ${i.lineHeightText};
+	border-bottom: 1px solid rgba(3, 16, 38, 0.1);
+	box-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);
+`, k = n.ul`
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0;
+	width: 100%;
+	list-style: none;
+	margin: 0;
+	scrollbar-width: none;
+`;
+export {
+  G as SmartFilterSelect
+};
+//# sourceMappingURL=SmartFilterSelect_new.js.map

package/SmartFilterSelect_new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartFilterSelect_new.js","sources":["../../src/filter/filters/smartfilters/Metaproperties/SmartFilterSelect_new.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\n\nimport { Metaproperty, MetapropertyOption } from '@src/api/types/getFilters_new';\nimport { useGetFilterOptions } from '@src/api/getFilterOptions';\nimport { SmartfilterSelectedOptionType } from '@src/api/rest/types';\nimport { InfiniteScroll } from '@src/common/components/InfiniteScroll';\nimport { OptionComponent } from './Option_new';\n\ntype Props = {\n\tmetaproperty: Metaproperty;\n\tsmartfilterId: string;\n\tonOptionSelect: (\n\t\tmetapropertyName: string,\n\t\toption: MetapropertyOption,\n\t\tisMultifilter: boolean,\n\t) => void;\n\tselectedOptions: Record<string, Record<string, SmartfilterSelectedOptionType>>;\n\tfilteredMetaproperty: Record<string, number>;\n\tmetapropertyCursor?: string;\n};\n\nconst SmartFilterSelect = ({\n\tmetaproperty,\n\tsmartfilterId,\n\tonOptionSelect,\n\tselectedOptions,\n\tfilteredMetaproperty,\n\tmetapropertyCursor,\n}: Props) => {\n\tconst [options, setOptions] = useState(metaproperty.options);\n\tconst [cursor, setCursor] = useState<string | undefined>(metapropertyCursor);\n\n\tconst { isLoading, fetchFilterOptions } = useGetFilterOptions({\n\t\tsmartfilterId,\n\t\tmetapropertyId: metaproperty.id,\n\t});\n\n\tconst handleLoadMore = async () => {\n\t\tconst response = await fetchFilterOptions(cursor || '');\n\n\t\tif (!response) {\n\t\t\tsetCursor(undefined);\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextCursor = response.filterOptions.metadata.nextCursorMark;\n\t\tsetCursor(nextCursor);\n\n\t\tconst newOptions = response.filterOptions.metaproperty.options;\n\t\tsetOptions((prevOptions) => [...prevOptions, ...newOptions]);\n\t};\n\n\treturn (\n\t\t<FilterContent data-testid=\"metaproperty-filter-content\">\n\t\t\t<FilterHead\n\t\t\t\tdata-testid=\"metaproperty-title\"\n\t\t\t\ttitle={metaproperty.label || metaproperty.name}\n\t\t\t>\n\t\t\t\t{metaproperty.label || metaproperty.name}\n\t\t\t</FilterHead>\n\t\t\t<FilterList>\n\t\t\t\t<InfiniteScroll\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\thasNextPage={!!cursor}\n\t\t\t\t\tloadMore={handleLoadMore}\n\t\t\t\t>\n\t\t\t\t\t{options.map((option) => {\n\t\t\t\t\t\tif (!filteredMetaproperty[option?.name]) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<OptionComponent\n\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tonClick={onOptionSelect}\n\t\t\t\t\t\t\t\tmetapropertyName={metaproperty.name}\n\t\t\t\t\t\t\t\tisSelected={!!selectedOptions[metaproperty.name]?.[option.id]}\n\t\t\t\t\t\t\t\tmetapropertyMultifilter={!!metaproperty.isMultifilter}\n\t\t\t\t\t\t\t\tcount={filteredMetaproperty[option.name]}\n\t\t\t\t\t\t\t\tshowCount={metaproperty.showCounter}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</InfiniteScroll>\n\t\t\t</FilterList>\n\t\t</FilterContent>\n\t);\n};\n\nexport { SmartFilterSelect };\n\nconst FilterContent = styled.div`\n\tcolor: ${token.colorText};\n\twidth: 282px;\n`;\n\nconst FilterHead = styled.h3`\n\tpadding: ${token.spacing5};\n\tmargin: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tfont-size: ${token.fontSize100};\n\tline-height: ${token.lineHeightText};\n\tborder-bottom: 1px solid rgba(3, 16, 38, 0.1);\n\tbox-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);\n`;\n\nconst FilterList = styled.ul`\n\tmax-height: 400px;\n\toverflow-y: auto;\n\tpadding: 0;\n\twidth: 100%;\n\tlist-style: none;\n\tmargin: 0;\n\tscrollbar-width: none;\n`;\n"],"names":["SmartFilterSelect","metaproperty","smartfilterId","onOptionSelect","selectedOptions","filteredMetaproperty","metapropertyCursor","options","setOptions","useState","cursor","setCursor","isLoading","fetchFilterOptions","useGetFilterOptions","handleLoadMore","response","nextCursor","newOptions","prevOptions","jsxs","FilterContent","jsx","FilterHead","FilterList","InfiniteScroll","option","OptionComponent","styled","token"],"mappings":";;;;;;;AAuBA,MAAMA,IAAoB,CAAC;AAAA,EAC1B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,oBAAAC;AACD,MAAa;AACZ,QAAM,CAACC,GAASC,CAAU,IAAIC,EAASR,EAAa,OAAO,GACrD,CAACS,GAAQC,CAAS,IAAIF,EAA6BH,CAAkB,GAErE,EAAE,WAAAM,GAAW,oBAAAC,EAAA,IAAuBC,EAAoB;AAAA,IAC7D,eAAAZ;AAAA,IACA,gBAAgBD,EAAa;AAAA,EAAA,CAC7B,GAEKc,IAAiB,YAAY;AAClC,UAAMC,IAAW,MAAMH,EAAmBH,KAAU,EAAE;AAEtD,QAAI,CAACM,GAAU;AACd,MAAAL,EAAU,MAAS;AAEnB;AAAA,IACD;AAEA,UAAMM,IAAaD,EAAS,cAAc,SAAS;AACnD,IAAAL,EAAUM,CAAU;AAEpB,UAAMC,IAAaF,EAAS,cAAc,aAAa;AACvD,IAAAR,EAAW,CAACW,MAAgB,CAAC,GAAGA,GAAa,GAAGD,CAAU,CAAC;AAAA,EAC5D;AAEA,SACC,gBAAAE,EAACC,GAAA,EAAc,eAAY,+BAC1B,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAOtB,EAAa,SAASA,EAAa;AAAA,QAEzC,UAAAA,EAAa,SAASA,EAAa;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEpCuB,GAAA,EACA,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAAb;AAAA,QACA,aAAa,CAAC,CAACF;AAAA,QACf,UAAUK;AAAA,QAET,UAAAR,EAAQ,IAAI,CAACmB,MACRrB,EAAqBqB,GAAQ,IAAI,IAKrC,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YAEA,QAAAD;AAAA,YACA,SAASvB;AAAA,YACT,kBAAkBF,EAAa;AAAA,YAC/B,YAAY,CAAC,CAACG,EAAgBH,EAAa,IAAI,IAAIyB,EAAO,EAAE;AAAA,YAC5D,yBAAyB,CAAC,CAACzB,EAAa;AAAA,YACxC,OAAOI,EAAqBqB,EAAO,IAAI;AAAA,YACvC,WAAWzB,EAAa;AAAA,UAAA;AAAA,UAPnByB,EAAO;AAAA,QAAA,IALN,IAeR;AAAA,MAAA;AAAA,IAAA,EACF,CACD;AAAA,EAAA,GACD;AAEF,GAIML,IAAgBO,EAAO;AAAA,UACnBC,EAAM,SAAS;AAAA;AAAA,GAInBN,IAAaK,EAAO;AAAA,YACdC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,cAKZA,EAAM,WAAW;AAAA,gBACfA,EAAM,cAAc;AAAA;AAAA;AAAA,GAK9BL,IAAaI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/Smartfilters_new.js

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

package/Smartfilters_new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Smartfilters_new.js","sources":["../../src/filter/filters/smartfilters/Smartfilters_new.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Box, Button, Flex, token } from '@bynder/design-system';\nimport { IconArrowLeft, IconArrowRight } from '@bynder/icons';\nimport { FilterData, MetapropertyOption } from '@src/api/types/getFilters_new';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useAssetFilter } from '../../AssetFilterContext';\nimport { Dropdown } from '@src/common/components/dropdown/Dropdown';\nimport { Autocomplete } from './Metaproperties/Autocomplete_new';\nimport { SmartFilterSelect } from './Metaproperties/SmartFilterSelect_new';\nimport { getAutocompleteOptions, AutocompleteOptions } from '@src/api/rest/autocomplete';\nimport { useAuth } from '@src/login/LoginContext';\nimport { debounceAsync } from '@src/utils/asyncDebounce';\nimport { AutocompleteOption } from '@src/api/rest/types';\n\ntype Props = {\n\tfilterData: FilterData;\n};\n\nconst Smartfilter = ({ filterData }: Props) => {\n\tconst assetFilterState = useAssetFilter();\n\tconst auth = useAuth();\n\tconst { language } = useConfig();\n\n\tconst sortedFilters = sortFilters(filterData);\n\n\tconst [inputValue, setInputValue] = useState<{ [key: string]: string }>({});\n\tconst [autocompleteOptions, setAutocompleteOptions] = useState<\n\t\tAutocompleteOptions | undefined\n\t>();\n\tconst [isLoading, setIsLoading] = useState<{ [key: string]: boolean }>({});\n\n\tconst [scroll, setScroll] = useState(0);\n\tconst [maxScroll, setMaxScroll] = useState(0);\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst nodeRef = useRef<HTMLDivElement>(null);\n\tconst hasMoved = useRef(false);\n\tconst initialX = useRef<number | null>(null);\n\tconst initialScrollPos = useRef<number | null>(null);\n\n\t// useRef to track inputs so we can debounce them individually\n\tconst debouncedFunctions = useRef<{\n\t\t[key: string]: (search: string, id: string) => Promise<void>;\n\t}>({});\n\n\tuseEffect(() => {\n\t\tif (nodeRef.current) {\n\t\t\tsetMaxScroll(nodeRef.current.scrollWidth - nodeRef.current.clientWidth);\n\t\t}\n\n\t\tif (!assetFilterState.isDropdownActive) {\n\t\t\tsetInputValue({});\n\t\t\tsetAutocompleteOptions({});\n\t\t}\n\t}, [filterData, nodeRef, assetFilterState]);\n\n\tconst isLeftArrowDisabled = scroll === 0;\n\tconst isRightArrowDisabled = maxScroll > 5 && scroll !== maxScroll;\n\n\tfunction handleLeftScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst leftScroll = Math.max(prevScroll - 250, 0);\n\n\t\t\treturn leftScroll >= 100 ? leftScroll : 0;\n\t\t});\n\t}\n\n\tfunction handleRightScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst rightScroll = Math.min(prevScroll + 250, maxScroll);\n\n\t\t\treturn rightScroll <= maxScroll - 100 ? rightScroll : maxScroll;\n\t\t});\n\t}\n\n\tconst handleApi = async (search: string, id: string) => {\n\t\tlet callAutocomplete;\n\t\t// set the loading state for the specific search as we can have more than 1\n\t\tsetIsLoading((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: true,\n\t\t}));\n\n\t\t// api searches of 1 character break the api returning a 500\n\t\tif (search.length >= 2) {\n\t\t\tcallAutocomplete = await getAutocompleteOptions({\n\t\t\t\tmetapropertyId: id,\n\t\t\t\tauth,\n\t\t\t\tsearchTerm: search,\n\t\t\t});\n\t\t}\n\n\t\tsetAutocompleteOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: callAutocomplete ? callAutocomplete : null,\n\t\t}));\n\n\t\tsetIsLoading((prev) => ({\n\t\t\t...prev,\n\t\t\t[id]: false,\n\t\t}));\n\t};\n\n\tconst getDebouncedFunction = (id: string) => {\n\t\t// Create a debounced function for the specific input if it doesn't exist\n\t\tif (!debouncedFunctions.current[id]) {\n\t\t\tdebouncedFunctions.current[id] = debounceAsync(handleApi, 500) as (\n\t\t\t\tsearch: string,\n\t\t\t\tid: string,\n\t\t\t) => Promise<void>;\n\t\t}\n\n\t\treturn debouncedFunctions.current[id];\n\t};\n\n\tconst handleSmartfilterOptionSelections = (\n\t\tmetapropertyName: string,\n\t\toption: AutocompleteOption | MetapropertyOption,\n\t\tisMultifilter: boolean,\n\t) => {\n\t\tassetFilterState.selectSmartfilterOption(metapropertyName, option, isMultifilter);\n\t};\n\n\tconst handleAutocompleteInputChange = (metapropertyId: string, value: string) => {\n\t\tsetInputValue((prev) => ({\n\t\t\t...prev,\n\t\t\t[metapropertyId]: value,\n\t\t}));\n\t\tconst debouncedHandleApi = getDebouncedFunction(metapropertyId);\n\t\tdebouncedHandleApi(value, metapropertyId);\n\t};\n\n\tconst handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\t// Save the initial position for movement detection\n\t\tinitialX.current = event.clientX;\n\t\thasMoved.current = false;\n\t\tsetIsDragging(true);\n\t};\n\n\tconst handleMouseUp = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (hasMoved.current) {\n\t\t\tevent.preventDefault();\n\t\t\tconst preventClickPropagation = (e: MouseEvent) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tdocument.removeEventListener('click', preventClickPropagation, true);\n\t\t\t};\n\n\t\t\t// Add a one-time click handler that will fire before any other click handlers\n\t\t\tdocument.addEventListener('click', preventClickPropagation, {\n\t\t\t\tcapture: true,\n\t\t\t\tonce: true,\n\t\t\t});\n\t\t}\n\n\t\tinitialX.current = null;\n\t\tinitialScrollPos.current = null;\n\n\t\tsetIsDragging(false);\n\t};\n\n\tconst handleDrag = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (!isDragging || !nodeRef.current || !initialX.current) return;\n\n\t\tevent.preventDefault();\n\n\t\t// This tracks the initial scroll position when the drag starts so it doesn't reset\n\t\t// to 0 when the user starts dragging again.\n\t\tif (initialScrollPos.current === null) {\n\t\t\tinitialScrollPos.current = scroll;\n\t\t}\n\n\t\t// Check if we've moved enough to consider this a drag operation\n\t\tif (initialX.current) {\n\t\t\tconst deltaX = Math.abs(event.clientX - initialX.current);\n\n\t\t\t// If moved more than the threshold in either direction, mark as moved\n\t\t\tif (deltaX > 5) {\n\t\t\t\thasMoved.current = true;\n\t\t\t}\n\t\t}\n\n\t\tconst walkX = (event.clientX - initialX.current) * -1 + initialScrollPos.current;\n\n\t\t// 16 is to make the scroll a bit smoother in case of coming up short (Padding width offset)\n\t\tif (walkX <= 16) {\n\t\t\treturn setScroll(0);\n\t\t}\n\n\t\tif (walkX + 16 < maxScroll) {\n\t\t\treturn setScroll(walkX);\n\t\t}\n\n\t\treturn setScroll(maxScroll);\n\t};\n\n\t/* Note that it is important for the Dropdown component *not* to be rerendered when\n\t * the reference value of the filter object changes, only when it is actually a\n\t * different filter (i.e. when the ID changes). When a GraphQL request is made, the\n\t * same filter will be represented by a new object. If this causes a rerender of the\n\t * Dropdown component, the dropdown will close after every filter selection. Instead,\n\t * the dropdown should stay open after a filter is selected.\n\t */\n\treturn (\n\t\t<>\n\t\t\t{sortedFilters.map((filter) => {\n\t\t\t\tconst smartfilter = filter.smartfilter;\n\t\t\t\tconst metaproperties = filter.metapropertyFilters;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tkey={smartfilter.id}\n\t\t\t\t\t\ttitle={smartfilter.labels[language] || smartfilter.labels.en_US}\n\t\t\t\t\t\talt={smartfilter.labels[language] || smartfilter.labels.en_US}\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tfadeIn\n\t\t\t\t\t\tisMetapropertyDropdown\n\t\t\t\t\t>\n\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t<MetaPropertyFilterParent\n\t\t\t\t\t\t\t\tref={nodeRef}\n\t\t\t\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\t\t\t\t\tonMouseMove={handleDrag}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\t\t\t\t\t$scroll={scroll}\n\t\t\t\t\t\t\t\t\tdata-testid=\"metaproperty-dropdown-content\"\n\t\t\t\t\t\t\t\t\t$isDragging={isDragging}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{metaproperties.map((metapropertObject) => {\n\t\t\t\t\t\t\t\t\t\tconst metaproperty = metapropertObject.metaproperty;\n\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t!assetFilterState.existingFilters?.[metaproperty.name]\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type !== 'autocomplete' &&\n\t\t\t\t\t\t\t\t\t\t\t((metaproperty.type !== 'smart-single' &&\n\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type !== 'select') ||\n\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.options.length === 0)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\tconst content =\n\t\t\t\t\t\t\t\t\t\t\tmetaproperty.type === 'autocomplete' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<Autocomplete\n\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty={metaproperty}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue[metaproperty.id] || ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={handleAutocompleteInputChange}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSmartfilterOptionSelections\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tautocompleteOptions={autocompleteOptions || {}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading[metaproperty.id] || false}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOptions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.selectedSmartfilterOptions ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<SmartFilterSelect\n\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty={metaproperty}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsmartfilterId={smartfilter.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSmartfilterOptionSelections\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOptions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.selectedSmartfilterOptions ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilteredMetaproperty={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tassetFilterState.existingFilters?.[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmetaproperty.name\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tmetapropertyCursor={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmetapropertObject.metadata.nextCursorMark\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownContentContainer key={metaproperty.id}>\n\t\t\t\t\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t\t\t\t\t</DropdownContentContainer>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\n\t\t\t\t\t\t\t\t<NavigationParent direction=\"row\" justifyContent=\"flex-end\">\n\t\t\t\t\t\t\t\t\t<NavigationArrow\n\t\t\t\t\t\t\t\t\t\ttitle=\"Previous\"\n\t\t\t\t\t\t\t\t\t\ticon={<IconArrowLeft />}\n\t\t\t\t\t\t\t\t\t\tonClick={handleLeftScroll}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"left-arrow\"\n\t\t\t\t\t\t\t\t\t\tisDisabled={isLeftArrowDisabled}\n\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t<NavigationArrow\n\t\t\t\t\t\t\t\t\t\ttitle=\"Next\"\n\t\t\t\t\t\t\t\t\t\ticon={<IconArrowRight />}\n\t\t\t\t\t\t\t\t\t\tonClick={handleRightScroll}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"right-arrow\"\n\t\t\t\t\t\t\t\t\t\tisDisabled={!isRightArrowDisabled}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</NavigationParent>\n\t\t\t\t\t\t\t</MetaPropertyFilterParent>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Dropdown>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nfunction sortFilters(filterData: FilterData) {\n\treturn [...filterData.filters].sort((a, b) => a.smartfilter.zindex - b.smartfilter.zindex);\n}\n\nexport { Smartfilter };\n\nconst MetaPropertyFilterParent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n`;\n\nconst DropdownContentWrapper = styled.div<{ $scroll: number; $isDragging?: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\ttransform: translateX(-${(p) => p.$scroll}px);\n\ttransition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);\n\twidth: fit-content;\n\tcursor: ${(p) => (p.$isDragging ? 'grabbing' : 'default')};\n`;\n\nconst DropdownContentContainer = styled(Box)`\n\tborder-right: 1px solid rgba(3, 16, 38, 0.1);\n\tmax-width: 300px;\n`;\n\nconst NavigationParent = styled(Flex)`\n\tpadding: ${token.spacing3};\n\tborder-top: 1px solid rgba(3, 16, 38, 0.1);\n\tgap: ${token.spacing3};\n`;\n\nconst NavigationArrow = styled(Button)`\n\tpadding: ${token.spacing3};\n\tborder-radius: 6px;\n\tborder: 1px solid rgba(3, 16, 38, 0.1);\n\tbackground: rgba(3, 16, 38, 0.03);\n\tcursor: pointer;\n`;\n"],"names":["Smartfilter","filterData","assetFilterState","useAssetFilter","auth","useAuth","language","useConfig","sortedFilters","sortFilters","inputValue","setInputValue","useState","autocompleteOptions","setAutocompleteOptions","isLoading","setIsLoading","scroll","setScroll","maxScroll","setMaxScroll","isDragging","setIsDragging","nodeRef","useRef","hasMoved","initialX","initialScrollPos","debouncedFunctions","useEffect","isLeftArrowDisabled","isRightArrowDisabled","handleLeftScroll","prevScroll","leftScroll","handleRightScroll","rightScroll","handleApi","search","id","callAutocomplete","prev","getAutocompleteOptions","getDebouncedFunction","debounceAsync","handleSmartfilterOptionSelections","metapropertyName","option","isMultifilter","handleAutocompleteInputChange","metapropertyId","value","handleMouseDown","event","handleMouseUp","preventClickPropagation","e","handleDrag","walkX","jsx","Fragment","filter","smartfilter","metaproperties","Dropdown","jsxs","MetaPropertyFilterParent","DropdownContentWrapper","metapropertObject","metaproperty","content","Autocomplete","SmartFilterSelect","DropdownContentContainer","NavigationParent","NavigationArrow","IconArrowLeft","IconArrowRight","a","styled","p","Box","Flex","token","Button"],"mappings":"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"}

package/Spinner.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "styled-components";
+import { token as n } from "@bynder/design-system";
+function g(i) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      "data-testid": "spinner",
+      $isRelative: i.isRelative,
+      $isHidden: i.isHidden,
+      $isRefreshingSpinner: i.isRefreshingSpinner,
+      $isNotUsingMargin: i.isNotUsingMargin,
+      children: /* @__PURE__ */ e("svg", { className: "spinner", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("circle", { cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "3" }) })
+    }
+  );
+}
+const s = r.div`
+	display: ${(i) => i.$isHidden ? "none" : "initial"};
+	position: ${(i) => i.$isRelative ? "relative" : "absolute"};
+	top: ${(i) => i.$isRefreshingSpinner ? "initial" : "0"};
+	right: ${(i) => i.$isRefreshingSpinner ? "initial" : "0"};
+	width: ${n.spacing6};
+	height: ${n.spacing6};
+	margin-right: ${(i) => i.$isNotUsingMargin ? "0" : n.spacing3};
+	margin-top: ${(i) => i.$isNotUsingMargin ? "0" : n.spacing4};
+	background-color: #fff;
+	color: rgba(0, 34, 51, 0.3);
+`;
+export {
+  g as Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../src/common/components/Spinner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\n\ninterface Props {\n\tisRelative?: boolean;\n\tisHidden?: boolean;\n\tisRefreshingSpinner?: boolean;\n\tisNotUsingMargin?: boolean;\n}\n\nexport function Spinner(props: Props) {\n\treturn (\n\t\t<SpinnerContainer\n\t\t\tdata-testid=\"spinner\"\n\t\t\t$isRelative={props.isRelative}\n\t\t\t$isHidden={props.isHidden}\n\t\t\t$isRefreshingSpinner={props.isRefreshingSpinner}\n\t\t\t$isNotUsingMargin={props.isNotUsingMargin}\n\t\t>\n\t\t\t<svg className=\"spinner\" viewBox=\"0 0 20 20\">\n\t\t\t\t<circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" strokeWidth=\"3\" />\n\t\t\t</svg>\n\t\t</SpinnerContainer>\n\t);\n}\n\nconst SpinnerContainer = styled.div<{\n\t$isRelative?: boolean;\n\t$isHidden?: boolean;\n\t$isRefreshingSpinner?: boolean;\n\t$isNotUsingMargin?: boolean;\n}>`\n\tdisplay: ${(props) => (props.$isHidden ? 'none' : 'initial')};\n\tposition: ${(props) => (props.$isRelative ? 'relative' : 'absolute')};\n\ttop: ${(props) => (props.$isRefreshingSpinner ? 'initial' : '0')};\n\tright: ${(props) => (props.$isRefreshingSpinner ? 'initial' : '0')};\n\twidth: ${token.spacing6};\n\theight: ${token.spacing6};\n\tmargin-right: ${(props) => (props.$isNotUsingMargin ? '0' : token.spacing3)};\n\tmargin-top: ${(props) => (props.$isNotUsingMargin ? '0' : token.spacing4)};\n\tbackground-color: #fff;\n\tcolor: rgba(0, 34, 51, 0.3);\n`;\n"],"names":["Spinner","props","jsx","SpinnerContainer","styled","token"],"mappings":";;;AAYO,SAASA,EAAQC,GAAc;AACrC,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,aAAaF,EAAM;AAAA,MACnB,WAAWA,EAAM;AAAA,MACjB,sBAAsBA,EAAM;AAAA,MAC5B,mBAAmBA,EAAM;AAAA,MAEzB,4BAAC,OAAA,EAAI,WAAU,WAAU,SAAQ,aAChC,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,QAAO,aAAY,KAAI,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA;AAGH;AAEA,MAAME,IAAmBC,EAAO;AAAA,YAMpB,CAACH,MAAWA,EAAM,YAAY,SAAS,SAAU;AAAA,aAChD,CAACA,MAAWA,EAAM,cAAc,aAAa,UAAW;AAAA,QAC7D,CAACA,MAAWA,EAAM,uBAAuB,YAAY,GAAI;AAAA,UACvD,CAACA,MAAWA,EAAM,uBAAuB,YAAY,GAAI;AAAA,UACzDI,EAAM,QAAQ;AAAA,WACbA,EAAM,QAAQ;AAAA,iBACR,CAACJ,MAAWA,EAAM,oBAAoB,MAAMI,EAAM,QAAS;AAAA,eAC7D,CAACJ,MAAWA,EAAM,oBAAoB,MAAMI,EAAM,QAAS;AAAA;AAAA;AAAA;"}

package/StatefulAssetList.js

@@ -0,0 +1,100 @@
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { useEffect as c } from "react";
+import { styled as f } from "styled-components";
+import { token as i } from "@bynder/design-system";
+import { IconErrorOutline as N } from "@bynder/icons";
+import { __ as m } from "./index2.js";
+import { NoResults as I } from "./NoResults.js";
+import { useAssetFilter as _ } from "./AssetFilterContext.js";
+import { useConfig as w } from "./ConfigContext.js";
+import { useSelectedAssetIds as D, useSelection as R } from "./SelectionContext.js";
+import { Oops as M } from "./Oops.js";
+import { ActiveFilters as P } from "./ActiveFilters.js";
+import { pluralize as $ } from "./text.js";
+import { AssetList as b } from "./AssetList.js";
+import { DirectionSelect as j } from "./DirectionSelect.js";
+import { FieldSelect as k } from "./FieldSelect.js";
+import { Tooltip as z } from "./Tooltip.js";
+import { useSearchStore as B } from "./useSearchStore.js";
+import { useSimilaritySearchStore as H } from "./useSimilaritySearchStore.js";
+function ce(e) {
+  const { data: s, isLoading: r, loadMore: g, hasNextPage: p, executeQuery: d } = e.connection, { setIsLoading: S, setSearch: a } = B(), l = w(), A = D(), { selectAssets: h, toggleAssets: v, setAllAssets: L } = R(), x = _(), {
+    isNLSSelected: E,
+    NLSSearchText: y,
+    isSelected: C
+  } = H();
+  if (c(() => {
+    r || S(!1);
+  }, [r]), c(() => {
+    s.tag !== "Failure" && L(u(s));
+  }, [s]), s.tag === "Failure")
+    return /* @__PURE__ */ t(M, { error: new Error(s.value), onRetry: d });
+  const o = s.value?.searchAssets?.assets?.totalCount ?? e.totalCount, T = () => {
+    x.clear(), a("assets", ""), a("collection", "");
+  }, n = !!(C || E && y);
+  return /* @__PURE__ */ t(
+    b,
+    {
+      assets: u(s),
+      count: o,
+      isLoading: r,
+      loadMore: g,
+      hasNextPage: p,
+      theme: l.theme,
+      selectionMode: l.selectionMode,
+      selectedAssetIds: A,
+      onSelect: h,
+      onToggle: v,
+      emptyStateElement: /* @__PURE__ */ t(I, { onReset: T }),
+      children: /* @__PURE__ */ F(O, { children: [
+        o !== void 0 && /* @__PURE__ */ t(U, { "data-testid": "assets-amount", children: $(o, m("{} asset"), m("{} assets")) }, o),
+        e.showActiveFilters && /* @__PURE__ */ t(P, {}),
+        /* @__PURE__ */ t(
+          k,
+          {
+            options: n ? ["NL_SEARCH"] : ["CREATED_AT", "PUBLISHED_AT", "UPDATED_AT", "NAME"]
+          }
+        ),
+        /* @__PURE__ */ t(j, { nlSearch: n }),
+        n && /* @__PURE__ */ t(
+          z,
+          {
+            text: `You cannot change the sorting criteria while a Visual Similarity filter
+							is being applied`,
+            position: "left",
+            margin: "left",
+            marginAmount: "spacing3",
+            children: /* @__PURE__ */ t(N, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+function u(e) {
+  return e.tag === "Loading" && !e.value ? {
+    tag: "Loading",
+    value: void 0
+  } : e.tag === "Loading" ? {
+    tag: e.tag,
+    value: e.value?.searchAssets.assets.nodes
+  } : {
+    tag: e.tag,
+    value: e.value.searchAssets.assets.nodes
+  };
+}
+const O = f.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	z-index: 10;
+	padding: ${i.spacing5} ${i.spacing5} ${i.spacing3} ${i.spacing5};
+`, U = f.span`
+	color: rgba(0, 34, 51, 0.5);
+	flex-shrink: 0;
+	animation: fade-in-down 0.15s ease-out;
+`;
+export {
+  ce as StatefulAssetList
+};
+//# sourceMappingURL=StatefulAssetList.js.map

package/StatefulAssetList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatefulAssetList.js","sources":["../../src/views/asset/StatefulAssetList.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { IconErrorOutline } from '@bynder/icons';\nimport { __ } from '@src/localization';\nimport { NoResults } from '@src/common/components/NoResults';\nimport { useAssetFilter } from '@src/filter/AssetFilterContext';\nimport { Connection } from '@src/api/graphql.types';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useSelectedAssetIds, useSelection } from '@src/select/SelectionContext';\nimport { Oops } from '@src/error-handling/Oops';\nimport { ActiveFilters } from '@src/filter/active-filters/ActiveFilters';\nimport { pluralize } from '@src/utils/text';\nimport { Asset } from './asset.type';\nimport { AssetList } from './AssetList';\nimport { DirectionSelect } from '@src/order/DirectionSelect';\nimport { FieldSelect } from '@src/order/FieldSelect';\nimport { Tooltip } from '@src/common/components/Tooltip';\nimport { useSearchStore } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\ninterface DataValue {\n\tsearchAssets: {\n\t\tassets: {\n\t\t\ttotalCount: number;\n\t\t\tnodes: Asset[];\n\t\t};\n\t};\n}\n\ninterface Props {\n\tconnection: Connection<DataValue>;\n\ttotalCount?: number;\n\tshowActiveFilters?: boolean;\n}\n\nexport function StatefulAssetList(props: Props) {\n\tconst { data, isLoading, loadMore, hasNextPage, executeQuery } = props.connection;\n\tconst { setIsLoading, setSearch } = useSearchStore();\n\tconst config = useConfig();\n\tconst selectedAssetIds = useSelectedAssetIds();\n\tconst { selectAssets, toggleAssets, setAllAssets } = useSelection();\n\tconst assetFilterState = useAssetFilter();\n\tconst {\n\t\tisNLSSelected,\n\t\tNLSSearchText,\n\t\tisSelected: isSimilaritySearchSelected,\n\t} = useSimilaritySearchStore();\n\n\tuseEffect(() => {\n\t\tif (!isLoading) {\n\t\t\tsetIsLoading(false);\n\t\t}\n\t}, [isLoading]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tuseEffect(() => {\n\t\tif (data.tag !== 'Failure') {\n\t\t\tsetAllAssets(getAssetNodes(data));\n\t\t}\n\t}, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tif (data.tag === 'Failure') {\n\t\treturn <Oops error={new Error(data.value)} onRetry={executeQuery} />;\n\t}\n\n\tconst totalCount = data.value?.searchAssets?.assets?.totalCount ?? props.totalCount;\n\n\tconst onReset = () => {\n\t\tassetFilterState.clear();\n\t\tsetSearch('assets', '');\n\t\tsetSearch('collection', '');\n\t};\n\n\tconst isAISearchPerformed = Boolean(\n\t\tisSimilaritySearchSelected || (isNLSSelected && NLSSearchText),\n\t);\n\n\treturn (\n\t\t<AssetList\n\t\t\tassets={getAssetNodes(data)}\n\t\t\tcount={totalCount}\n\t\t\tisLoading={isLoading}\n\t\t\tloadMore={loadMore}\n\t\t\thasNextPage={hasNextPage}\n\t\t\ttheme={config.theme}\n\t\t\tselectionMode={config.selectionMode}\n\t\t\tselectedAssetIds={selectedAssetIds}\n\t\t\tonSelect={selectAssets}\n\t\t\tonToggle={toggleAssets}\n\t\t\temptyStateElement={<NoResults onReset={onReset} />}\n\t\t>\n\t\t\t<StatefulAssetListContainer>\n\t\t\t\t{totalCount !== undefined && (\n\t\t\t\t\t<StatefulAssetListCount data-testid=\"assets-amount\" key={totalCount}>\n\t\t\t\t\t\t{pluralize(totalCount, __('{} asset'), __('{} assets'))}\n\t\t\t\t\t</StatefulAssetListCount>\n\t\t\t\t)}\n\n\t\t\t\t{props.showActiveFilters && <ActiveFilters />}\n\n\t\t\t\t<FieldSelect\n\t\t\t\t\toptions={\n\t\t\t\t\t\tisAISearchPerformed\n\t\t\t\t\t\t\t? ['NL_SEARCH']\n\t\t\t\t\t\t\t: ['CREATED_AT', 'PUBLISHED_AT', 'UPDATED_AT', 'NAME']\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<DirectionSelect nlSearch={isAISearchPerformed} />\n\t\t\t\t{isAISearchPerformed && (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\ttext=\"You cannot change the sorting criteria while a Visual Similarity filter\n\t\t\t\t\t\t\tis being applied\"\n\t\t\t\t\t\tposition=\"left\"\n\t\t\t\t\t\tmargin=\"left\"\n\t\t\t\t\t\tmarginAmount=\"spacing3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconErrorOutline />\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</StatefulAssetListContainer>\n\t\t</AssetList>\n\t);\n}\n\nfunction getAssetNodes(\n\tdata:\n\t\t| { tag: 'Loading'; value: undefined | null | DataValue }\n\t\t| { tag: 'Loaded'; value: DataValue },\n): { tag: 'Loading'; value: undefined | Asset[] } | { tag: 'Loaded'; value: Asset[] } {\n\tif (data.tag === 'Loading' && !data.value) {\n\t\treturn {\n\t\t\ttag: 'Loading',\n\t\t\tvalue: undefined,\n\t\t};\n\t} else if (data.tag === 'Loading') {\n\t\treturn {\n\t\t\ttag: data.tag,\n\t\t\tvalue: data.value?.searchAssets.assets.nodes,\n\t\t};\n\t}\n\n\treturn {\n\t\ttag: data.tag,\n\t\tvalue: data.value.searchAssets.assets.nodes,\n\t};\n}\n\nconst StatefulAssetListContainer = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tz-index: 10;\n\tpadding: ${token.spacing5} ${token.spacing5} ${token.spacing3} ${token.spacing5};\n`;\n\nconst StatefulAssetListCount = styled.span`\n\tcolor: rgba(0, 34, 51, 0.5);\n\tflex-shrink: 0;\n\tanimation: fade-in-down 0.15s ease-out;\n`;\n"],"names":["StatefulAssetList","props","data","isLoading","loadMore","hasNextPage","executeQuery","setIsLoading","setSearch","useSearchStore","config","useConfig","selectedAssetIds","useSelectedAssetIds","selectAssets","toggleAssets","setAllAssets","useSelection","assetFilterState","useAssetFilter","isNLSSelected","NLSSearchText","isSimilaritySearchSelected","useSimilaritySearchStore","useEffect","getAssetNodes","jsx","Oops","totalCount","onReset","isAISearchPerformed","AssetList","NoResults","StatefulAssetListContainer","StatefulAssetListCount","pluralize","__","ActiveFilters","FieldSelect","DirectionSelect","Tooltip","IconErrorOutline","styled","token"],"mappings":"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"}

package/Styles.css.js

@@ -0,0 +1,5 @@
+const e = ':host{font-family:SourceSansPro,Source Sans Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";--fade-in-down: fade-in-down .15s ease-out}.translate-y-2\\/4{-webkit-transform:translateY(-50%);transform:translateY(-50%)}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fade-in-down{0%{opacity:0;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes border-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes border-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes border-dash{0%{stroke-dasharray:1,100;stroke-dashoffset:0}50%{stroke-dasharray:80,100;stroke-dashoffset:-20}to{stroke-dasharray:80,100;stroke-dashoffset:-48}}@keyframes border-dash{0%{stroke-dasharray:1,100;stroke-dashoffset:0}50%{stroke-dasharray:80,100;stroke-dashoffset:-20}to{stroke-dasharray:80,100;stroke-dashoffset:-48}}.transition-shadow{-webkit-transition:-webkit-box-shadow .1s linear;transition:-webkit-box-shadow .1s linear;transition:box-shadow .1s linear;transition:box-shadow .1s linear,-webkit-box-shadow .1s linear}.transition-transform{-webkit-transition:-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15);transition:-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15);transition:transform .6s cubic-bezier(.175,.885,.32,1.15);transition:transform .6s cubic-bezier(.175,.885,.32,1.15),-webkit-transform .6s cubic-bezier(.175,.885,.32,1.15)}.cv-root{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#fff;font-family:SourceSansPro,Source Sans Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;font-size:16px;color:#023c}.cv-root *,.cv-root *:before,.cv-root *:after{-webkit-box-sizing:inherit;box-sizing:inherit}.cv-container{overflow:hidden;width:100%;height:100%}.cv-container nav:last-of-type{-webkit-box-shadow:0 1px 0 0 rgba(0,34,51,.1),0 1px 6px 0 rgba(0,34,51,.1);box-shadow:0 1px #0022331a,0 1px 6px #0022331a}.cv-dropdown{position:fixed;border-width:1px;border-color:#0022331a;-webkit-animation:fade-in-down .15s ease-out;animation:fade-in-down .15s ease-out;margin-top:16px;border-radius:5px;-webkit-box-shadow:0 4px 10px 0 rgba(0,34,51,.1);box-shadow:0 4px 10px #0022331a;z-index:9999999;overflow-y:hidden;-webkit-transition:left .1s ease-out;transition:left .1s ease-out}.card-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-pack:center;justify-content:center;position:relative;padding-left:8px;padding-right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.max-h-400{max-height:400px}.max-w-600{max-width:600px}.flip-y{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.spinner{-webkit-animation:border-rotate 1s linear infinite;animation:border-rotate 1s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-10px 0 0 -10px;width:20px;height:20px}.spinner circle{stroke:currentColor;stroke-linecap:round;-webkit-animation:border-dash 1.5s ease-in-out infinite;animation:border-dash 1.5s ease-in-out infinite}::-ms-clear{display:none}.fa-lg{line-height:1.05em}.z-a-lot{z-index:999999}.z-a-lot-more{z-index:9999999}button:focus{outline:revert}';
+export {
+  e as default
+};
+//# sourceMappingURL=Styles.css.js.map

package/Styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/SwitchNLS.js

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import r from "styled-components";
+import { token as e, textStyles as s, TruncatedText as c, Switch as f } from "@bynder/design-system";
+import { IconSmart as m } from "@bynder/icons";
+import { __ as d } from "./index2.js";
+const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
+  const a = (t) => {
+    t && t.currentTarget !== t.target || (t?.stopPropagation(), o(!n));
+  }, g = () => {
+    o(!n);
+  };
+  return /* @__PURE__ */ l(
+    p,
+    {
+      onClick: a,
+      onKeyDown: (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), a(t));
+      },
+      tabIndex: 0,
+      "data-testid": "switch-nls-container",
+      children: [
+        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(m, {}) }),
+        /* @__PURE__ */ l(u, { id: "labelId", children: [
+          /* @__PURE__ */ i(c, { children: d("Use natural language search") }),
+          /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(c, { children: d("Find images by describing them") }) })
+        ] }),
+        /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i(
+          f,
+          {
+            isChecked: n,
+            "aria-labelledby": "labelId",
+            onChange: g
+          }
+        ) })
+      ]
+    }
+  );
+}, p = r.div`
+	display: flex;
+
+	align-items: flex-start;
+	margin: ${e.spacing3};
+	padding: ${e.spacing3};
+	background-color: #f3f2fd;
+	border-radius: ${e.radiusLarge};
+
+	&:hover {
+		background-color: #eeedfc;
+		cursor: pointer;
+	}
+
+	&:active {
+		background-color: #f3f2fd;
+	}
+`, h = r.div`
+	flex: none;
+	margin-right: ${e.spacing4};
+	color: ${e.purple500};
+`, u = r.div`
+	${s.uiTextM}
+
+	flex: 1;
+	min-width: 0;
+	font-weight: 400;
+	color: #031026;
+`, x = r.div`
+	${s.uiTextS}
+
+	color: ${e.colorTextMuted};
+`, b = r.div`
+	display: flex;
+	flex: none;
+	gap: ${e.spacing3};
+	align-items: center;
+	margin-left: ${e.spacing4};
+`;
+export {
+  C as SwitchNLS
+};
+//# sourceMappingURL=SwitchNLS.js.map

package/SwitchNLS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchNLS.js","sources":["../../src/search/SwitchNLS.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Switch, textStyles, token, TruncatedText } from '@bynder/design-system';\nimport { IconSmart } from '@bynder/icons';\nimport { __ } from '@src/localization';\n\ninterface Props {\n\tisNLSSearchOn: boolean;\n\tsetIsNLSSearchOn: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const SwitchNLS = ({ isNLSSearchOn, setIsNLSSearchOn }: Props) => {\n\tconst toggleNLSAndFocusSpotlight = (event?: React.MouseEvent | React.KeyboardEvent) => {\n\t\t// Only proceed if the click was directly on the container, not on its children (especially the Switch)\n\t\tif (event && event.currentTarget !== event.target) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent?.stopPropagation();\n\t\tsetIsNLSSearchOn(!isNLSSearchOn);\n\t};\n\n\tconst handleSwitchChange = () => {\n\t\tsetIsNLSSearchOn(!isNLSSearchOn);\n\t};\n\n\treturn (\n\t\t<ItemStyled\n\t\t\tonClick={toggleNLSAndFocusSpotlight}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\ttoggleNLSAndFocusSpotlight(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\ttabIndex={0}\n\t\t\tdata-testid=\"switch-nls-container\"\n\t\t>\n\t\t\t<ThumbnailContainer>\n\t\t\t\t<IconSmart />\n\t\t\t</ThumbnailContainer>\n\n\t\t\t<Content id=\"labelId\">\n\t\t\t\t<TruncatedText>{__('Use natural language search')}</TruncatedText>\n\t\t\t\t<Subtext>\n\t\t\t\t\t<TruncatedText>{__('Find images by describing them')}</TruncatedText>\n\t\t\t\t</Subtext>\n\t\t\t</Content>\n\n\t\t\t<RightElements>\n\t\t\t\t<Switch\n\t\t\t\t\tisChecked={isNLSSearchOn}\n\t\t\t\t\taria-labelledby=\"labelId\"\n\t\t\t\t\tonChange={handleSwitchChange}\n\t\t\t\t/>\n\t\t\t</RightElements>\n\t\t</ItemStyled>\n\t);\n};\n\nconst ItemStyled = styled.div`\n\tdisplay: flex;\n\n\talign-items: flex-start;\n\tmargin: ${token.spacing3};\n\tpadding: ${token.spacing3};\n\tbackground-color: #f3f2fd;\n\tborder-radius: ${token.radiusLarge};\n\n\t&:hover {\n\t\tbackground-color: #eeedfc;\n\t\tcursor: pointer;\n\t}\n\n\t&:active {\n\t\tbackground-color: #f3f2fd;\n\t}\n`;\n\nconst ThumbnailContainer = styled.div`\n\tflex: none;\n\tmargin-right: ${token.spacing4};\n\tcolor: ${token.purple500};\n`;\n\nconst Content = styled.div`\n\t${textStyles.uiTextM}\n\n\tflex: 1;\n\tmin-width: 0;\n\tfont-weight: 400;\n\tcolor: #031026;\n`;\n\nconst Subtext = styled.div<{ $isDisabled?: boolean }>`\n\t${textStyles.uiTextS}\n\n\tcolor: ${token.colorTextMuted};\n`;\n\nconst RightElements = styled.div`\n\tdisplay: flex;\n\tflex: none;\n\tgap: ${token.spacing3};\n\talign-items: center;\n\tmargin-left: ${token.spacing4};\n`;\n"],"names":["SwitchNLS","isNLSSearchOn","setIsNLSSearchOn","toggleNLSAndFocusSpotlight","event","handleSwitchChange","jsxs","ItemStyled","jsx","ThumbnailContainer","IconSmart","Content","TruncatedText","__","Subtext","RightElements","Switch","styled","token","textStyles"],"mappings":";;;;;AAWO,MAAMA,IAAY,CAAC,EAAE,eAAAC,GAAe,kBAAAC,QAA8B;AACxE,QAAMC,IAA6B,CAACC,MAAmD;AAEtF,IAAIA,KAASA,EAAM,kBAAkBA,EAAM,WAI3CA,GAAO,gBAAA,GACPF,EAAiB,CAACD,CAAa;AAAA,EAChC,GAEMI,IAAqB,MAAM;AAChC,IAAAH,EAAiB,CAACD,CAAa;AAAA,EAChC;AAEA,SACC,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASJ;AAAA,MACT,WAAW,CAACC,MAAU;AACrB,SAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAC1CA,EAAM,eAAA,GACND,EAA2BC,CAAK;AAAA,MAElC;AAAA,MACA,UAAU;AAAA,MACV,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EACA,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAU,GACZ;AAAA,QAEA,gBAAAJ,EAACK,GAAA,EAAQ,IAAG,WACX,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAe,UAAAC,EAAG,6BAA6B,EAAA,CAAE;AAAA,4BACjDC,GAAA,EACA,UAAA,gBAAAN,EAACI,KAAe,UAAAC,EAAG,gCAAgC,GAAE,EAAA,CACtD;AAAA,QAAA,GACD;AAAA,0BAECE,GAAA,EACA,UAAA,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,WAAWf;AAAA,YACX,mBAAgB;AAAA,YAChB,UAAUI;AAAA,UAAA;AAAA,QAAA,EACX,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;AAAA,WAIfC,EAAM,QAAQ;AAAA,YACbA,EAAM,QAAQ;AAAA;AAAA,kBAERA,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY7BT,IAAqBQ,EAAO;AAAA;AAAA,iBAEjBC,EAAM,QAAQ;AAAA,UACrBA,EAAM,SAAS;AAAA,GAGnBP,IAAUM,EAAO;AAAA,GACpBE,EAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQfL,IAAUG,EAAO;AAAA,GACpBE,EAAW,OAAO;AAAA;AAAA,UAEXD,EAAM,cAAc;AAAA,GAGxBH,IAAgBE,EAAO;AAAA;AAAA;AAAA,QAGrBC,EAAM,QAAQ;AAAA;AAAA,gBAENA,EAAM,QAAQ;AAAA;"}

package/TagItem.js

@@ -0,0 +1,38 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { styled as n } from "styled-components";
+import { token as s } from "@bynder/design-system";
+import { Chip as l } from "./Chip.js";
+import { useAssetFilter as r } from "./AssetFilterContext.js";
+function x(t) {
+  const e = r(), i = e.tags.includes(t.tag.name);
+  function o() {
+    i ? e.removeTag(t.tag.name) : t.isLoading || e.addTag(t.tag.name);
+  }
+  return /* @__PURE__ */ m(
+    l,
+    {
+      loading: t.isLoading,
+      active: i,
+      onClick: o,
+      "data-testid": "tag-item",
+      children: [
+        /* @__PURE__ */ a(g, { children: t.tag.name }),
+        /* @__PURE__ */ a(c, { children: t.tag.assetCount })
+      ]
+    },
+    t.tag.id
+  );
+}
+const g = n.span`
+	max-with: 128px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`, c = n.span`
+	color: rgba(0, 34, 51, 0.5);
+	margin-left: ${s.spacing3};
+`;
+export {
+  x as TagItem
+};
+//# sourceMappingURL=TagItem.js.map