@bynder/compact-view 5.1.3 → 5.2.0

package/SearchInput.js

@@ -0,0 +1,76 @@
+import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { useState as n, useEffect as p } from "react";
+import g from "styled-components";
+import { useDebouncedCallback as m } from "use-debounce";
+import { IconImage as H, IconSearch as R } from "@bynder/icons";
+import { Input as $ } from "@bynder/design-system";
+import { Spinner as j } from "./Spinner.js";
+import { __ as f } from "./index2.js";
+import { useRouterSelectors as A } from "./useRouterStore.js";
+import { useHideSwitch as E } from "./ConfigContext.js";
+import { SwitchNLS as O } from "./SwitchNLS.js";
+import { useSearchStateByPage as T } from "./useSearchStore.js";
+import { useSimilaritySearchStore as U } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as V } from "./getSimilarityAssets.js";
+function re() {
+  const t = A.use.page(), w = E(), { value: i, isLoading: a, setSearch: I } = T(t.page), { isEnabled: v, isNLSSelected: c, setIsNLSSelected: b, setNLSSearchText: x, setIsSelected: C } = U(), { search: L, resetData: N } = V(), s = m(L, 500), [l, h] = n(i), [y, u] = n(!1), [D, S] = n(!1);
+  p(() => {
+    h(i);
+  }, [t, i]);
+  const r = m((e) => {
+    C(!1), I(e);
+  }, 500);
+  p(() => () => {
+    r.flush(), s.flush();
+  }, [t, r, s]);
+  const M = (e) => (h(e), c ? (x(e), e.length === 0 && N(), s(void 0, e)) : r(e)), k = () => {
+    S(!0);
+  }, B = () => {
+    setTimeout(() => {
+      S(!1);
+    }, 0);
+  }, d = t.page === "collections" ? f("Search for collections") : f("Search for assets");
+  return /* @__PURE__ */ F(_, { $hideSwitch: w, children: [
+    /* @__PURE__ */ o(
+      $,
+      {
+        value: l,
+        placeholder: d,
+        "aria-label": d,
+        onChange: (e) => M(e),
+        "data-testid": "search-input",
+        icon: /* @__PURE__ */ o(R, {}),
+        iconRight: a ? /* @__PURE__ */ o("div", { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ o(j, { isRelative: !0 }) }) : /* @__PURE__ */ o(H, {}),
+        hasClearButton: !a && (!!i || !!l),
+        onFocus: () => u(!0),
+        onBlur: () => {
+          D || u(!1);
+        }
+      }
+    ),
+    v && y && t.page === "assets" && /* @__PURE__ */ o(
+      z,
+      {
+        onMouseDown: k,
+        onMouseUp: B,
+        children: /* @__PURE__ */ o(O, { isNLSSearchOn: c, setIsNLSSearchOn: b })
+      }
+    )
+  ] });
+}
+const _ = g.div`
+	width: 100%;
+	max-width: 440px;
+	margin-left: ${(t) => t.$hideSwitch ? "auto" : "none"};
+	position: relative;
+`, z = g.div`
+	position: absolute;
+	right: 0;
+	top: 100%;
+	z-index: 10;
+	width: 100%;
+`;
+export {
+  re as SearchInput
+};
+//# sourceMappingURL=SearchInput.js.map

