@bynder/compact-view 5.1.3 → 5.1.4

package/LoginContext.js

@@ -0,0 +1,85 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as x, useContext as g, useState as C, useEffect as c } from "react";
+import { authenticate as I } from "./auth.js";
+import { useAuthInformation as D } from "./useAuthInformation.js";
+import { useLocalization as v } from "./index2.js";
+import { ShadowRoot as w } from "./ShadowRoot.js";
+import { LoginComponent as y } from "./LoginComponent.js";
+import { isOk as R } from "./result.type.js";
+import { logger as m } from "./logger.js";
+import { useAccountDomain as E } from "./useAccountDomain.js";
+import { Shield as M } from "./Shield.js";
+import { RefreshingSpinner as j } from "./RefreshingSpinner.js";
+const r = x(null);
+function z(t) {
+  v(t.language ?? "en_US");
+  const [i, s, f] = D(), [o, l, d] = E(
+    t.portal?.url ?? i.accountDomain
+  ), [a, h] = C(!1);
+  c(() => {
+    t.authentication?.hideLogout && !t.authentication?.getAccessToken && m.error(
+      "The hideLogout property can only be used in combination with getAccessToken property"
+    );
+  }, [t.authentication?.hideLogout, t.authentication?.getAccessToken]), c(() => {
+    t.authentication?.getAccessToken && s({
+      getAccessToken: t.authentication.getAccessToken,
+      accountDomain: t.portal?.url
+    });
+  }, [t.authentication?.getAccessToken]), c(() => {
+    let e = !0;
+    return a === !0 && I(o).then((u) => {
+      e && (A(u), h(!1));
+    }), () => {
+      e = !1;
+    };
+  }, [a, o]);
+  function A(e) {
+    if (R(e)) {
+      const { accessToken: u, refreshToken: S, expiresIn: b } = e.value;
+      s({
+        getAccessToken: () => u,
+        refreshToken: S,
+        expiresIn: b,
+        accountDomain: o
+      });
+    } else
+      m.error(e.error);
+  }
+  function k() {
+    h(!0);
+  }
+  function L() {
+    f(), t.onLogout?.();
+  }
+  const T = {
+    ...i,
+    logout: L,
+    hideLogout: !!t.authentication?.getAccessToken && t.authentication.hideLogout
+  };
+  switch (i.status) {
+    case "authenticated":
+      return /* @__PURE__ */ n(r.Provider, { value: T, children: t.children });
+    case "not-authenticated":
+      return /* @__PURE__ */ n(w, { isContainerMode: !0, children: /* @__PURE__ */ n(
+        y,
+        {
+          domainValue: o,
+          domainStatus: d,
+          onChangeDomain: l,
+          isSubmitting: a,
+          isEditable: t.portal?.editable ?? !0,
+          onSubmit: k
+        }
+      ) });
+    case "refreshing":
+      return /* @__PURE__ */ n(j, {});
+  }
+}
+const K = (t) => /* @__PURE__ */ n(M, { children: /* @__PURE__ */ n(z, { ...t }) }), N = () => g(r)?.status === "authenticated" || !1, Q = () => g(r);
+export {
+  r as AuthContext,
+  K as Login,
+  Q as useAuth,
+  N as useIsLoggedIn
+};
+//# sourceMappingURL=LoginContext.js.map