package/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../src/search/SearchInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { IconImage, IconSearch } from '@bynder/icons';\nimport { Input } from '@bynder/design-system';\n\nimport { Spinner } from '../common/components/Spinner';\nimport { __ } from '../localization';\nimport { useRouterSelectors } from '@src/store/useRouterStore';\nimport { useHideSwitch } from '@src/app-config/ConfigContext';\nimport { SwitchNLS } from './SwitchNLS';\nimport { useSearchStateByPage } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\nimport { useSimilarityAssets } from '@src/api/getSimilarityAssets';\n\nexport function SearchInput() {\n\tconst page = useRouterSelectors.use.page();\n\tconst hideSwitch = useHideSwitch();\n\tconst { value, isLoading, setSearch } = useSearchStateByPage(page.page);\n\n\tconst { isEnabled, isNLSSelected, setIsNLSSelected, setNLSSearchText, setIsSelected } =\n\t\tuseSimilaritySearchStore();\n\tconst { search: aiSearch, resetData } = useSimilarityAssets();\n\n\tconst debouncedAISearch = useDebouncedCallback(aiSearch, 500);\n\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [isFocused, setIsFocused] = useState(false);\n\n\tconst [isHandlingSwitchClick, setIsHandlingSwitchClick] = useState(false);\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [page, value]);\n\n\tconst handleSetSearch = (search: string) => {\n\t\tsetIsSelected(false);\n\t\tsetSearch(search);\n\t};\n\tconst debouncedSetSearch = useDebouncedCallback(handleSetSearch, 500);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tdebouncedSetSearch.flush();\n\t\t\tdebouncedAISearch.flush();\n\t\t};\n\t}, [page, debouncedSetSearch, debouncedAISearch]);\n\n\tconst handleChange = (search: string) => {\n\t\tsetInputValue(search);\n\n\t\tif (isNLSSelected) {\n\t\t\tsetNLSSearchText(search);\n\n\t\t\tif (search.length === 0) {\n\t\t\t\tresetData();\n\t\t\t}\n\n\t\t\treturn debouncedAISearch(undefined, search);\n\t\t}\n\n\t\treturn debouncedSetSearch(search);\n\t};\n\n\tconst handleSwitchMouseDown = () => {\n\t\tsetIsHandlingSwitchClick(true);\n\t};\n\n\tconst handleSwitchMouseUp = () => {\n\t\tsetTimeout(() => {\n\t\t\tsetIsHandlingSwitchClick(false);\n\t\t}, 0);\n\t};\n\n\tconst placeholder =\n\t\tpage.page === 'collections' ? __('Search for collections') : __('Search for assets');\n\n\treturn (\n\t\t<StyledInputWrapper $hideSwitch={hideSwitch}>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\taria-label={placeholder}\n\t\t\t\tonChange={(val) => handleChange(val)}\n\t\t\t\tdata-testid=\"search-input\"\n\t\t\t\ticon={<IconSearch />}\n\t\t\t\ticonRight={\n\t\t\t\t\tisLoading ? (\n\t\t\t\t\t\t<div role=\"alert\" aria-live=\"polite\">\n\t\t\t\t\t\t\t<Spinner isRelative />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<IconImage />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\thasClearButton={!isLoading && (!!value || !!inputValue)}\n\t\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tif (!isHandlingSwitchClick) {\n\t\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{isEnabled && isFocused && page.page === 'assets' && (\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tonMouseDown={handleSwitchMouseDown}\n\t\t\t\t\tonMouseUp={handleSwitchMouseUp}\n\t\t\t\t>\n\t\t\t\t\t<SwitchNLS isNLSSearchOn={isNLSSelected} setIsNLSSearchOn={setIsNLSSelected} />\n\t\t\t\t</SwitchContainer>\n\t\t\t)}\n\t\t</StyledInputWrapper>\n\t);\n}\n\nconst StyledInputWrapper = styled.div<{ $hideSwitch?: boolean }>`\n\twidth: 100%;\n\tmax-width: 440px;\n\tmargin-left: ${(p) => (p.$hideSwitch ? 'auto' : 'none')};\n\tposition: relative;\n`;\n\nconst SwitchContainer = styled.div`\n\tposition: absolute;\n\tright: 0;\n\ttop: 100%;\n\tz-index: 10;\n\twidth: 100%;\n`;\n"],"names":["SearchInput","page","useRouterSelectors","hideSwitch","useHideSwitch","value","isLoading","setSearch","useSearchStateByPage","isEnabled","isNLSSelected","setIsNLSSelected","setNLSSearchText","setIsSelected","useSimilaritySearchStore","aiSearch","resetData","useSimilarityAssets","debouncedAISearch","useDebouncedCallback","inputValue","setInputValue","useState","isFocused","setIsFocused","isHandlingSwitchClick","setIsHandlingSwitchClick","useEffect","debouncedSetSearch","search","handleChange","handleSwitchMouseDown","handleSwitchMouseUp","placeholder","__","jsxs","StyledInputWrapper","jsx","Input","val","IconSearch","Spinner","IconImage","SwitchContainer","SwitchNLS","styled","p"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,KAAc;AAC7B,QAAMC,IAAOC,EAAmB,IAAI,KAAA,GAC9BC,IAAaC,EAAA,GACb,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,MAAcC,EAAqBP,EAAK,IAAI,GAEhE,EAAE,WAAAQ,GAAW,eAAAC,GAAe,kBAAAC,GAAkB,kBAAAC,GAAkB,eAAAC,EAAA,IACrEC,EAAA,GACK,EAAE,QAAQC,GAAU,WAAAC,EAAA,IAAcC,EAAA,GAElCC,IAAoBC,EAAqBJ,GAAU,GAAG,GAEtD,CAACK,GAAYC,CAAa,IAAIC,EAASjB,CAAK,GAC5C,CAACkB,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1C,CAACG,GAAuBC,CAAwB,IAAIJ,EAAS,EAAK;AAExE,EAAAK,EAAU,MAAM;AACf,IAAAN,EAAchB,CAAK;AAAA,EACpB,GAAG,CAACJ,GAAMI,CAAK,CAAC;AAMhB,QAAMuB,IAAqBT,EAJH,CAACU,MAAmB;AAC3C,IAAAhB,EAAc,EAAK,GACnBN,EAAUsB,CAAM;AAAA,EACjB,GACiE,GAAG;AAEpE,EAAAF,EAAU,MACF,MAAM;AACZ,IAAAC,EAAmB,MAAA,GACnBV,EAAkB,MAAA;AAAA,EACnB,GACE,CAACjB,GAAM2B,GAAoBV,CAAiB,CAAC;AAEhD,QAAMY,IAAe,CAACD,OACrBR,EAAcQ,CAAM,GAEhBnB,KACHE,EAAiBiB,CAAM,GAEnBA,EAAO,WAAW,KACrBb,EAAA,GAGME,EAAkB,QAAWW,CAAM,KAGpCD,EAAmBC,CAAM,IAG3BE,IAAwB,MAAM;AACnC,IAAAL,EAAyB,EAAI;AAAA,EAC9B,GAEMM,IAAsB,MAAM;AACjC,eAAW,MAAM;AAChB,MAAAN,EAAyB,EAAK;AAAA,IAC/B,GAAG,CAAC;AAAA,EACL,GAEMO,IACLhC,EAAK,SAAS,gBAAgBiC,EAAG,wBAAwB,IAAIA,EAAG,mBAAmB;AAEpF,SACC,gBAAAC,EAACC,GAAA,EAAmB,aAAajC,GAChC,UAAA;AAAA,IAAA,gBAAAkC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAOlB;AAAA,QACP,aAAAa;AAAA,QACA,cAAYA;AAAA,QACZ,UAAU,CAACM,MAAQT,EAAaS,CAAG;AAAA,QACnC,eAAY;AAAA,QACZ,wBAAOC,GAAA,EAAW;AAAA,QAClB,WACClC,IACC,gBAAA+B,EAAC,OAAA,EAAI,MAAK,SAAQ,aAAU,UAC3B,UAAA,gBAAAA,EAACI,KAAQ,YAAU,GAAA,CAAC,EAAA,CACrB,sBAECC,GAAA,EAAU;AAAA,QAGb,gBAAgB,CAACpC,MAAc,CAAC,CAACD,KAAS,CAAC,CAACe;AAAA,QAC5C,SAAS,MAAMI,EAAa,EAAI;AAAA,QAChC,QAAQ,MAAM;AACb,UAAKC,KACJD,EAAa,EAAK;AAAA,QAEpB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEAf,KAAac,KAAatB,EAAK,SAAS,YACxC,gBAAAoC;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,aAAaZ;AAAA,QACb,WAAWC;AAAA,QAEX,UAAA,gBAAAK,EAACO,GAAA,EAAU,eAAelC,GAAe,kBAAkBC,EAAA,CAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9E,GAEF;AAEF;AAEA,MAAMyB,IAAqBS,EAAO;AAAA;AAAA;AAAA,gBAGlB,CAACC,MAAOA,EAAE,cAAc,SAAS,MAAO;AAAA;AAAA,GAIlDH,IAAkBE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/SelectedItemContainer.js

@@ -0,0 +1,44 @@
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import o from "styled-components";
+import { token as e, Checkbox as a } from "@bynder/design-system";
+import { StyledCheckboxWrapper as c } from "./Checkbox.styles.js";
+import { __ as l } from "./index2.js";
+function $({
+  title: t,
+  onRemove: r,
+  children: n
+}) {
+  return /* @__PURE__ */ i(p, { title: t, children: /* @__PURE__ */ s(c, { $isChecked: !0, $isFlex: !0, children: [
+    /* @__PURE__ */ i(
+      a,
+      {
+        "aria-label": l("Deselect"),
+        id: `deselect-${t}`,
+        isChecked: !0,
+        onChange: r,
+        "data-testid": "metaproperty-option"
+      }
+    ),
+    /* @__PURE__ */ i(d, { htmlFor: `deselect-${t}`, children: n })
+  ] }) });
+}
+const p = o.li`
+	display: flex;
+	flex: 1 1 0%;
+	align-items: center;
+	position: relative;
+	padding: ${e.spacing2} calc(${e.spacing6} - 4px) ${e.spacing2} ${e.spacing4};
+	height: 48px;
+	border-bottom: 1px solid rgba(0, 34, 51, 0.1);
+`, d = o.label`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: ${e.fontSize100};
+	margin-left: ${e.spacing3};
+	cursor: pointer;
+`;
+export {
+  $ as SelectedItemContainer
+};
+//# sourceMappingURL=SelectedItemContainer.js.map

package/SelectedItemContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedItemContainer.js","sources":["../../src/select/current-selection/SelectedItemContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, token } from '@bynder/design-system';\n\nimport { StyledCheckboxWrapper } from '@src/common/components/Checkbox.styles';\nimport { __ } from '@src/localization';\n\nexport function SelectedItemContainer({\n\ttitle,\n\tonRemove,\n\tchildren,\n}: {\n\ttitle: string;\n\tonRemove: () => void;\n\tchildren: React.ReactNode;\n}) {\n\treturn (\n\t\t<SelectedItemListContainer title={title}>\n\t\t\t<StyledCheckboxWrapper $isChecked $isFlex>\n\t\t\t\t<Checkbox\n\t\t\t\t\taria-label={__('Deselect')}\n\t\t\t\t\tid={`deselect-${title}`}\n\t\t\t\t\tisChecked\n\t\t\t\t\tonChange={onRemove}\n\t\t\t\t\tdata-testid=\"metaproperty-option\"\n\t\t\t\t/>\n\t\t\t\t<Content htmlFor={`deselect-${title}`}>{children}</Content>\n\t\t\t</StyledCheckboxWrapper>\n\t\t</SelectedItemListContainer>\n\t);\n}\n\nconst SelectedItemListContainer = styled.li`\n\tdisplay: flex;\n\tflex: 1 1 0%;\n\talign-items: center;\n\tposition: relative;\n\tpadding: ${token.spacing2} calc(${token.spacing6} - 4px) ${token.spacing2} ${token.spacing4};\n\theight: 48px;\n\tborder-bottom: 1px solid rgba(0, 34, 51, 0.1);\n`;\nconst Content = styled.label`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tfont-size: ${token.fontSize100};\n\tmargin-left: ${token.spacing3};\n\tcursor: pointer;\n`;\n"],"names":["SelectedItemContainer","title","onRemove","children","jsx","SelectedItemListContainer","jsxs","StyledCheckboxWrapper","Checkbox","__","Content","styled","token"],"mappings":";;;;;AAOO,SAASA,EAAsB;AAAA,EACrC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACD,GAIG;AACF,SACC,gBAAAC,EAACC,KAA0B,OAAAJ,GAC1B,UAAA,gBAAAK,EAACC,KAAsB,YAAU,IAAC,SAAO,IACxC,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,cAAYC,EAAG,UAAU;AAAA,QACzB,IAAI,YAAYR,CAAK;AAAA,QACrB,WAAS;AAAA,QACT,UAAUC;AAAA,QACV,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEZQ,GAAA,EAAQ,SAAS,YAAYT,CAAK,IAAK,UAAAE,EAAA,CAAS;AAAA,EAAA,EAAA,CAClD,EAAA,CACD;AAEF;AAEA,MAAME,IAA4BM,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK7BC,EAAM,QAAQ,SAASA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA;AAAA;AAAA,GAItFF,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA,cAITC,EAAM,WAAW;AAAA,gBACfA,EAAM,QAAQ;AAAA;AAAA;"}