package/LoginContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginContext.js","sources":["../../src/login/LoginContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nimport { authenticate, AuthenticationResponse } from '../auth/auth';\nimport { useAuthInformation, AuthInformationState } from '../auth/useAuthInformation';\nimport { useLocalization } from '../localization';\nimport { ShadowRoot } from '../style/shadowroot/ShadowRoot';\nimport { LoginComponent } from './LoginComponent';\nimport { isOk, Result } from '../auth/result.type';\nimport { logger } from '../utils/logger';\nimport { useAccountDomain } from './useAccountDomain';\nimport { Shield } from '../error-handling/Shield';\nimport { Config, PortalConfig } from '../app-config/appConfig.type';\nimport { RefreshingSpinner } from './components/RefreshingSpinner';\n\ntype ContextValue = AuthInformationState & { logout: () => void; hideLogout?: boolean };\n\nexport const AuthContext = createContext<ContextValue | null>(null);\n\ninterface Props {\n\tportal?: PortalConfig;\n\tlanguage?: string;\n\tchildren: React.ReactNode;\n\tauthentication?: Config['authentication'];\n\tonLogout?: Config['onLogout'];\n}\n\nfunction Login(props: Props) {\n\tuseLocalization(props.language ?? 'en_US');\n\tconst [auth, setAuth, resetAuth] = useAuthInformation();\n\tconst [domainInput, setDomainInput, domainStatus] = useAccountDomain(\n\t\tprops.portal?.url ?? auth.accountDomain,\n\t);\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (props.authentication?.hideLogout && !props.authentication?.getAccessToken) {\n\t\t\tlogger.error(\n\t\t\t\t'The hideLogout property can only be used in combination with getAccessToken property',\n\t\t\t);\n\t\t}\n\t}, [props.authentication?.hideLogout, props.authentication?.getAccessToken]);\n\n\tuseEffect(() => {\n\t\tif (props.authentication?.getAccessToken) {\n\t\t\t// authenticate by provided accessToken\n\t\t\tsetAuth({\n\t\t\t\tgetAccessToken: props.authentication.getAccessToken,\n\t\t\t\taccountDomain: props.portal?.url,\n\t\t\t});\n\t\t}\n\t\t// We only want to set the authentication if getAccessToken changes.\n\t\t// If the portal changes, the user will be able to provide their\n\t\t// credentials and we retrieve an accessToken via that process.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [props.authentication?.getAccessToken]);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\n\t\tif (isSubmitting === true) {\n\t\t\tauthenticate(domainInput).then((result) => {\n\t\t\t\t// Make sure that state is only set if component is still mounted\n\t\t\t\tif (isMounted) {\n\t\t\t\t\tsetResult(result);\n\t\t\t\t\tsetIsSubmitting(false);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\t// Clean up\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [isSubmitting, domainInput]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tfunction setResult(result: Result<AuthenticationResponse, string>) {\n\t\tif (isOk(result)) {\n\t\t\tconst { accessToken, refreshToken, expiresIn } = result.value;\n\t\t\tsetAuth({\n\t\t\t\tgetAccessToken: () => accessToken,\n\t\t\t\trefreshToken,\n\t\t\t\texpiresIn,\n\t\t\t\taccountDomain: domainInput,\n\t\t\t});\n\t\t} else {\n\t\t\tlogger.error(result.error);\n\t\t}\n\t}\n\n\tfunction login() {\n\t\t// Setting isSubmitting to true will start authentication in useEffect\n\t\tsetIsSubmitting(true);\n\t}\n\n\tfunction logout() {\n\t\tresetAuth();\n\n\t\tprops.onLogout?.();\n\t}\n\n\tconst authContext = {\n\t\t...auth,\n\t\tlogout,\n\t\thideLogout: !!props.authentication?.getAccessToken && props.authentication.hideLogout,\n\t};\n\n\tswitch (auth.status) {\n\t\tcase 'authenticated':\n\t\t\treturn (\n\t\t\t\t<AuthContext.Provider value={authContext}>{props.children}</AuthContext.Provider>\n\t\t\t);\n\n\t\tcase 'not-authenticated':\n\t\t\treturn (\n\t\t\t\t<ShadowRoot isContainerMode>\n\t\t\t\t\t<LoginComponent\n\t\t\t\t\t\tdomainValue={domainInput}\n\t\t\t\t\t\tdomainStatus={domainStatus}\n\t\t\t\t\t\tonChangeDomain={setDomainInput}\n\t\t\t\t\t\tisSubmitting={isSubmitting}\n\t\t\t\t\t\tisEditable={props.portal?.editable ?? true}\n\t\t\t\t\t\tonSubmit={login}\n\t\t\t\t\t/>\n\t\t\t\t</ShadowRoot>\n\t\t\t);\n\n\t\tcase 'refreshing':\n\t\t\treturn <RefreshingSpinner />;\n\t}\n}\n\n// eslint-disable-next-line react/no-multi-comp\nconst LoginWithShield = (props: Props) => (\n\t<Shield>\n\t\t<Login {...props} />\n\t</Shield>\n);\n\nexport { LoginWithShield as Login };\n\nexport const useIsLoggedIn = () => useContext(AuthContext)?.status === 'authenticated' || false;\nexport const useAuth = () => useContext(AuthContext);\n"],"names":["AuthContext","createContext","Login","props","useLocalization","auth","setAuth","resetAuth","useAuthInformation","domainInput","setDomainInput","domainStatus","useAccountDomain","isSubmitting","setIsSubmitting","useState","useEffect","logger","isMounted","authenticate","result","setResult","isOk","accessToken","refreshToken","expiresIn","login","logout","authContext","jsx","ShadowRoot","LoginComponent","RefreshingSpinner","LoginWithShield","Shield","useIsLoggedIn","useContext","useAuth"],"mappings":";;;;;;;;;;;;AAgBO,MAAMA,IAAcC,EAAmC,IAAI;AAUlE,SAASC,EAAMC,GAAc;AAC5B,EAAAC,EAAgBD,EAAM,YAAY,OAAO;AACzC,QAAM,CAACE,GAAMC,GAASC,CAAS,IAAIC,EAAA,GAC7B,CAACC,GAAaC,GAAgBC,CAAY,IAAIC;AAAA,IACnDT,EAAM,QAAQ,OAAOE,EAAK;AAAA,EAAA,GAErB,CAACQ,GAAcC,CAAe,IAAIC,EAAS,EAAK;AAEtD,EAAAC,EAAU,MAAM;AACf,IAAIb,EAAM,gBAAgB,cAAc,CAACA,EAAM,gBAAgB,kBAC9Dc,EAAO;AAAA,MACN;AAAA,IAAA;AAAA,EAGH,GAAG,CAACd,EAAM,gBAAgB,YAAYA,EAAM,gBAAgB,cAAc,CAAC,GAE3Ea,EAAU,MAAM;AACf,IAAIb,EAAM,gBAAgB,kBAEzBG,EAAQ;AAAA,MACP,gBAAgBH,EAAM,eAAe;AAAA,MACrC,eAAeA,EAAM,QAAQ;AAAA,IAAA,CAC7B;AAAA,EAMH,GAAG,CAACA,EAAM,gBAAgB,cAAc,CAAC,GAEzCa,EAAU,MAAM;AACf,QAAIE,IAAY;AAEhB,WAAIL,MAAiB,MACpBM,EAAaV,CAAW,EAAE,KAAK,CAACW,MAAW;AAE1C,MAAIF,MACHG,EAAUD,CAAM,GAChBN,EAAgB,EAAK;AAAA,IAEvB,CAAC,GAIK,MAAM;AACZ,MAAAI,IAAY;AAAA,IACb;AAAA,EACD,GAAG,CAACL,GAAcJ,CAAW,CAAC;AAE9B,WAASY,EAAUD,GAAgD;AAClE,QAAIE,EAAKF,CAAM,GAAG;AACjB,YAAM,EAAE,aAAAG,GAAa,cAAAC,GAAc,WAAAC,EAAA,IAAcL,EAAO;AACxD,MAAAd,EAAQ;AAAA,QACP,gBAAgB,MAAMiB;AAAA,QACtB,cAAAC;AAAA,QACA,WAAAC;AAAA,QACA,eAAehB;AAAA,MAAA,CACf;AAAA,IACF;AACC,MAAAQ,EAAO,MAAMG,EAAO,KAAK;AAAA,EAE3B;AAEA,WAASM,IAAQ;AAEhB,IAAAZ,EAAgB,EAAI;AAAA,EACrB;AAEA,WAASa,IAAS;AACjB,IAAApB,EAAA,GAEAJ,EAAM,WAAA;AAAA,EACP;AAEA,QAAMyB,IAAc;AAAA,IACnB,GAAGvB;AAAA,IACH,QAAAsB;AAAA,IACA,YAAY,CAAC,CAACxB,EAAM,gBAAgB,kBAAkBA,EAAM,eAAe;AAAA,EAAA;AAG5E,UAAQE,EAAK,QAAA;AAAA,IACZ,KAAK;AACJ,+BACEL,EAAY,UAAZ,EAAqB,OAAO4B,GAAc,YAAM,UAAS;AAAA,IAG5D,KAAK;AACJ,aACC,gBAAAC,EAACC,GAAA,EAAW,iBAAe,IAC1B,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,aAAatB;AAAA,UACb,cAAAE;AAAA,UACA,gBAAgBD;AAAA,UAChB,cAAAG;AAAA,UACA,YAAYV,EAAM,QAAQ,YAAY;AAAA,UACtC,UAAUuB;AAAA,QAAA;AAAA,MAAA,GAEZ;AAAA,IAGF,KAAK;AACJ,+BAAQM,GAAA,EAAkB;AAAA,EAAA;AAE7B;AAGA,MAAMC,IAAkB,CAAC9B,MACxB,gBAAA0B,EAACK,KACA,UAAA,gBAAAL,EAAC3B,GAAA,EAAO,GAAGC,EAAA,CAAO,EAAA,CACnB,GAKYgC,IAAgB,MAAMC,EAAWpC,CAAW,GAAG,WAAW,mBAAmB,IAC7EqC,IAAU,MAAMD,EAAWpC,CAAW;"}

package/MetapropertyFilterContent.js

@@ -0,0 +1,25 @@
+import "react/jsx-runtime";
+import i from "styled-components";
+import { token as o } from "@bynder/design-system";
+import "./MetapropertyOption.js";
+i.div`
+	h1 {
+		padding: ${o.spacing5};
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: ${o.fontSize100};
+		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);
+	}
+`;
+i.ul`
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0;
+	width: 100%;
+	list-style: none;
+	margin: 0;
+`;
+//# sourceMappingURL=MetapropertyFilterContent.js.map

package/MetapropertyFilterContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetapropertyFilterContent.js","sources":["../../src/filter/filters/metaproperty/MetapropertyFilterContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\n\nimport { MetapropertyOptionComponent, MetapropertyOptionType } from './MetapropertyOption';\n\nexport interface MetapropertyType {\n\t__typename: 'Metaproperty';\n\tid: string;\n\tlabel: string;\n\tzIndex: number;\n\toptions: MetapropertyOptionType[];\n\tshowInGridView: boolean;\n\tshowInListView: boolean;\n}\n\ninterface MetapropertyProps {\n\tmetaproperty: MetapropertyType;\n\tselectedOptionIds: string[];\n\tisLoading: boolean;\n\tonAddOption: (metapropertyOption: MetapropertyOptionType) => void;\n\tonRemoveOption: (metapropertyOption: MetapropertyOptionType) => void;\n}\n\nexport function MetaPropertyFilterContent(props: MetapropertyProps) {\n\treturn (\n\t\t<FilterContent data-testid=\"metaproperty-filter-content\">\n\t\t\t<h1 title={props.metaproperty.label}>{props.metaproperty.label}</h1>\n\n\t\t\t<FilterList>\n\t\t\t\t{props.metaproperty.options.map((metapropertyOption) => (\n\t\t\t\t\t<MetapropertyOptionComponent\n\t\t\t\t\t\tkey={metapropertyOption.id}\n\t\t\t\t\t\tmetapropertyOption={metapropertyOption}\n\t\t\t\t\t\tselectedOptionIds={props.selectedOptionIds}\n\t\t\t\t\t\tisLoading={props.isLoading}\n\t\t\t\t\t\tonAddOption={() => props.onAddOption(metapropertyOption)}\n\t\t\t\t\t\tonRemoveOption={() => props.onRemoveOption(metapropertyOption)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</FilterList>\n\t\t</FilterContent>\n\t);\n}\n\nexport interface Tag {\n\tid: string;\n\tname: string;\n\tassetCount: number;\n}\n\nconst FilterContent = styled.div`\n\th1 {\n\t\tpadding: ${token.spacing5};\n\t\tmargin: 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tfont-size: ${token.fontSize100};\n\t\tborder-bottom: 1px solid rgba(3, 16, 38, 0.1);\n\t\tbox-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);\n\t}\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`;\n"],"names":["styled","token"],"mappings":";;;;AAmDsBA,EAAO;AAAA;AAAA,aAEhBC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,eAKZA,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAMbD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/MetapropertyOption.js

@@ -0,0 +1,24 @@
+import "react/jsx-runtime";
+import { styled as r } from "styled-components";
+import { token as i } from "@bynder/design-system";
+import "@bynder/icons";
+import "./Checkbox.styles.js";
+r.span`
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	color: rgba(0, 34, 51, 0.8);
+	background-color: #f7f8f9;
+	border: 1px solid rgba(0, 34, 51, 0.1);
+	border-radius: 16px;
+
+	svg {
+		max-width: ${i.spacing5};
+		max-height: ${i.spacing5};
+		margin-right: ${i.spacing2};
+	}
+`;
+r.i`
+	margin-right: ${i.spacing4};
+`;
+//# sourceMappingURL=MetapropertyOption.js.map

package/MetapropertyOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetapropertyOption.js","sources":["../../src/filter/filters/metaproperty/MetapropertyOption.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token, TruncatedText } from '@bynder/design-system';\n\nimport { IconCheckCircle } from '@bynder/icons';\nimport {\n\tContent,\n\tLabel,\n\tListItem,\n\tStyledCheckboxWrapper,\n} from '../../../common/components/Checkbox.styles';\n\nexport interface MetapropertyOptionType {\n\tid: string;\n\tlabel: string;\n\tassetCount: number;\n}\n\ninterface MetapropertyOptionProps {\n\tmetapropertyOption: MetapropertyOptionType;\n\tselectedOptionIds?: string[];\n\tisLoading?: boolean;\n\tonAddOption: () => void;\n\tonRemoveOption: () => void;\n}\n\nexport function MetapropertyOptionComponent(props: MetapropertyOptionProps) {\n\tconst isChecked =\n\t\tprops.selectedOptionIds !== undefined &&\n\t\tprops.selectedOptionIds.includes(props.metapropertyOption.id);\n\n\tfunction handleClick() {\n\t\tif (isChecked) {\n\t\t\tprops.onRemoveOption();\n\t\t}\n\t\t// Adding a filter while loading can break the UI\n\t\telse if (!props.isLoading) {\n\t\t\tprops.onAddOption();\n\t\t}\n\t}\n\n\treturn (\n\t\t<ListItem>\n\t\t\t<StyledCheckboxWrapper $isChecked={isChecked} $isLoading={Boolean(props.isLoading)}>\n\t\t\t\t<Content\n\t\t\t\t\t$isChecked={isChecked}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tdata-testid=\"metaproperty-option\"\n\t\t\t\t>\n\t\t\t\t\t<Label title={props.metapropertyOption.label}>\n\t\t\t\t\t\t<SitemapIcon className=\"fa fa-sitemap\" />\n\t\t\t\t\t\t<TruncatedText>{props.metapropertyOption.label}</TruncatedText>\n\t\t\t\t\t</Label>\n\t\t\t\t\t<AssetCount className=\"fade-in-down\">\n\t\t\t\t\t\t{isChecked ? <IconCheckCircle /> : null}{' '}\n\t\t\t\t\t\t{props.metapropertyOption.assetCount}\n\t\t\t\t\t</AssetCount>\n\t\t\t\t</Content>\n\t\t\t</StyledCheckboxWrapper>\n\t\t</ListItem>\n\t);\n}\n\nconst AssetCount = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0 8px;\n\tcolor: rgba(0, 34, 51, 0.8);\n\tbackground-color: #f7f8f9;\n\tborder: 1px solid rgba(0, 34, 51, 0.1);\n\tborder-radius: 16px;\n\n\tsvg {\n\t\tmax-width: ${token.spacing5};\n\t\tmax-height: ${token.spacing5};\n\t\tmargin-right: ${token.spacing2};\n\t}\n`;\n\nconst SitemapIcon = styled.i`\n\tmargin-right: ${token.spacing4};\n`;\n"],"names":["styled","token"],"mappings":";;;;;AA+DmBA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUXC,EAAM,QAAQ;AAAA,gBACbA,EAAM,QAAQ;AAAA,kBACZA,EAAM,QAAQ;AAAA;AAAA;AAIZD,EAAO;AAAA,iBACVC,EAAM,QAAQ;AAAA;"}

package/Modal.js

@@ -0,0 +1,48 @@
+import { jsx as t, Fragment as u } from "react/jsx-runtime";
+import { createContext as p, useState as f, useMemo as h, useEffect as x, useContext as g } from "react";
+import { createPortal as v } from "react-dom";
+import a from "styled-components";
+import { token as o } from "@bynder/design-system";
+import { ShadowRoot as C } from "./ShadowRoot.js";
+const d = p(null), N = () => g(d);
+function P({
+  children: i,
+  isOpen: l = !0,
+  style: s,
+  onClose: n = () => {
+  }
+}) {
+  const [r, m] = f(null), c = h(() => ({ onClose: n }), [n]);
+  return x(() => {
+    const e = document.createElement("div");
+    return e.dataset.testId = "CompactViewContainer", document.body.appendChild(e), m(e), () => {
+      e.remove();
+    };
+  }, []), l ? /* @__PURE__ */ t(d.Provider, { value: c, children: r && /* @__PURE__ */ t(u, { children: v(
+    /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(w, { className: "z-a-lot", children: /* @__PURE__ */ t(b, { style: s, "data-testid": "modal", children: i }) }) }),
+    r
+  ) }) }) : null;
+}
+const w = a.div`
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	padding: ${o.spacing5};
+	position: fixed;
+	animation: var(--fade-in-down);
+	background: ${o.gray100a};
+`, b = a.div`
+	box-shadow: 0 2px 12px 0 rgba(0, 34, 51, 0.1);
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	border-radius: ${o.radiusBase};
+`;
+export {
+  P as Modal,
+  N as useModalContext
+};
+//# sourceMappingURL=Modal.js.map

package/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/common/components/Modal.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\n\nimport { ShadowRoot } from '@src/style/shadowroot/ShadowRoot';\n\nconst ModalContext = createContext<{ onClose: () => void } | null>(null);\n\nexport const useModalContext = () => useContext(ModalContext);\n\ninterface Props {\n\tchildren: React.ReactNode;\n\tisOpen?: boolean;\n\tstyle?: React.CSSProperties;\n\tonClose?: () => void;\n}\n\nexport function Modal({\n\tchildren,\n\tisOpen = true,\n\tstyle,\n\tonClose = () => {\n\t\t/** do nothing */\n\t},\n}: Props) {\n\tconst [node, setNode] = useState<Element | null>(null);\n\tconst modalContextValue = useMemo(() => ({ onClose }), [onClose]);\n\n\tuseEffect(() => {\n\t\t// Create modal div to add content to\n\t\tconst el = document.createElement('div');\n\t\tel.dataset.testId = 'CompactViewContainer';\n\t\tdocument.body.appendChild(el);\n\t\tsetNode(el);\n\n\t\treturn () => {\n\t\t\tel.remove();\n\t\t};\n\t}, []);\n\n\tif (!isOpen) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ModalContext.Provider value={modalContextValue}>\n\t\t\t{node && (\n\t\t\t\t<>\n\t\t\t\t\t{createPortal(\n\t\t\t\t\t\t<ShadowRoot>\n\t\t\t\t\t\t\t<Container className=\"z-a-lot\">\n\t\t\t\t\t\t\t\t<ShadowModal style={style} data-testid=\"modal\">\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</ShadowModal>\n\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t</ShadowRoot>,\n\t\t\t\t\t\tnode as Element,\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</ModalContext.Provider>\n\t);\n}\n\nconst Container = styled.div`\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${token.spacing5};\n\tposition: fixed;\n\tanimation: var(--fade-in-down);\n\tbackground: ${token.gray100a};\n`;\n\nconst ShadowModal = styled.div`\n\tbox-shadow: 0 2px 12px 0 rgba(0, 34, 51, 0.1);\n\theight: 100%;\n\twidth: 100%;\n\toverflow: hidden;\n\tborder-radius: ${token.radiusBase};\n`;\n"],"names":["ModalContext","createContext","useModalContext","useContext","Modal","children","isOpen","style","onClose","node","setNode","useState","modalContextValue","useMemo","useEffect","el","jsx","Fragment","createPortal","ShadowRoot","Container","ShadowModal","styled","token"],"mappings":";;;;;;AAOA,MAAMA,IAAeC,EAA8C,IAAI,GAE1DC,IAAkB,MAAMC,EAAWH,CAAY;AASrD,SAASI,EAAM;AAAA,EACrB,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,SAAAC,IAAU,MAAM;AAAA,EAEhB;AACD,GAAU;AACT,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAyB,IAAI,GAC/CC,IAAoBC,EAAQ,OAAO,EAAE,SAAAL,MAAY,CAACA,CAAO,CAAC;AAchE,SAZAM,EAAU,MAAM;AAEf,UAAMC,IAAK,SAAS,cAAc,KAAK;AACvC,WAAAA,EAAG,QAAQ,SAAS,wBACpB,SAAS,KAAK,YAAYA,CAAE,GAC5BL,EAAQK,CAAE,GAEH,MAAM;AACZ,MAAAA,EAAG,OAAA;AAAA,IACJ;AAAA,EACD,GAAG,CAAA,CAAE,GAEAT,sBAKHN,EAAa,UAAb,EAAsB,OAAOY,GAC5B,eACA,gBAAAI,EAAAC,GAAA,EACE,UAAAC;AAAA,IACA,gBAAAF,EAACG,GAAA,EACA,UAAA,gBAAAH,EAACI,GAAA,EAAU,WAAU,WACpB,UAAA,gBAAAJ,EAACK,GAAA,EAAY,OAAAd,GAAc,eAAY,SACrC,UAAAF,EAAA,CACF,GACD,GACD;AAAA,IACAI;AAAA,EAAA,GAEF,EAAA,CAEF,IAnBO;AAqBT;AAEA,MAAMW,IAAYE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAObC,EAAM,QAAQ;AAAA;AAAA;AAAA,eAGXA,EAAM,QAAQ;AAAA,GAGvBF,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKTC,EAAM,UAAU;AAAA;"}

package/NoResults.js

@@ -0,0 +1,51 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import i from "styled-components";
+import { IconSearch as s } from "@bynder/icons";
+import { token as t, Button as c } from "@bynder/design-system";
+import { __ as n } from "./index2.js";
+import { DocumentIcon as l } from "./DocumentIcon.js";
+function b(r) {
+  return /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ o(p, { children: [
+      /* @__PURE__ */ e(l, {}),
+      /* @__PURE__ */ e(d, {})
+    ] }),
+    /* @__PURE__ */ e(m, { children: n("No results found") }),
+    /* @__PURE__ */ e(f, { children: n("Try adjusting the filter to find assets.") }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(c, { variant: "primary", title: n("Reset filters"), onClick: r.onReset, children: n("Reset filters") }) })
+  ] });
+}
+const a = i.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`, p = i.div`
+	background-color: ${t.gray25};
+	border-radius: 50%;
+	width: 160px;
+	height: 160px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`, d = i(s)`
+	position: absolute;
+	margin: ${t.spacing2} 0 0 1px;
+	color: ${t.gray300};
+	width: 36px;
+	height: 36px;
+`, m = i.h1`
+	margin-top: ${t.spacing6};
+	font-size: ${t.fontSize400};
+`, f = i.span`
+	margin-top: ${t.spacing5};
+	color: ${t.colorTextDisabled};
+`, h = i.div`
+	margin-top: ${t.spacing7};
+`;
+export {
+  b as NoResults
+};
+//# sourceMappingURL=NoResults.js.map

package/NoResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoResults.js","sources":["../../src/common/components/NoResults.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconSearch } from '@bynder/icons';\nimport { Button, token } from '@bynder/design-system';\n\nimport { __ } from '../../localization';\nimport { DocumentIcon } from './DocumentIcon';\n\ninterface Props {\n\tonReset: () => void;\n}\n\nexport function NoResults(props: Props) {\n\treturn (\n\t\t<Container>\n\t\t\t<IconContainer>\n\t\t\t\t<DocumentIcon />\n\t\t\t\t<SearchIcon />\n\t\t\t</IconContainer>\n\n\t\t\t<Title>{__('No results found')}</Title>\n\n\t\t\t<Text>{__('Try adjusting the filter to find assets.')}</Text>\n\n\t\t\t<StyledButtonWrapper>\n\t\t\t\t<Button variant=\"primary\" title={__('Reset filters')} onClick={props.onReset}>\n\t\t\t\t\t{__('Reset filters')}\n\t\t\t\t</Button>\n\t\t\t</StyledButtonWrapper>\n\t\t</Container>\n\t);\n}\n\nconst Container = styled.div`\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst IconContainer = styled.div`\n\tbackground-color: ${token.gray25};\n\tborder-radius: 50%;\n\twidth: 160px;\n\theight: 160px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst SearchIcon = styled(IconSearch)`\n\tposition: absolute;\n\tmargin: ${token.spacing2} 0 0 1px;\n\tcolor: ${token.gray300};\n\twidth: 36px;\n\theight: 36px;\n`;\n\nconst Title = styled.h1`\n\tmargin-top: ${token.spacing6};\n\tfont-size: ${token.fontSize400};\n`;\n\nconst Text = styled.span`\n\tmargin-top: ${token.spacing5};\n\tcolor: ${token.colorTextDisabled};\n`;\n\nconst StyledButtonWrapper = styled.div`\n\tmargin-top: ${token.spacing7};\n`;\n"],"names":["NoResults","props","Container","jsxs","IconContainer","jsx","DocumentIcon","SearchIcon","Title","__","Text","StyledButtonWrapper","Button","styled","token","IconSearch"],"mappings":";;;;;;AAYO,SAASA,EAAUC,GAAc;AACvC,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa;AAAA,wBACbC,GAAA,CAAA,CAAW;AAAA,IAAA,GACb;AAAA,IAEA,gBAAAF,EAACG,GAAA,EAAO,UAAAC,EAAG,kBAAkB,EAAA,CAAE;AAAA,IAE/B,gBAAAJ,EAACK,GAAA,EAAM,UAAAD,EAAG,0CAA0C,EAAA,CAAE;AAAA,sBAErDE,GAAA,EACA,UAAA,gBAAAN,EAACO,GAAA,EAAO,SAAQ,WAAU,OAAOH,EAAG,eAAe,GAAG,SAASR,EAAM,SACnE,UAAAQ,EAAG,eAAe,GACpB,EAAA,CACD;AAAA,EAAA,GACD;AAEF;AAEA,MAAMP,IAAYW,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBT,IAAgBS,EAAO;AAAA,qBACRC,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS3BP,IAAaM,EAAOE,CAAU;AAAA;AAAA,WAEzBD,EAAM,QAAQ;AAAA,UACfA,EAAM,OAAO;AAAA;AAAA;AAAA,GAKjBN,IAAQK,EAAO;AAAA,eACNC,EAAM,QAAQ;AAAA,cACfA,EAAM,WAAW;AAAA,GAGzBJ,IAAOG,EAAO;AAAA,eACLC,EAAM,QAAQ;AAAA,UACnBA,EAAM,iBAAiB;AAAA,GAG3BH,IAAsBE,EAAO;AAAA,eACpBC,EAAM,QAAQ;AAAA;"}

package/Oops.js

@@ -0,0 +1,54 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useState as n, useEffect as p } from "react";
+import a from "styled-components";
+import { logger as d } from "./logger.js";
+import { useRootElement as u } from "./RootElementContext.js";
+import { ErrorMessage as R } from "./ErrorMessage.js";
+import { ReportModal as g } from "./ReportModal.js";
+function j({ error: o, onRetry: r, sentryClient: s }) {
+  const i = u(), [f, e] = n(!1), [l, c] = n(!1);
+  return p(() => {
+    d.error(o);
+  }, [o]), /* @__PURE__ */ m(x, { children: [
+    /* @__PURE__ */ t(
+      R,
+      {
+        isReportSent: l,
+        onClickSend: () => {
+          e(!0);
+        },
+        onClickRetry: r
+      }
+    ),
+    /* @__PURE__ */ t(
+      g,
+      {
+        isOpen: f,
+        error: o,
+        container: i,
+        onDone: () => {
+          s?.captureException(o), e(!1), c(!0);
+        },
+        onCancel: () => {
+          e(!1);
+        }
+      }
+    )
+  ] });
+}
+const x = a.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: ${({ theme: o }) => o.colors?.["ui-0"] || "#fff"};
+	font-family: ${({ theme: o }) => o.fonts?.sans || "sans-serif"};
+	font-size: 1rem;
+	color: ${({ theme: o }) => o.colors?.["body-500"] || "#666"};
+`;
+export {
+  j as Oops
+};
+//# sourceMappingURL=Oops.js.map

package/Oops.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Oops.js","sources":["../../src/error-handling/Oops.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { BrowserClient } from '@sentry/browser';\nimport { logger } from '../utils/logger';\nimport { useRootElement } from '../style/RootElementContext';\nimport { ErrorMessage } from './ErrorMessage';\nimport { ReportModal } from './ReportModal';\n\ninterface Props {\n\terror: Error;\n\tonRetry: () => void;\n\tsentryClient?: BrowserClient;\n}\n\nexport function Oops({ error, onRetry, sentryClient }: Props) {\n\tconst rootElement = useRootElement();\n\n\tconst [isReportModalOpen, setIsReportModalOpen] = useState(false);\n\tconst [isReportSent, setIsReportSent] = useState(false);\n\n\tuseEffect(() => {\n\t\tlogger.error(error);\n\t}, [error]);\n\n\treturn (\n\t\t<Container>\n\t\t\t<ErrorMessage\n\t\t\t\tisReportSent={isReportSent}\n\t\t\t\tonClickSend={() => {\n\t\t\t\t\tsetIsReportModalOpen(true);\n\t\t\t\t}}\n\t\t\t\tonClickRetry={onRetry}\n\t\t\t/>\n\n\t\t\t<ReportModal\n\t\t\t\tisOpen={isReportModalOpen}\n\t\t\t\terror={error}\n\t\t\t\tcontainer={rootElement as Element}\n\t\t\t\tonDone={() => {\n\t\t\t\t\tsentryClient?.captureException(error);\n\t\t\t\t\tsetIsReportModalOpen(false);\n\t\t\t\t\tsetIsReportSent(true);\n\t\t\t\t}}\n\t\t\t\tonCancel={() => {\n\t\t\t\t\tsetIsReportModalOpen(false);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</Container>\n\t);\n}\n\nconst Container = styled.div`\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: ${({ theme }) => theme.colors?.['ui-0'] || '#fff'};\n\tfont-family: ${({ theme }) => theme.fonts?.sans || 'sans-serif'};\n\tfont-size: 1rem;\n\tcolor: ${({ theme }) => theme.colors?.['body-500'] || '#666'};\n`;\n"],"names":["Oops","error","onRetry","sentryClient","rootElement","useRootElement","isReportModalOpen","setIsReportModalOpen","useState","isReportSent","setIsReportSent","useEffect","logger","Container","jsx","ErrorMessage","ReportModal","styled","theme"],"mappings":";;;;;;;AAeO,SAASA,EAAK,EAAE,OAAAC,GAAO,SAAAC,GAAS,cAAAC,KAAuB;AAC7D,QAAMC,IAAcC,EAAA,GAEd,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAC1D,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK;AAEtD,SAAAG,EAAU,MAAM;AACf,IAAAC,EAAO,MAAMX,CAAK;AAAA,EACnB,GAAG,CAACA,CAAK,CAAC,qBAGRY,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,cAAAN;AAAA,QACA,aAAa,MAAM;AAClB,UAAAF,EAAqB,EAAI;AAAA,QAC1B;AAAA,QACA,cAAcL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGf,gBAAAY;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAQV;AAAA,QACR,OAAAL;AAAA,QACA,WAAWG;AAAA,QACX,QAAQ,MAAM;AACb,UAAAD,GAAc,iBAAiBF,CAAK,GACpCM,EAAqB,EAAK,GAC1BG,EAAgB,EAAI;AAAA,QACrB;AAAA,QACA,UAAU,MAAM;AACf,UAAAH,EAAqB,EAAK;AAAA,QAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;AAEA,MAAMM,IAAYI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOV,CAAC,EAAE,OAAAC,QAAYA,EAAM,SAAS,MAAM,KAAK,MAAM;AAAA,gBAC9C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,QAAQ,YAAY;AAAA;AAAA,UAEtD,CAAC,EAAE,OAAAA,QAAYA,EAAM,SAAS,UAAU,KAAK,MAAM;AAAA;"}

package/Option.js

@@ -0,0 +1,50 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { styled as s } from "styled-components";
+import { token as e, TruncatedText as m } from "@bynder/design-system";
+import { IconCheckCircle as a } from "@bynder/icons";
+import { ListItem as h, StyledCheckboxWrapper as g, Content as x } from "./Checkbox.styles.js";
+const j = ({
+  option: o,
+  onClick: c,
+  metapropertyName: l,
+  isSelected: n,
+  metapropertyMultifilter: d,
+  showCount: i = !0,
+  count: p
+}) => /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(g, { $isChecked: n, children: /* @__PURE__ */ t(
+  x,
+  {
+    $isChecked: n,
+    onClick: () => {
+      c(l, o, d);
+    },
+    "data-testid": "metaproperty-option",
+    children: [
+      /* @__PURE__ */ r(m, { children: o.label }),
+      n && !i ? /* @__PURE__ */ r(a, {}) : null,
+      i && /* @__PURE__ */ t(f, { className: "fade-in-down", children: [
+        n ? /* @__PURE__ */ r(a, {}) : null,
+        " ",
+        p
+      ] })
+    ]
+  }
+) }) }), f = s.span`
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	color: rgba(0, 34, 51, 0.8);
+	background-color: #f7f8f9;
+	border: 1px solid rgba(0, 34, 51, 0.1);
+	border-radius: 16px;
+
+	svg {
+		max-width: ${e.spacing5};
+		max-height: ${e.spacing5};
+		margin-right: ${e.spacing2};
+	}
+`;
+export {
+  j as OptionComponent
+};
+//# sourceMappingURL=Option.js.map

package/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../../src/filter/filters/smartfilters/Metaproperties/Option.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token, TruncatedText } from '@bynder/design-system';\n\nimport { IconCheckCircle } from '@bynder/icons';\nimport { Content, ListItem, StyledCheckboxWrapper } from '@src/common/components/Checkbox.styles';\nimport { SmartfilterOption } from '@src/api/rest/types';\n\ntype Props = {\n\toption: SmartfilterOption;\n\tonClick: (\n\t\tmetapropertyName: string,\n\t\toption: SmartfilterOption,\n\t\tmetapropertyMultifilter: boolean,\n\t) => void;\n\tmetapropertyName: string;\n\tisSelected: boolean;\n\tmetapropertyMultifilter: boolean;\n\tshowCount?: boolean;\n\tcount?: number;\n};\n\nconst OptionComponent = ({\n\toption,\n\tonClick,\n\tmetapropertyName,\n\tisSelected,\n\tmetapropertyMultifilter,\n\tshowCount = true,\n\tcount,\n}: Props) => {\n\tconst handleClick = () => {\n\t\tonClick(metapropertyName, option, metapropertyMultifilter);\n\t};\n\n\treturn (\n\t\t<ListItem>\n\t\t\t<StyledCheckboxWrapper $isChecked={isSelected}>\n\t\t\t\t<Content\n\t\t\t\t\t$isChecked={isSelected}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tdata-testid=\"metaproperty-option\"\n\t\t\t\t>\n\t\t\t\t\t<TruncatedText>{option.label}</TruncatedText>\n\t\t\t\t\t{isSelected && !showCount ? <IconCheckCircle /> : null}\n\t\t\t\t\t{showCount && (\n\t\t\t\t\t\t<AssetCount className=\"fade-in-down\">\n\t\t\t\t\t\t\t{isSelected ? <IconCheckCircle /> : null} {count}\n\t\t\t\t\t\t</AssetCount>\n\t\t\t\t\t)}\n\t\t\t\t</Content>\n\t\t\t</StyledCheckboxWrapper>\n\t\t</ListItem>\n\t);\n};\n\nexport { OptionComponent };\n\nconst AssetCount = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0 8px;\n\tcolor: rgba(0, 34, 51, 0.8);\n\tbackground-color: #f7f8f9;\n\tborder: 1px solid rgba(0, 34, 51, 0.1);\n\tborder-radius: 16px;\n\n\tsvg {\n\t\tmax-width: ${token.spacing5};\n\t\tmax-height: ${token.spacing5};\n\t\tmargin-right: ${token.spacing2};\n\t}\n`;\n"],"names":["OptionComponent","option","onClick","metapropertyName","isSelected","metapropertyMultifilter","showCount","count","jsx","ListItem","StyledCheckboxWrapper","jsxs","Content","TruncatedText","IconCheckCircle","AssetCount","styled","token"],"mappings":";;;;;AAsBA,MAAMA,IAAkB,CAAC;AAAA,EACxB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AACD,MAME,gBAAAC,EAACC,GAAA,EACA,UAAA,gBAAAD,EAACE,GAAA,EAAsB,YAAYN,GAClC,UAAA,gBAAAO;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,YAAYR;AAAA,IACZ,SATgB,MAAM;AACzB,MAAAF,EAAQC,GAAkBF,GAAQI,CAAuB;AAAA,IAC1D;AAAA,IAQI,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAA,gBAAAG,EAACK,GAAA,EAAe,YAAO,MAAA,CAAM;AAAA,MAC5BT,KAAc,CAACE,IAAY,gBAAAE,EAACM,KAAgB,IAAK;AAAA,MACjDR,KACA,gBAAAK,EAACI,GAAA,EAAW,WAAU,gBACpB,UAAA;AAAA,QAAAX,IAAa,gBAAAI,EAACM,KAAgB,IAAK;AAAA,QAAK;AAAA,QAAEP;AAAA,MAAA,EAAA,CAC5C;AAAA,IAAA;AAAA,EAAA;AAAA,GAGH,EAAA,CACD,GAMIQ,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUXC,EAAM,QAAQ;AAAA,gBACbA,EAAM,QAAQ;AAAA,kBACZA,EAAM,QAAQ;AAAA;AAAA;"}

package/RefreshingSpinner.js

@@ -0,0 +1,22 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { styled as i } from "styled-components";
+import { Spinner as n } from "./Spinner.js";
+function l() {
+  return /* @__PURE__ */ e(t, { role: "alert", "aria-live": "polite", children: [
+    " ",
+    /* @__PURE__ */ r(n, { isRefreshingSpinner: !0 }),
+    " "
+  ] });
+}
+const t = i.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	background-color: #fff;
+`;
+export {
+  l as RefreshingSpinner
+};
+//# sourceMappingURL=RefreshingSpinner.js.map

package/RefreshingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshingSpinner.js","sources":["../../src/login/components/RefreshingSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { Spinner } from '../../common/components/Spinner';\n\nexport function RefreshingSpinner() {\n\treturn (\n\t\t<RefreshingSpinnerContainer role=\"alert\" aria-live=\"polite\">\n\t\t\t{' '}\n\t\t\t<Spinner isRefreshingSpinner />{' '}\n\t\t</RefreshingSpinnerContainer>\n\t);\n}\n\nconst RefreshingSpinnerContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: #fff;\n`;\n"],"names":["RefreshingSpinner","jsxs","RefreshingSpinnerContainer","jsx","Spinner","styled"],"mappings":";;;AAIO,SAASA,IAAoB;AACnC,SACC,gBAAAC,EAACC,GAAA,EAA2B,MAAK,SAAQ,aAAU,UACjD,UAAA;AAAA,IAAA;AAAA,IACD,gBAAAC,EAACC,GAAA,EAAQ,qBAAmB,GAAA,CAAC;AAAA,IAAG;AAAA,EAAA,GACjC;AAEF;AAEA,MAAMF,IAA6BG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/ReportModal.js

@@ -0,0 +1,51 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import c from "react";
+import i from "styled-components";
+import { token as e, ModalConfirmation as d, Button as l } from "@bynder/design-system";
+import { __ as r } from "./index2.js";
+function $(n) {
+  return /* @__PURE__ */ a(
+    d,
+    {
+      title: r("Send error report"),
+      isOpen: n.isOpen,
+      onClose: n.onCancel,
+      actionPrimary: /* @__PURE__ */ t(l, { variant: "primary", title: r("Send report"), onClick: n.onDone, children: r("Send report") }),
+      actionSecondary: /* @__PURE__ */ t(l, { variant: "secondary", title: r("Cancel"), onClick: n.onCancel, children: r("Cancel") }),
+      container: n.container,
+      children: [
+        /* @__PURE__ */ t(s, { children: r(
+          "We have created a report that you can send us to help us prevent this from happening in the future."
+        ) }),
+        /* @__PURE__ */ t(h, { "data-testid": "error-stack", children: n.error.stack?.split(`
+`).map((o) => /* @__PURE__ */ a(c.Fragment, { children: [
+          o,
+          /* @__PURE__ */ t("br", {})
+        ] }, o)) }),
+        /* @__PURE__ */ t(m, { children: r("We will treat this report as confidential and anonymous.") })
+      ]
+    }
+  );
+}
+const s = i.div`
+	line-height: ${e.lineHeightText};
+`, h = i.div`
+	margin: ${e.spacing5} 0;
+	flex-grow: 1;
+	align-self: stretch;
+	background-color: ${e.gray25};
+	border-radius: ${e.radiusMedium};
+	border: 1px solid ${e.gray200};
+	line-height: ${e.lineHeightText};
+	overflow: scroll;
+	padding: ${e.spacing5} ${e.spacing4};
+	max-height: 200px;
+`, m = i.span`
+	color: ${e.colorTextDisabled};
+	line-height: ${e.lineHeightBase};
+	font-size: ${e.fontSize75};
+`;
+export {
+  $ as ReportModal
+};
+//# sourceMappingURL=ReportModal.js.map

package/ReportModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportModal.js","sources":["../../src/error-handling/ReportModal.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nimport { Button, ModalConfirmation, token } from '@bynder/design-system';\nimport { __ } from '../localization';\n\nexport function ReportModal(props: {\n\tisOpen: boolean;\n\terror: Error;\n\tcontainer: Element;\n\tonDone: () => void;\n\tonCancel: () => void;\n}) {\n\treturn (\n\t\t<ModalConfirmation\n\t\t\ttitle={__('Send error report')}\n\t\t\tisOpen={props.isOpen}\n\t\t\tonClose={props.onCancel}\n\t\t\tactionPrimary={\n\t\t\t\t<Button variant=\"primary\" title={__('Send report')} onClick={props.onDone}>\n\t\t\t\t\t{__('Send report')}\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\tactionSecondary={\n\t\t\t\t<Button variant=\"secondary\" title={__('Cancel')} onClick={props.onCancel}>\n\t\t\t\t\t{__('Cancel')}\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\tcontainer={props.container}\n\t\t>\n\t\t\t<Text>\n\t\t\t\t{__(\n\t\t\t\t\t'We have created a report that you can send us to help us prevent this from happening in the future.',\n\t\t\t\t)}\n\t\t\t</Text>\n\n\t\t\t<ErrorStack data-testid=\"error-stack\">\n\t\t\t\t{props.error.stack?.split('\\n').map((line) => (\n\t\t\t\t\t<React.Fragment key={line}>\n\t\t\t\t\t\t{line}\n\t\t\t\t\t\t<br />\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</ErrorStack>\n\n\t\t\t<Disclaimer>\n\t\t\t\t{__('We will treat this report as confidential and anonymous.')}\n\t\t\t</Disclaimer>\n\t\t</ModalConfirmation>\n\t);\n}\n\nconst Text = styled.div`\n\tline-height: ${token.lineHeightText};\n`;\n\nconst ErrorStack = styled.div`\n\tmargin: ${token.spacing5} 0;\n\tflex-grow: 1;\n\talign-self: stretch;\n\tbackground-color: ${token.gray25};\n\tborder-radius: ${token.radiusMedium};\n\tborder: 1px solid ${token.gray200};\n\tline-height: ${token.lineHeightText};\n\toverflow: scroll;\n\tpadding: ${token.spacing5} ${token.spacing4};\n\tmax-height: 200px;\n`;\n\nconst Disclaimer = styled.span`\n\tcolor: ${token.colorTextDisabled};\n\tline-height: ${token.lineHeightBase};\n\tfont-size: ${token.fontSize75};\n`;\n"],"names":["ReportModal","props","jsxs","ModalConfirmation","__","jsx","Button","Text","ErrorStack","line","React","Disclaimer","styled","token"],"mappings":";;;;;AAMO,SAASA,EAAYC,GAMzB;AACF,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOC,EAAG,mBAAmB;AAAA,MAC7B,QAAQH,EAAM;AAAA,MACd,SAASA,EAAM;AAAA,MACf,eACC,gBAAAI,EAACC,GAAA,EAAO,SAAQ,WAAU,OAAOF,EAAG,aAAa,GAAG,SAASH,EAAM,QACjE,UAAAG,EAAG,aAAa,GAClB;AAAA,MAED,iBACC,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,OAAOF,EAAG,QAAQ,GAAG,SAASH,EAAM,UAC9D,UAAAG,EAAG,QAAQ,GACb;AAAA,MAED,WAAWH,EAAM;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EACC,UAAAH;AAAA,UACA;AAAA,QAAA,GAEF;AAAA,0BAECI,GAAA,EAAW,eAAY,eACtB,UAAAP,EAAM,MAAM,OAAO,MAAM;AAAA,CAAI,EAAE,IAAI,CAACQ,MACpC,gBAAAP,EAACQ,EAAM,UAAN,EACC,UAAA;AAAA,UAAAD;AAAA,4BACA,MAAA,CAAA,CAAG;AAAA,QAAA,KAFgBA,CAGrB,CACA,GACF;AAAA,QAEA,gBAAAJ,EAACM,GAAA,EACC,UAAAP,EAAG,0DAA0D,EAAA,CAC/D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEA,MAAMG,IAAOK,EAAO;AAAA,gBACJC,EAAM,cAAc;AAAA,GAG9BL,IAAaI,EAAO;AAAA,WACfC,EAAM,QAAQ;AAAA;AAAA;AAAA,qBAGJA,EAAM,MAAM;AAAA,kBACfA,EAAM,YAAY;AAAA,qBACfA,EAAM,OAAO;AAAA,gBAClBA,EAAM,cAAc;AAAA;AAAA,YAExBA,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA;AAAA,GAItCF,IAAaC,EAAO;AAAA,UAChBC,EAAM,iBAAiB;AAAA,gBACjBA,EAAM,cAAc;AAAA,cACtBA,EAAM,UAAU;AAAA;"}

package/RightArrow.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "styled-components";
+import { IconArrowRight as r } from "@bynder/icons";
+import { Button as e } from "@bynder/design-system";
+function d(i) {
+  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(
+    e,
+    {
+      icon: /* @__PURE__ */ t(r, {}),
+      "aria-label": "Next",
+      title: "Next",
+      variant: "clean",
+      isSmall: !0,
+      onClick: i.onClick,
+      "data-testid": "arrow-right",
+      isDisabled: i.isDisabled
+    }
+  ) });
+}
+const f = o.div`
+	z-index: 20;
+	padding: 0;
+	box-shadow: -16px 0px 10px 0px #ffffff;
+	&:hover {
+		box-shadow: -16px 0px 10px 0px #ffffff;
+	}
+`;
+export {
+  d as RightArrow
+};
+//# sourceMappingURL=RightArrow.js.map