package/SelectedItems.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { styled as e } from "styled-components";
+import { token as l } from "@bynder/design-system";
+import { AssetItem as r } from "./AssetItem.js";
+import { CollectionItem as a } from "./CollectionItem.js";
+function f({ selection: i }) {
+  return /* @__PURE__ */ o(n, { "data-testid": "selected-items-list", children: i.map(
+    (t) => t.type === "asset" ? /* @__PURE__ */ o(r, { asset: t.value }, t.value.id) : /* @__PURE__ */ o(a, { collection: t.value }, t.value.id)
+  ) });
+}
+const n = e.ul`
+	display: flex;
+	flex-direction: column;
+	padding: ${l.spacing3} 0;
+	overflow-y: auto;
+	max-height: 400px;
+	list-style: none;
+	margin: 0;
+
+	li:last-child {
+		border-bottom-width: 0;
+	}
+`;
+export {
+  f as SelectedItems
+};
+//# sourceMappingURL=SelectedItems.js.map

package/SelectedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedItems.js","sources":["../../src/select/current-selection/SelectedItems.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { SelectedItem } from '../SelectionContext';\nimport { AssetItem } from './AssetItem';\nimport { CollectionItem } from './CollectionItem';\n\nexport function SelectedItems({ selection }: { selection: SelectedItem[] }) {\n\treturn (\n\t\t<SelectedItemsListContainer data-testid=\"selected-items-list\">\n\t\t\t{selection.map((selectedItem) =>\n\t\t\t\tselectedItem.type === 'asset' ? (\n\t\t\t\t\t<AssetItem key={selectedItem.value.id} asset={selectedItem.value} />\n\t\t\t\t) : (\n\t\t\t\t\t<CollectionItem key={selectedItem.value.id} collection={selectedItem.value} />\n\t\t\t\t),\n\t\t\t)}\n\t\t</SelectedItemsListContainer>\n\t);\n}\n\nconst SelectedItemsListContainer = styled.ul`\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: ${token.spacing3} 0;\n\toverflow-y: auto;\n\tmax-height: 400px;\n\tlist-style: none;\n\tmargin: 0;\n\n\tli:last-child {\n\t\tborder-bottom-width: 0;\n\t}\n`;\n"],"names":["SelectedItems","selection","jsx","SelectedItemsListContainer","selectedItem","AssetItem","CollectionItem","styled","token"],"mappings":";;;;;AAOO,SAASA,EAAc,EAAE,WAAAC,KAA4C;AAC3E,SACC,gBAAAC,EAACC,GAAA,EAA2B,eAAY,uBACtC,UAAAF,EAAU;AAAA,IAAI,CAACG,MACfA,EAAa,SAAS,UACrB,gBAAAF,EAACG,GAAA,EAAsC,OAAOD,EAAa,SAA3CA,EAAa,MAAM,EAA+B,IAElE,gBAAAF,EAACI,GAAA,EAA2C,YAAYF,EAAa,MAAA,GAAhDA,EAAa,MAAM,EAAoC;AAAA,EAAA,GAG/E;AAEF;AAEA,MAAMD,IAA6BI,EAAO;AAAA;AAAA;AAAA,YAG9BC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/SelectionContext.js

@@ -0,0 +1,144 @@
+import { jsx as O } from "react/jsx-runtime";
+import { createContext as j, useState as v, useEffect as p, useMemo as k, useContext as q } from "react";
+import { getAssetsByMediaId as B } from "./filterAssets.js";
+import { isErr as I } from "./result.type.js";
+import { useSelectionMode as L, useConfig as T } from "./ConfigContext.js";
+import { useAuth as V } from "./LoginContext.js";
+import { useDat as _ } from "./useDatStore.js";
+const C = j(null);
+function W(t) {
+  const [s, i] = v([]), [f, g] = v([]), [a, S] = v(), u = z(a), h = L(), { transformation: o } = _();
+  p(() => {
+    S(
+      (t.preselectedAssetIds ?? []).filter((e) => !!e).map((e) => window.btoa("(Asset_id " + e + ")"))
+    );
+  }, [t.preselectedAssetIds]), p(() => {
+    u.length && x(u);
+  }, [u]), p(() => {
+    o && Object.keys(o).length && (m(), x([o?.asset]));
+  }, [o]);
+  function d(e) {
+    e.tag === "Loaded" && e.value && g(e.value);
+  }
+  function y() {
+    i((e) => {
+      const n = f.filter(
+        (l) => !e.some((c) => c.value.id === l.id)
+      );
+      return [
+        ...e,
+        ...n.map((l) => ({
+          type: "asset",
+          value: l
+        }))
+      ];
+    });
+  }
+  function m() {
+    i([]);
+  }
+  function x(e) {
+    i((n) => {
+      const l = e.filter((c) => !A(n, c));
+      return [
+        ...n,
+        ...l.map((c) => ({
+          type: "asset",
+          value: c
+        }))
+      ];
+    });
+  }
+  function M(e) {
+    s.some((n) => n.value.id === e.id) ? i([]) : i([{ type: "asset", value: e }]);
+  }
+  function P(e) {
+    h !== "MultiSelect" ? M(e[0]) : i((n) => {
+      const l = e.filter(
+        (r) => !A(n, r)
+      ), c = e.filter(
+        (r) => A(n, r)
+      );
+      return [
+        ...n.filter(
+          (r) => !c.some(
+            (b) => b.id === r.value.id
+          )
+        ),
+        ...l.map((r) => ({
+          type: "asset",
+          value: r
+        }))
+      ];
+    });
+  }
+  function E(e) {
+    i((n) => A(n, e) ? n.filter(
+      (l) => l.value.id !== e.id
+    ) : [
+      ...n,
+      {
+        type: "collection",
+        value: e
+      }
+    ]);
+  }
+  const R = k(
+    () => ({
+      selection: s,
+      preselectedAssetIds: a,
+      clear: m,
+      selectAssets: x,
+      toggleAssets: P,
+      toggleCollection: E,
+      selectAll: y,
+      setAllAssets: d
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s, f]
+  );
+  return /* @__PURE__ */ O(C.Provider, { value: R, children: t.children });
+}
+function A(t, s) {
+  return t.some((i) => i.value.id === s.id);
+}
+function w() {
+  const t = q(C);
+  if (t === null)
+    throw new Error("useSelection must be used with a SelectionProvider");
+  return t;
+}
+function X() {
+  const { selection: t } = w();
+  return t.filter((s) => s.type === "asset").map((s) => s.value.id);
+}
+function Y() {
+  const { selection: t } = w();
+  return t.filter((s) => s.type === "collection").map((s) => s.value.id);
+}
+function z(t) {
+  const [s, i] = v([]), { selectionMode: f, language: g, noCache: a } = T(), S = V();
+  let u = !1;
+  const h = async (o) => {
+    if (o.length) {
+      const d = await B({ ids: o, auth: S, language: g, noCache: a });
+      u || I(d) || (d.value?.sort((y, m) => o.indexOf(y.id) - o.indexOf(m.id)), i(d.value ?? []));
+    }
+  };
+  return p(() => {
+    if (t) {
+      let o = t ?? [];
+      f !== "MultiSelect" && (o = o[0] ? [o[0]] : []), h(o);
+    }
+    return () => {
+      u = !0;
+    };
+  }, [t]), s;
+}
+export {
+  W as SelectionProvider,
+  X as useSelectedAssetIds,
+  Y as useSelectedCollectionIds,
+  w as useSelection
+};
+//# sourceMappingURL=SelectionContext.js.map

package/SelectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionContext.js","sources":["../../src/select/SelectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { getAssetsByMediaId } from '../api/filterAssets';\n\nimport { Asset, AssetData } from '../views/asset/asset.type';\nimport { Collection } from '../views/collection/collection.types';\nimport { isErr } from '../auth/result.type';\nimport { useSelectionMode, useConfig } from '../app-config/ConfigContext';\nimport { useAuth } from '../login/LoginContext';\nimport { useDat } from '@src/store/useDatStore';\n\nexport type SelectedAsset = { type: 'asset'; value: Asset };\nexport type SelectedCollection = { type: 'collection'; value: Collection };\n\nexport type SelectedItem = SelectedAsset | SelectedCollection;\n\ninterface Context {\n\tselection: SelectedItem[];\n\tpreselectedAssetIds?: string[];\n\tclear: () => void;\n\tselectAll: () => void;\n\tselectAssets: (assets: Asset[]) => void;\n\ttoggleAssets: (assets: Asset[]) => void;\n\ttoggleCollection: (collection: Collection) => void;\n\tsetAllAssets: (assetData: AssetData) => void;\n}\n\nconst SelectionContext = createContext<Context | null>(null);\n\n/* NOTE: I have assumed in the logic here that IDs are unique, even between\n * assets and collections, as would be the case with UUIDs. */\nexport function SelectionProvider(props: {\n\tpreselectedAssetIds: string[];\n\tchildren: React.ReactNode;\n}) {\n\tconst [selection, setSelection] = useState<SelectedItem[]>([]);\n\tconst [allAssetsStore, setAllAssetsStore] = useState<Asset[]>([]);\n\tconst [preselectedEncodedIds, setPreselectedEncodedIds] = useState<string[]>();\n\tconst preselectedAssets = usePreselectedAssets(preselectedEncodedIds);\n\tconst selectionMode = useSelectionMode();\n\tconst { transformation } = useDat();\n\n\tuseEffect(() => {\n\t\tsetPreselectedEncodedIds(\n\t\t\t(props.preselectedAssetIds ?? [])\n\t\t\t\t.filter((id) => !!id)\n\t\t\t\t.map((id) => window.btoa('(Asset_id ' + id + ')')),\n\t\t);\n\t}, [props.preselectedAssetIds]);\n\n\tuseEffect(() => {\n\t\tif (preselectedAssets.length) {\n\t\t\tselectAssets(preselectedAssets);\n\t\t}\n\t}, [preselectedAssets]);\n\n\tuseEffect(() => {\n\t\t// If we do a new DAT transformation, automatically select that asset\n\t\tif (transformation && Object.keys(transformation).length) {\n\t\t\tclear();\n\t\t\tselectAssets([transformation?.asset]);\n\t\t}\n\t}, [transformation]);\n\n\tfunction setAllAssets(assetData: AssetData) {\n\t\tif (assetData.tag === 'Loaded' && assetData.value) {\n\t\t\tsetAllAssetsStore(assetData.value);\n\t\t}\n\t}\n\n\tfunction selectAll() {\n\t\tsetSelection((prevState) => {\n\t\t\tconst newAssets = allAssetsStore.filter(\n\t\t\t\t(asset) => !prevState.some((selectedItem) => selectedItem.value.id === asset.id),\n\t\t\t);\n\n\t\t\treturn [\n\t\t\t\t...prevState,\n\t\t\t\t...newAssets.map<SelectedItem>((asset) => ({\n\t\t\t\t\ttype: 'asset',\n\t\t\t\t\tvalue: asset,\n\t\t\t\t})),\n\t\t\t];\n\t\t});\n\t}\n\n\tfunction clear() {\n\t\tsetSelection([]);\n\t}\n\n\tfunction selectAssets(assets: Asset[]) {\n\t\tsetSelection((prevSelectedItems) => {\n\t\t\tconst assetstoAdd = assets.filter((asset) => !isInSelection(prevSelectedItems, asset));\n\n\t\t\treturn [\n\t\t\t\t...prevSelectedItems,\n\t\t\t\t...assetstoAdd.map<SelectedItem>((asset) => ({\n\t\t\t\t\ttype: 'asset',\n\t\t\t\t\tvalue: asset,\n\t\t\t\t})),\n\t\t\t];\n\t\t});\n\t}\n\n\tfunction toggleAsset(asset: Asset) {\n\t\tif (selection.some((item) => item.value.id === asset.id)) {\n\t\t\tsetSelection([]);\n\t\t} else {\n\t\t\tsetSelection([{ type: 'asset', value: asset }]);\n\t\t}\n\t}\n\n\tfunction toggleAssets(assets: Asset[]) {\n\t\tif (selectionMode !== 'MultiSelect') {\n\t\t\ttoggleAsset(assets[0]);\n\t\t} else {\n\t\t\tsetSelection((prevSelectedItems) => {\n\t\t\t\tconst assetstoAdd = assets.filter(\n\t\t\t\t\t(asset) => !isInSelection(prevSelectedItems, asset),\n\t\t\t\t);\n\t\t\t\tconst assetsToRemove = assets.filter((asset) =>\n\t\t\t\t\tisInSelection(prevSelectedItems, asset),\n\t\t\t\t);\n\n\t\t\t\tconst prevSelectedItemsAfterRemoval = prevSelectedItems.filter(\n\t\t\t\t\t(selectedItem) =>\n\t\t\t\t\t\t!assetsToRemove.some(\n\t\t\t\t\t\t\t(assetToRemove) => assetToRemove.id === selectedItem.value.id,\n\t\t\t\t\t\t),\n\t\t\t\t);\n\n\t\t\t\treturn [\n\t\t\t\t\t...prevSelectedItemsAfterRemoval,\n\t\t\t\t\t...assetstoAdd.map<SelectedItem>((asset) => ({\n\t\t\t\t\t\ttype: 'asset',\n\t\t\t\t\t\tvalue: asset,\n\t\t\t\t\t})),\n\t\t\t\t];\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction toggleCollection(collection: Collection) {\n\t\tsetSelection((prevSelectedItems) => {\n\t\t\tif (isInSelection(prevSelectedItems, collection)) {\n\t\t\t\treturn prevSelectedItems.filter(\n\t\t\t\t\t(selectedItem) => selectedItem.value.id !== collection.id,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn [\n\t\t\t\t...prevSelectedItems,\n\t\t\t\t{\n\t\t\t\t\ttype: 'collection',\n\t\t\t\t\tvalue: collection,\n\t\t\t\t},\n\t\t\t];\n\t\t});\n\t}\n\n\tconst selectionContextValue = useMemo(\n\t\t() => ({\n\t\t\tselection,\n\t\t\tpreselectedAssetIds: preselectedEncodedIds,\n\t\t\tclear,\n\t\t\tselectAssets,\n\t\t\ttoggleAssets,\n\t\t\ttoggleCollection,\n\t\t\tselectAll,\n\t\t\tsetAllAssets,\n\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[selection, allAssetsStore],\n\t);\n\n\treturn (\n\t\t<SelectionContext.Provider value={selectionContextValue}>\n\t\t\t{props.children}\n\t\t</SelectionContext.Provider>\n\t);\n}\n\nfunction isInSelection(selection: SelectedItem[], item: Asset | Collection) {\n\treturn selection.some((selectedItem) => selectedItem.value.id === item.id);\n}\n\nexport function useSelection() {\n\tconst context = useContext(SelectionContext);\n\n\tif (context === null) {\n\t\tthrow new Error('useSelection must be used with a SelectionProvider');\n\t}\n\n\treturn context;\n}\n\nexport function useSelectedAssetIds() {\n\tconst { selection } = useSelection();\n\n\treturn selection\n\t\t.filter((selectedItem) => selectedItem.type === 'asset')\n\t\t.map((asset) => asset.value.id);\n}\n\nexport function useSelectedCollectionIds() {\n\tconst { selection } = useSelection();\n\n\treturn selection\n\t\t.filter((selectedItem) => selectedItem.type === 'collection')\n\t\t.map((asset) => asset.value.id);\n}\n\nfunction usePreselectedAssets(preselectedAssetIds?: string[]): Asset[] {\n\tconst [preselectedAssets, setPreselectedAssets] = useState<Asset[]>([]);\n\tconst { selectionMode, language, noCache } = useConfig();\n\tconst auth = useAuth();\n\tlet cancelRequestActions = false;\n\n\tconst getPreselectedAssets = async (assetIds: string[]) => {\n\t\tif (assetIds.length) {\n\t\t\tconst assets = await getAssetsByMediaId({ ids: assetIds, auth, language, noCache });\n\n\t\t\tif (!cancelRequestActions) {\n\t\t\t\tif (!isErr(assets)) {\n\t\t\t\t\tassets.value?.sort((a, b) => assetIds.indexOf(a.id) - assetIds.indexOf(b.id));\n\t\t\t\t\tsetPreselectedAssets(assets.value ?? []);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (preselectedAssetIds) {\n\t\t\tlet preselected = preselectedAssetIds ?? [];\n\n\t\t\tif (selectionMode !== 'MultiSelect') {\n\t\t\t\tpreselected = preselected[0] ? [preselected[0]] : [];\n\t\t\t}\n\n\t\t\tgetPreselectedAssets(preselected);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// eslint-disable-next-line\n\t\t\tcancelRequestActions = true;\n\t\t};\n\t}, [preselectedAssetIds]);\n\n\treturn preselectedAssets;\n}\n"],"names":["SelectionContext","createContext","SelectionProvider","props","selection","setSelection","useState","allAssetsStore","setAllAssetsStore","preselectedEncodedIds","setPreselectedEncodedIds","preselectedAssets","usePreselectedAssets","selectionMode","useSelectionMode","transformation","useDat","useEffect","id","selectAssets","clear","setAllAssets","assetData","selectAll","prevState","newAssets","asset","selectedItem","assets","prevSelectedItems","assetstoAdd","isInSelection","toggleAsset","item","toggleAssets","assetsToRemove","assetToRemove","toggleCollection","collection","selectionContextValue","useMemo","useSelection","context","useContext","useSelectedAssetIds","useSelectedCollectionIds","preselectedAssetIds","setPreselectedAssets","language","noCache","useConfig","auth","useAuth","cancelRequestActions","getPreselectedAssets","assetIds","getAssetsByMediaId","isErr","a","b","preselected"],"mappings":"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"}

package/SelectionFooter.js

@@ -0,0 +1,65 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import d from "styled-components";
+import { token as n, Button as r } from "@bynder/design-system";
+import { IconSteps as b } from "@bynder/icons";
+import { Dropdown as v } from "./Dropdown.js";
+import { __ as o } from "./index2.js";
+import { useSelection as w } from "./SelectionContext.js";
+import { AddMedia as C } from "./AddMedia.js";
+import { SelectedItems as A } from "./SelectedItems.js";
+import { useConfig as I } from "./ConfigContext.js";
+import { useRouterSelectors as k } from "./useRouterStore.js";
+import { Tooltip as M } from "./Tooltip.js";
+import { useSimilaritySearchStore as _ } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as $ } from "./getSimilarityAssets.js";
+function L() {
+  const { selection: i, clear: a, selectAll: p } = w(), { selectionMode: l, selectAllOption: f } = I(), g = k.use.page(), { setIsSelected: S, isEnabled: u } = _(), { search: h, resetData: x } = $(), s = i.length >= 1 ? i.filter(
+    (t) => t.type === "asset" && t.value.__typename === "Image"
+  ).map((t) => t.value.databaseId ? t.value.databaseId : t.value.id) : [], y = () => {
+    x(), S(!0), h(s), a();
+  }, c = i.length;
+  return c === 0 ? null : /* @__PURE__ */ m(j, { "data-testid": "selection-footer", children: [
+    /* @__PURE__ */ m(D, { children: [
+      /* @__PURE__ */ e(
+        v,
+        {
+          buttonKind: "secondary",
+          direction: "Up",
+          title: o("View {} selected").replace("{}", c.toString()),
+          children: () => /* @__PURE__ */ e(A, { selection: i })
+        }
+      ),
+      l === "MultiSelect" && f && g.page === "assets" && /* @__PURE__ */ e(r, { variant: "secondary", onClick: p, children: o("Select all") }),
+      /* @__PURE__ */ e(r, { variant: "clean", onClick: a, children: o("Clear selection") })
+    ] }),
+    l === "MultiSelect" && u && s.length > 0 && /* @__PURE__ */ e(M, { text: o("Show similar"), margin: "right", marginAmount: "spacing3", children: /* @__PURE__ */ e(
+      r,
+      {
+        variant: "clean",
+        icon: /* @__PURE__ */ e(b, {}),
+        "aria-label": o("Show similar"),
+        onClick: y
+      }
+    ) }),
+    /* @__PURE__ */ e(C, { selection: i })
+  ] });
+}
+const j = d.div`
+	display: flex;
+	flex-shrink: 0;
+	z-index: 10;
+	height: ${n.layoutSpacing5};
+	padding: ${n.spacing6};
+	align-items: center;
+	box-shadow: 0 -1px 0 0 rgba(0, 34, 51, 0.1), 0 -1px 6px 0 rgba(0, 34, 51, 0.1);
+	animation: var(--fade-in-down);
+`, D = d.span`
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	gap: ${n.spacing2};
+`;
+export {
+  L as SelectionFooter
+};
+//# sourceMappingURL=SelectionFooter.js.map

package/SelectionFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionFooter.js","sources":["../../src/select/SelectionFooter.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button, token } from '@bynder/design-system';\n\nimport { IconSteps } from '@bynder/icons';\nimport { Dropdown } from '../common/components/dropdown/Dropdown';\nimport { __ } from '../localization';\nimport { useSelection, SelectedAsset } from './SelectionContext';\nimport { AddMedia } from './add-media/AddMedia';\nimport { SelectedItems } from './current-selection/SelectedItems';\nimport { useConfig } from '../app-config/ConfigContext';\nimport { useRouterSelectors } from '@src/store/useRouterStore';\nimport { Tooltip } from '@src/common/components/Tooltip';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\nimport { useSimilarityAssets } from '@src/api/getSimilarityAssets';\n\nexport function SelectionFooter() {\n\tconst { selection, clear: clearSelection, selectAll } = useSelection();\n\tconst { selectionMode, selectAllOption } = useConfig();\n\tconst page = useRouterSelectors.use.page();\n\tconst { setIsSelected, isEnabled: isSimilaritySearchEnabled } = useSimilaritySearchStore();\n\tconst { search, resetData } = useSimilarityAssets();\n\n\tconst selectionForSearch =\n\t\tselection.length >= 1\n\t\t\t? selection\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(item): item is SelectedAsset =>\n\t\t\t\t\t\t\titem.type === 'asset' && item.value.__typename === 'Image',\n\t\t\t\t\t)\n\t\t\t\t\t.map((item) => (item.value.databaseId ? item.value.databaseId : item.value.id))\n\t\t\t: [];\n\n\tconst handleSimilaritySearch = () => {\n\t\tresetData();\n\t\tsetIsSelected(true);\n\t\tsearch(selectionForSearch);\n\t\tclearSelection();\n\t};\n\n\tconst count = selection.length;\n\n\tif (count === 0) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Container data-testid=\"selection-footer\">\n\t\t\t<SelectedAssetsContainer>\n\t\t\t\t<Dropdown\n\t\t\t\t\tbuttonKind=\"secondary\"\n\t\t\t\t\tdirection=\"Up\"\n\t\t\t\t\ttitle={__('View {} selected').replace('{}', count.toString())}\n\t\t\t\t>\n\t\t\t\t\t{() => <SelectedItems selection={selection} />}\n\t\t\t\t</Dropdown>\n\n\t\t\t\t{selectionMode === 'MultiSelect' && selectAllOption && page.page === 'assets' && (\n\t\t\t\t\t<Button variant=\"secondary\" onClick={selectAll}>\n\t\t\t\t\t\t{__('Select all')}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\n\t\t\t\t<Button variant=\"clean\" onClick={clearSelection}>\n\t\t\t\t\t{__('Clear selection')}\n\t\t\t\t</Button>\n\t\t\t</SelectedAssetsContainer>\n\n\t\t\t{selectionMode === 'MultiSelect' &&\n\t\t\t\tisSimilaritySearchEnabled &&\n\t\t\t\tselectionForSearch.length > 0 && (\n\t\t\t\t\t<Tooltip text={__('Show similar')} margin=\"right\" marginAmount=\"spacing3\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"clean\"\n\t\t\t\t\t\t\ticon={<IconSteps />}\n\t\t\t\t\t\t\taria-label={__('Show similar')}\n\t\t\t\t\t\t\tonClick={handleSimilaritySearch}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\n\t\t\t<AddMedia selection={selection} />\n\t\t</Container>\n\t);\n}\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tz-index: 10;\n\theight: ${token.layoutSpacing5};\n\tpadding: ${token.spacing6};\n\talign-items: center;\n\tbox-shadow: 0 -1px 0 0 rgba(0, 34, 51, 0.1), 0 -1px 6px 0 rgba(0, 34, 51, 0.1);\n\tanimation: var(--fade-in-down);\n`;\n\nconst SelectedAssetsContainer = styled.span`\n\tdisplay: flex;\n\tflex-grow: 1;\n\talign-items: center;\n\tgap: ${token.spacing2};\n`;\n"],"names":["SelectionFooter","selection","clearSelection","selectAll","useSelection","selectionMode","selectAllOption","useConfig","page","useRouterSelectors","setIsSelected","isSimilaritySearchEnabled","useSimilaritySearchStore","search","resetData","useSimilarityAssets","selectionForSearch","item","handleSimilaritySearch","count","jsxs","Container","SelectedAssetsContainer","jsx","Dropdown","__","SelectedItems","Button","Tooltip","IconSteps","AddMedia","styled","token"],"mappings":";;;;;;;;;;;;;;AAgBO,SAASA,IAAkB;AACjC,QAAM,EAAE,WAAAC,GAAW,OAAOC,GAAgB,WAAAC,EAAA,IAAcC,EAAA,GAClD,EAAE,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAA,GACrCC,IAAOC,EAAmB,IAAI,KAAA,GAC9B,EAAE,eAAAC,GAAe,WAAWC,EAAA,IAA8BC,EAAA,GAC1D,EAAE,QAAAC,GAAQ,WAAAC,EAAA,IAAcC,EAAA,GAExBC,IACLf,EAAU,UAAU,IACjBA,EACC;AAAA,IACA,CAACgB,MACAA,EAAK,SAAS,WAAWA,EAAK,MAAM,eAAe;AAAA,EAAA,EAEpD,IAAI,CAACA,MAAUA,EAAK,MAAM,aAAaA,EAAK,MAAM,aAAaA,EAAK,MAAM,EAAG,IAC9E,CAAA,GAEEC,IAAyB,MAAM;AACpC,IAAAJ,EAAA,GACAJ,EAAc,EAAI,GAClBG,EAAOG,CAAkB,GACzBd,EAAA;AAAA,EACD,GAEMiB,IAAQlB,EAAU;AAExB,SAAIkB,MAAU,IACN,OAIP,gBAAAC,EAACC,GAAA,EAAU,eAAY,oBACtB,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,YAAW;AAAA,UACX,WAAU;AAAA,UACV,OAAOC,EAAG,kBAAkB,EAAE,QAAQ,MAAMN,EAAM,UAAU;AAAA,UAE3D,UAAA,MAAM,gBAAAI,EAACG,GAAA,EAAc,WAAAzB,EAAA,CAAsB;AAAA,QAAA;AAAA,MAAA;AAAA,MAG5CI,MAAkB,iBAAiBC,KAAmBE,EAAK,SAAS,YACpE,gBAAAe,EAACI,GAAA,EAAO,SAAQ,aAAY,SAASxB,GACnC,UAAAsB,EAAG,YAAY,GACjB;AAAA,MAGD,gBAAAF,EAACI,KAAO,SAAQ,SAAQ,SAASzB,GAC/B,UAAAuB,EAAG,iBAAiB,EAAA,CACtB;AAAA,IAAA,GACD;AAAA,IAECpB,MAAkB,iBAClBM,KACAK,EAAmB,SAAS,KAC3B,gBAAAO,EAACK,GAAA,EAAQ,MAAMH,EAAG,cAAc,GAAG,QAAO,SAAQ,cAAa,YAC9D,UAAA,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,SAAQ;AAAA,QACR,wBAAOE,GAAA,EAAU;AAAA,QACjB,cAAYJ,EAAG,cAAc;AAAA,QAC7B,SAASP;AAAA,MAAA;AAAA,IAAA,GAEX;AAAA,IAGF,gBAAAK,EAACO,KAAS,WAAA7B,EAAA,CAAsB;AAAA,EAAA,GACjC;AAEF;AAEA,MAAMoB,IAAYU,EAAO;AAAA;AAAA;AAAA;AAAA,WAIdC,EAAM,cAAc;AAAA,YACnBA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,GAMpBV,IAA0BS,EAAO;AAAA;AAAA;AAAA;AAAA,QAI/BC,EAAM,QAAQ;AAAA;"}

package/ShadowRoot.js

@@ -0,0 +1,11 @@
+import { jsx as t, Fragment as n } from "react/jsx-runtime";
+import { createContext as a, useContext as c } from "react";
+import { ShadowRootInternal as i } from "./ShadowRootInternal.js";
+const e = a("parent");
+function d({ children: o, isContainerMode: r = !1 }) {
+  return c(e) === "parent" ? /* @__PURE__ */ t(e.Provider, { value: "child", children: /* @__PURE__ */ t(i, { isContainerMode: r, children: o }) }) : /* @__PURE__ */ t(n, { children: o });
+}
+export {
+  d as ShadowRoot
+};
+//# sourceMappingURL=ShadowRoot.js.map

package/ShadowRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowRoot.js","sources":["../../src/style/shadowroot/ShadowRoot.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nimport { ShadowRootInternal } from './ShadowRootInternal';\n\nconst ShadowRootContext = createContext<'parent' | 'child'>('parent');\n\ninterface ShadowRootProps {\n\tchildren: React.ReactNode;\n\tisContainerMode?: boolean;\n}\n\n/**\n * This component will create a shadow root if it is the first ShadowRoot in the tree.\n * Otherwise, it will just render it's children. This is useful as we don't always know\n * which component will be first in the tree, especially when the components are used\n * externally from the npm package.\n */\nexport function ShadowRoot({ children, isContainerMode = false }: ShadowRootProps) {\n\tconst context = useContext(ShadowRootContext);\n\n\tif (context === 'parent') {\n\t\treturn (\n\t\t\t<ShadowRootContext.Provider value=\"child\">\n\t\t\t\t<ShadowRootInternal isContainerMode={isContainerMode}>\n\t\t\t\t\t{children}\n\t\t\t\t</ShadowRootInternal>\n\t\t\t</ShadowRootContext.Provider>\n\t\t);\n\t}\n\n\treturn <>{children}</>; // eslint-disable-line\n}\n"],"names":["ShadowRootContext","createContext","ShadowRoot","children","isContainerMode","useContext","jsx","ShadowRootInternal"],"mappings":";;;AAIA,MAAMA,IAAoBC,EAAkC,QAAQ;AAa7D,SAASC,EAAW,EAAE,UAAAC,GAAU,iBAAAC,IAAkB,MAA0B;AAGlF,SAFgBC,EAAWL,CAAiB,MAE5B,WAEd,gBAAAM,EAACN,EAAkB,UAAlB,EAA2B,OAAM,SACjC,UAAA,gBAAAM,EAACC,GAAA,EAAmB,iBAAAH,GAClB,UAAAD,EAAA,CACF,EAAA,CACD,2BAIQ,UAAAA,GAAS;AACpB;"}

package/ShadowRootInternal.js

@@ -0,0 +1,78 @@
+import { jsx as r } from "react/jsx-runtime";
+import l, { useState as c, useEffect as d } from "react";
+import { createPortal as u } from "react-dom";
+import i from "styled-components";
+import { RootElementProvider as m } from "./RootElementContext.js";
+import p from "./Styles.css.js";
+import { DesignSystemProvider as h } from "./DesignSystemContext.js";
+function S(o) {
+  try {
+    return o.attachShadow({ mode: "open" });
+  } catch {
+    return null;
+  }
+}
+function x({ children: o, isContainerMode: e = !1 }) {
+  const t = l.useRef(null), [n, a] = c(null);
+  return d(() => {
+    if (t.current === null)
+      return;
+    const s = S(t.current);
+    w(s), s && f(document.head, y), a(s ?? t.current);
+  }, []), /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      style: {
+        display: "flex",
+        height: "100%"
+      },
+      "data-testid": "root",
+      children: n && /* @__PURE__ */ r(m, { value: n, children: /* @__PURE__ */ r(h, { children: u(
+        /* @__PURE__ */ r(
+          v,
+          {
+            $isContainerMode: e,
+            "data-testid": "ShadowRootInternalContainer",
+            children: o
+          }
+        ),
+        n
+      ) }) })
+    }
+  );
+}
+function w(o) {
+  const t = "@import url(https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/css/vendor/font-awesome.min.css);" + p;
+  f(o ?? document.head, t);
+}
+function f(o, e) {
+  const t = document.createElement("style"), n = document.createTextNode(e);
+  t.appendChild(n), o.appendChild(t);
+}
+const y = `
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'),
+         local('SourceSansPro-Regular'),
+         url('https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/fonts/SourceSans/sourcesanspro-regular.woff2') format('woff2'),
+         url('https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/fonts/SourceSans/sourcesanspro-regular.woff') format('woff');
+  }
+  
+  @font-face {
+    font-family: "FontAwesome";
+    src: url("https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
+         url("https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff");
+    font-weight: 400;
+    font-style: normal;
+  }
+`, v = i.div`
+	width: ${(o) => o.$isContainerMode ? "100%" : "auto"};
+	font-family: 'Source Sans Pro';
+`;
+export {
+  x as ShadowRootInternal
+};
+//# sourceMappingURL=ShadowRootInternal.js.map

package/ShadowRootInternal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowRootInternal.js","sources":["../../src/style/shadowroot/ShadowRootInternal.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled from 'styled-components';\n\nimport { RootElementProvider } from '../RootElementContext';\n// eslint-disable-next-line\nimport styles from './Styles.css?inline';\nimport { DesignSystemProvider } from '../DesignSystemContext';\n\ninterface Props {\n\tchildren: React.ReactNode;\n\tisContainerMode?: boolean;\n}\n\ninterface ContainerProps {\n\t$isContainerMode: boolean;\n}\n\nfunction createShadowRoot(node: Element): ShadowRoot | null {\n\ttry {\n\t\treturn node.attachShadow({ mode: 'open' });\n\t} catch (e) {\n\t\treturn null;\n\t}\n}\n\n/**\n * This component creates a shadow root and injects styling so that outside\n * styling do not interfere with compactview and compactview styling does\n * not interfere with the DOM it's rendered in.\n */\nexport function ShadowRootInternal({ children, isContainerMode = false }: Props) {\n\tconst node = React.useRef<HTMLDivElement | null>(null);\n\tconst [root, setRoot] = useState<ShadowRoot | HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (node.current === null) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newRoot = createShadowRoot(node.current);\n\n\t\tinjectStyleSheet(newRoot);\n\n\t\tif (newRoot) {\n\t\t\t/**\n\t\t\t * If we're creating a Shadow Root, web-fonts still need to be loaded\n\t\t\t * outside of it by creating a style tag, otherwise the browser won't\n\t\t\t * load them.\n\t\t\t */\n\t\t\tinjectStyleElement(document.head, fontFaceStyles);\n\t\t}\n\n\t\tsetRoot(newRoot ?? node.current);\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tref={node}\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\theight: '100%',\n\t\t\t}}\n\t\t\tdata-testid=\"root\"\n\t\t>\n\t\t\t{root && (\n\t\t\t\t<RootElementProvider value={root as HTMLElement}>\n\t\t\t\t\t<DesignSystemProvider>\n\t\t\t\t\t\t{createPortal(\n\t\t\t\t\t\t\t<Container\n\t\t\t\t\t\t\t\t$isContainerMode={isContainerMode}\n\t\t\t\t\t\t\t\tdata-testid=\"ShadowRootInternalContainer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</Container>,\n\t\t\t\t\t\t\troot as Element,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DesignSystemProvider>\n\t\t\t\t</RootElementProvider>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction injectStyleSheet(shadowRoot: ShadowRoot | null) {\n\tconst envBasedImport = `@import url(${process.env.BYNDER_THEMES_CLOUDFRONT_URL}/5.0.5/includes/css/vendor/font-awesome.min.css);`;\n\tconst completeStyles = envBasedImport + styles;\n\tinjectStyleElement(shadowRoot ?? document.head, completeStyles);\n}\n\nfunction injectStyleElement(root: ShadowRoot | Element, styling: string) {\n\t/**\n\t * CSSStyleSheet API could be used here, however at this it is moment only\n\t * supported in Chromium-based browsers. In this particular use case the\n\t * benefits (e.g. being able to share styles accross different element/shadowroots,\n\t * or updating stylesheets programtically) do not warrant having a different\n\t * implementation for different browsers.\n\t */\n\tconst styleElement = document.createElement('style');\n\tconst textNode = document.createTextNode(styling);\n\tstyleElement.appendChild(textNode);\n\troot.appendChild(styleElement);\n}\n\nconst fontFaceStyles = `\n@font-face {\n    font-family: 'Source Sans Pro';\n    font-style: normal;\n    font-weight: 400;\n    src: local('Source Sans Pro Regular'),\n         local('SourceSansPro-Regular'),\n         url('${process.env.BYNDER_THEMES_CLOUDFRONT_URL}/5.0.5/includes/fonts/SourceSans/sourcesanspro-regular.woff2') format('woff2'),\n         url('${process.env.BYNDER_THEMES_CLOUDFRONT_URL}/5.0.5/includes/fonts/SourceSans/sourcesanspro-regular.woff') format('woff');\n  }\n  \n  @font-face {\n    font-family: \"FontAwesome\";\n    src: url(\"${process.env.BYNDER_THEMES_CLOUDFRONT_URL}/5.0.5/includes/fonts/fontawesome-webfont.woff2?v=4.7.0\") format(\"woff2\"),\n         url(\"${process.env.BYNDER_THEMES_CLOUDFRONT_URL}/5.0.5/includes/fonts/fontawesome-webfont.woff?v=4.7.0\") format(\"woff\");\n    font-weight: 400;\n    font-style: normal;\n  }\n`;\n\nconst Container = styled.div<ContainerProps>`\n\twidth: ${(props) => (props.$isContainerMode ? '100%' : 'auto')};\n\tfont-family: 'Source Sans Pro';\n`;\n"],"names":["createShadowRoot","node","ShadowRootInternal","children","isContainerMode","React","root","setRoot","useState","useEffect","newRoot","injectStyleSheet","injectStyleElement","fontFaceStyles","jsx","RootElementProvider","DesignSystemProvider","createPortal","Container","shadowRoot","completeStyles","styles","styling","styleElement","textNode","styled","props"],"mappings":";;;;;;;AAkBA,SAASA,EAAiBC,GAAkC;AAC3D,MAAI;AACH,WAAOA,EAAK,aAAa,EAAE,MAAM,QAAQ;AAAA,EAC1C,QAAY;AACX,WAAO;AAAA,EACR;AACD;AAOO,SAASC,EAAmB,EAAE,UAAAC,GAAU,iBAAAC,IAAkB,MAAgB;AAChF,QAAMH,IAAOI,EAAM,OAA8B,IAAI,GAC/C,CAACC,GAAMC,CAAO,IAAIC,EAA0C,IAAI;AAEtE,SAAAC,EAAU,MAAM;AACf,QAAIR,EAAK,YAAY;AACpB;AAGD,UAAMS,IAAUV,EAAiBC,EAAK,OAAO;AAE7C,IAAAU,EAAiBD,CAAO,GAEpBA,KAMHE,EAAmB,SAAS,MAAMC,CAAc,GAGjDN,EAAQG,KAAWT,EAAK,OAAO;AAAA,EAChC,GAAG,CAAA,CAAE,GAGJ,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAKb;AAAA,MACL,OAAO;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAET,eAAY;AAAA,MAEX,eACA,gBAAAa,EAACC,GAAA,EAAoB,OAAOT,GAC3B,4BAACU,GAAA,EACC,UAAAC;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACA,kBAAkBd;AAAA,YAClB,eAAY;AAAA,YAEX,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFG;AAAA,MAAA,EACD,CACD,EAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEA,SAASK,EAAiBQ,GAA+B;AAExD,QAAMC,IADiB,sGACiBC;AACxC,EAAAT,EAAmBO,KAAc,SAAS,MAAMC,CAAc;AAC/D;AAEA,SAASR,EAAmBN,GAA4BgB,GAAiB;AAQxE,QAAMC,IAAe,SAAS,cAAc,OAAO,GAC7CC,IAAW,SAAS,eAAeF,CAAO;AAChD,EAAAC,EAAa,YAAYC,CAAQ,GACjClB,EAAK,YAAYiB,CAAY;AAC9B;AAEA,MAAMV,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoBjBK,IAAYO,EAAO;AAAA,UACf,CAACC,MAAWA,EAAM,mBAAmB,SAAS,MAAO;AAAA;AAAA;"}