package/RightArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightArrow.js","sources":["../../src/common/components/RightArrow.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconArrowRight } from '@bynder/icons';\nimport { Button } from '@bynder/design-system';\n\nexport function RightArrow(props: Readonly<{ isDisabled: boolean; onClick: () => void }>) {\n\treturn (\n\t\t<StyledButtonWrapper>\n\t\t\t<Button\n\t\t\t\ticon={<IconArrowRight />}\n\t\t\t\taria-label=\"Next\"\n\t\t\t\ttitle=\"Next\"\n\t\t\t\tvariant=\"clean\"\n\t\t\t\tisSmall\n\t\t\t\tonClick={props.onClick}\n\t\t\t\tdata-testid=\"arrow-right\"\n\t\t\t\tisDisabled={props.isDisabled}\n\t\t\t/>\n\t\t</StyledButtonWrapper>\n\t);\n}\n\nconst StyledButtonWrapper = styled.div`\n\tz-index: 20;\n\tpadding: 0;\n\tbox-shadow: -16px 0px 10px 0px #ffffff;\n\t&:hover {\n\t\tbox-shadow: -16px 0px 10px 0px #ffffff;\n\t}\n`;\n"],"names":["RightArrow","props","StyledButtonWrapper","jsx","Button","IconArrowRight","styled"],"mappings":";;;;AAKO,SAASA,EAAWC,GAA+D;AACzF,2BACEC,GAAA,EACA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,wBAAOC,GAAA,EAAe;AAAA,MACtB,cAAW;AAAA,MACX,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,SAAO;AAAA,MACP,SAASJ,EAAM;AAAA,MACf,eAAY;AAAA,MACZ,YAAYA,EAAM;AAAA,IAAA;AAAA,EAAA,GAEpB;AAEF;AAEA,MAAMC,IAAsBI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/RootElementContext.js

@@ -0,0 +1,12 @@
+import { createContext as o, useContext as n } from "react";
+const e = o(null), s = e.Provider, m = () => {
+  const t = n(e);
+  if (!t)
+    throw new Error("useRootElement must be used with a RootElementProvider");
+  return t;
+};
+export {
+  s as RootElementProvider,
+  m as useRootElement
+};
+//# sourceMappingURL=RootElementContext.js.map

package/RootElementContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RootElementContext.js","sources":["../../src/style/RootElementContext.ts"],"sourcesContent":["/**\n   RootElementProvider stores the mount point of Compact View in a Context. This\n   is mostly useful for cases in which we use Shadow DOM and need to keep a\n   handle to the Shadow Root.\n */\nimport { createContext, useContext } from 'react';\n\nconst RootElementContext = createContext<HTMLElement | null>(null);\n\nexport const RootElementProvider = RootElementContext.Provider;\nexport const useRootElement = () => {\n\tconst context = useContext(RootElementContext);\n\n\tif (!context) {\n\t\tthrow new Error('useRootElement must be used with a RootElementProvider');\n\t}\n\n\treturn context;\n};\n"],"names":["RootElementContext","createContext","RootElementProvider","useRootElement","context","useContext"],"mappings":";AAOA,MAAMA,IAAqBC,EAAkC,IAAI,GAEpDC,IAAsBF,EAAmB,UACzCG,IAAiB,MAAM;AACnC,QAAMC,IAAUC,EAAWL,CAAkB;AAE7C,MAAI,CAACI;AACJ,UAAM,IAAI,MAAM,wDAAwD;AAGzE,SAAOA;AACR;"}

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