package/Shield.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "react";
+import { Oops as o } from "./Oops.js";
+class l extends e.Component {
+  constructor(r) {
+    super(r), this.state = { error: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { error: r };
+  }
+  render() {
+    return this.state.error ? /* @__PURE__ */ t(
+      o,
+      {
+        error: this.state.error,
+        sentryClient: this.props.sentryClient,
+        onRetry: () => this.setState({ error: null })
+      }
+    ) : this.props.children;
+  }
+}
+export {
+  l as Shield
+};
+//# sourceMappingURL=Shield.js.map

package/Shield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shield.js","sources":["../../src/error-handling/Shield.tsx"],"sourcesContent":["import React from 'react';\nimport { BrowserClient } from '@sentry/browser';\n\nimport { Oops } from './Oops';\n\ninterface Props {\n\tchildren: React.ReactNode;\n\tsentryClient?: BrowserClient;\n}\n\ninterface State {\n\terror: Error | null;\n}\n\nexport class Shield extends React.Component<Props, State> {\n\tconstructor(props: Props) {\n\t\tsuper(props);\n\t\tthis.state = { error: null };\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\treturn { error };\n\t}\n\n\trender() {\n\t\tif (this.state.error) {\n\t\t\treturn (\n\t\t\t\t<Oops\n\t\t\t\t\terror={this.state.error}\n\t\t\t\t\tsentryClient={this.props.sentryClient}\n\t\t\t\t\tonRetry={() => this.setState({ error: null })}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"names":["Shield","React","props","error","jsx","Oops"],"mappings":";;;AAcO,MAAMA,UAAeC,EAAM,UAAwB;AAAA,EACzD,YAAYC,GAAc;AACzB,UAAMA,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAA;AAAA,EACvB;AAAA,EAEA,OAAO,yBAAyBC,GAAc;AAC7C,WAAO,EAAE,OAAAA,EAAA;AAAA,EACV;AAAA,EAEA,SAAS;AACR,WAAI,KAAK,MAAM,QAEb,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAO,KAAK,MAAM;AAAA,QAClB,cAAc,KAAK,MAAM;AAAA,QACzB,SAAS,MAAM,KAAK,SAAS,EAAE,OAAO,MAAM;AAAA,MAAA;AAAA,IAAA,IAKxC,KAAK,MAAM;AAAA,EACnB;AACD;"}

package/Skeleton.js

@@ -0,0 +1,43 @@
+import { jsx as i } from "react/jsx-runtime";
+import { keyframes as n, styled as o } from "styled-components";
+import { token as e } from "@bynder/design-system";
+function g({ width: t = 100 }) {
+  return /* @__PURE__ */ i(a, { width: t, "data-testid": "skeleton", children: "‌" });
+}
+const r = n`
+	0% {
+		left: -500px;
+	}
+	100% {
+		left: 100%;
+	}
+`, a = o.span`
+	overflow: hidden;
+	display: inline-block;
+	position: relative;
+	width: ${({ width: t }) => t}px;
+	margin: ${e.spacing3} ${e.spacing3};
+	height: ${e.spacing5};
+	background-color: ${e.gray50};
+	border-radius: ${e.brandRadiusBase};
+
+	&before {
+		position: absolute;
+		top: 0;
+		height: 100%;
+		animation: ${r} 1.5s ease-in-out infinite;
+		content: '';
+		width: 500px;
+		left: -500px;
+		background-image: linear-gradient(
+			90deg,
+			rgba(255, 255, 255, 0),
+			rgba(255, 255, 255, 0.6),
+			rgba(255, 255, 255, 0)
+		);
+	}
+`;
+export {
+  g as Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../src/common/components/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { keyframes, styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\n\ninterface Props {\n\twidth?: number;\n}\n\nexport function Skeleton({ width = 100 }: Props) {\n\treturn (\n\t\t<SkeletonContainer width={width} data-testid=\"skeleton\">\n\t\t\t{'\\u200c'}\n\t\t</SkeletonContainer>\n\t);\n}\n\nconst CvSkeletonProgress = keyframes`\n\t0% {\n\t\tleft: -500px;\n\t}\n\t100% {\n\t\tleft: 100%;\n\t}\n`;\n\nconst SkeletonContainer = styled.span<{ width: number }>`\n\toverflow: hidden;\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: ${({ width }) => width}px;\n\tmargin: ${token.spacing3} ${token.spacing3};\n\theight: ${token.spacing5};\n\tbackground-color: ${token.gray50};\n\tborder-radius: ${token.brandRadiusBase};\n\n\t&before {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\theight: 100%;\n\t\tanimation: ${CvSkeletonProgress} 1.5s ease-in-out infinite;\n\t\tcontent: '';\n\t\twidth: 500px;\n\t\tleft: -500px;\n\t\tbackground-image: linear-gradient(\n\t\t\t90deg,\n\t\t\trgba(255, 255, 255, 0),\n\t\t\trgba(255, 255, 255, 0.6),\n\t\t\trgba(255, 255, 255, 0)\n\t\t);\n\t}\n`;\n"],"names":["Skeleton","width","jsx","SkeletonContainer","CvSkeletonProgress","keyframes","styled","token"],"mappings":";;;AAQO,SAASA,EAAS,EAAE,OAAAC,IAAQ,OAAc;AAChD,SACC,gBAAAC,EAACC,GAAA,EAAkB,OAAAF,GAAc,eAAY,YAC3C,UAAA,KACF;AAEF;AAEA,MAAMG,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASrBF,IAAoBG,EAAO;AAAA;AAAA;AAAA;AAAA,UAIvB,CAAC,EAAE,OAAAL,EAAA,MAAYA,CAAK;AAAA,WACnBM,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA,WAChCA,EAAM,QAAQ;AAAA,qBACJA,EAAM,MAAM;AAAA,kBACfA,EAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMxBH,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/SmartFilterContent.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import o from "styled-components";
+import { token as p } from "@bynder/design-system";
+import "./MetapropertyFilterContent.js";
+o.div`
+	display: flex;
+	flex-wrap: wrap;
+	gap: ${p.spacing4};
+	overflow: auto;
+`;
+//# sourceMappingURL=SmartFilterContent.js.map