@bynder/compact-view 5.2.0 → 5.2.2

package/AssetList.js

@@ -1,6 +1,6 @@
 import { jsxs as I, jsx as s, Fragment as G } from "react/jsx-runtime";
-import { useRef as w, useState as P, useEffect as J } from "react";
-import { styled as Q } from "styled-components";
+import { useRef as P, useState as k, useEffect as J } from "react";
+import Q from "./styled-components.browser.esm.js";
 import { AssetCard as U } from "./AssetCard.js";
 import { CardSkeleton as V } from "./CardSkeleton.js";
 import { DragSelect as X } from "./DragSelect.js";
@@ -24,71 +24,71 @@ function he({
   selectedAssetIds: a = [],
   selectionMode: u = "MultiSelect",
   theme: S,
-  children: k = null
+  children: B = null
 }) {
-  const x = w(null), { dimensions: B } = Y(x.current), [f, v] = P([]), [M, D] = P("inactive"), { clear: R } = $(), {
-    setIsEnabled: b,
+  const x = P(null), { dimensions: M } = Y(x.current), [f, v] = k([]), [D, b] = k("inactive"), { clear: R } = $(), {
+    setIsEnabled: C,
     isEnabled: H,
     setIsSelected: W
-  } = T(), { resetData: j, search: y } = ee(), [C, E] = ie(l, B), A = w(!1);
+  } = T(), { resetData: j, search: p } = ee(), [A, E] = te(l, M), L = P(!1);
   J(() => {
-    !A.current && e.value && e.value.length > 0 && (A.current = !0, (async () => {
+    !L.current && e.value && e.value.length > 0 && (L.current = !0, (async () => {
       if (e.value && e.value.length > 0) {
-        const t = e.value.find((n) => n.__typename === "Image") || e.value[0], r = await y([t.databaseId]);
-        b(r || !1);
+        const i = e.value.find((n) => n.__typename === "Image") || e.value[0], r = await p([i.databaseId]);
+        C(r || !1);
       }
     })());
-  }, [e.value, y, b]);
-  const z = (i) => {
-    j(), W(!0), R(), y(i);
+  }, [e.value, p, C]);
+  const z = (t) => {
+    j(), W(!0), R(), p(t);
   };
-  function _(i) {
+  function _(t) {
     if (!(e.tag === "Loading" && !e.value))
-      return e.value?.find((t) => i === t.id);
+      return e.value?.find((i) => t === i.id);
   }
-  function F(i) {
-    v((t) => [...t, ...i]);
+  function F(t) {
+    v((i) => [...i, ...t]);
   }
-  function K(i) {
+  function K(t) {
     v(
-      (t) => t.filter((r) => !i.includes(r))
+      (i) => i.filter((r) => !t.includes(r))
     );
   }
-  function N(i) {
-    D(i);
+  function N(t) {
+    b(t);
   }
-  function O(i) {
-    if (D("inactive"), f.length) {
-      const t = [];
+  function O(t) {
+    if (b("inactive"), f.length) {
+      const i = [];
       f.forEach((r) => {
         const n = _(r);
-        n && t.push(n);
-      }), i === "inverse" ? d(t) : o(t), v([]);
+        n && i.push(n);
+      }), t === "inverse" ? d(i) : o(i), v([]);
     }
   }
-  function L(i) {
-    return M === "inverse" && a.includes(i.id) && f.includes(i.id) ? !1 : a.includes(i.id) || f.includes(i.id);
+  function w(t) {
+    return D === "inverse" && a.includes(t.id) && f.includes(t.id) ? !1 : a.includes(t.id) || f.includes(t.id);
   }
-  function q(i, t) {
-    if (t.shiftKey && u === "MultiSelect" && e.value?.length) {
-      const r = e.value.findIndex((p) => p.id === i.id);
+  function q(t, i) {
+    if (i.shiftKey && u === "MultiSelect" && e.value?.length) {
+      const r = e.value.findIndex((y) => y.id === t.id);
       let n = e.value?.findIndex(
-        (p) => p.id === a[a.length - 1]
+        (y) => y.id === a[a.length - 1]
       );
       n === -1 && (n = 0), n < r ? o(e.value?.slice(n, r + 1)) : o(e.value.slice(r, n + 1));
     } else
-      d([i]);
+      d([t]);
   }
   return /* @__PURE__ */ I(
-    te,
+    ie,
     {
       ref: x,
       "data-drag-select-container": !0,
       "data-testid": "asset-list-container",
       children: [
-        k,
+        B,
         /* @__PURE__ */ I("div", { className: "card-list", role: "listbox", children: [
-          e.tag === "Loading" && !e.value && /* @__PURE__ */ s(V, { rows: C, columns: E }),
+          e.tag === "Loading" && !e.value && /* @__PURE__ */ s(V, { rows: A, columns: E }),
           e.tag === "Loaded" && e.value.length === 0 && g,
           (e.tag === "Loading" && e.value || e.tag === "Loaded") && /* @__PURE__ */ I(G, { children: [
             u === "MultiSelect" && /* @__PURE__ */ s(
@@ -116,18 +116,19 @@ function he({
                 hasNextPage: m,
                 isLoading: h,
                 loadMore: c,
-                children: e.value?.map((i, t) => /* @__PURE__ */ s(
+                children: e.value?.map((t, i) => /* @__PURE__ */ s(
                   U,
                   {
-                    isSilimilaritySearchEnabled: H,
-                    isSelected: L(i),
-                    isOutlined: L(i),
-                    asset: i,
-                    fadeIn: t >= C * E,
+                    dragState: D,
+                    isSimilaritySearchEnabled: H,
+                    isSelected: w(t),
+                    isOutlined: w(t),
+                    asset: t,
+                    fadeIn: i >= A * E,
                     onClick: (r, n) => q(r, n),
                     onSimilaritySearch: z
                   },
-                  i.id
+                  t.id
                 ))
               }
             )
@@ -137,7 +138,7 @@ function he({
     }
   );
 }
-function ie(e, l) {
+function te(e, l) {
   if (e !== void 0)
     return [1, e];
   if (!l)
@@ -145,7 +146,7 @@ function ie(e, l) {
   const m = 192, h = 172, c = 8, o = 8, d = m + 2 * c, g = h + 2 * c, a = 2 * o, u = Math.ceil(l.height / g), S = Math.round((l.width - a) / d);
   return [u, S];
 }
-const te = Q.div`
+const ie = Q.div`
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
@@ -153,6 +154,5 @@ const te = Q.div`
 `;
 export {
   he as AssetList,
-  ie as calculateAssetsInDimensions
+  te as calculateAssetsInDimensions
 };
-//# sourceMappingURL=AssetList.js.map

package/AssetTypeItem.js

@@ -1,17 +1,18 @@
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import r from "styled-components";
-import { token as a, Checkbox as l } from "@bynder/design-system";
-import { useAssetFilter as m } from "./AssetFilterContext.js";
-import { getAssetTypeIcon as y, assetTypeToString as s } from "./asset.type.js";
-import { ListItem as f, StyledCheckboxWrapper as h, Content as p } from "./Checkbox.styles.js";
-function $(e) {
-  const n = m(), i = n.assetTypes.includes(e.type);
+import r from "./styled-components.browser.esm.js";
+import { Checkbox as a } from "./Checkbox.js";
+import { token as m } from "./token.js";
+import { useAssetFilter as l } from "./AssetFilterContext.js";
+import { getAssetTypeIcon as f, assetTypeToString as s } from "./asset.type.js";
+import { ListItem as y, StyledCheckboxWrapper as h, Content as p } from "./Checkbox.styles.js";
+function I(e) {
+  const n = l(), i = n.assetTypes.includes(e.type);
   function o() {
     i ? n.removeAssetType(e.type) : n.addAssetType(e.type);
   }
-  const c = y(e.type);
-  return /* @__PURE__ */ t(f, { "data-testid": "advanced-options", children: /* @__PURE__ */ t(h, { $isChecked: i, $isLoading: e.isLoading, children: /* @__PURE__ */ t(
-    l,
+  const c = f(e.type);
+  return /* @__PURE__ */ t(y, { "data-testid": "advanced-options", children: /* @__PURE__ */ t(h, { $isChecked: i, $isLoading: e.isLoading, children: /* @__PURE__ */ t(
+    a,
     {
       isChecked: i,
       onChange: o,
@@ -25,10 +26,9 @@ function $(e) {
   ) }) });
 }
 const g = r.div`
-	margin: 1px ${a.spacing3};
+	margin: 1px ${m.spacing3};
 	flex-grow: 1;
 `;
 export {
-  $ as AssetTypeItem
+  I as AssetTypeItem
 };
-//# sourceMappingURL=AssetTypeItem.js.map

package/AssetsView.js

@@ -58,4 +58,3 @@ function k() {
 export {
   k as AssetsView
 };
-//# sourceMappingURL=AssetsView.js.map

package/Autocomplete_new.js

@@ -1,98 +1,108 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { styled as e } from "styled-components";
-import { token as i, Form as d, Flex as s, TruncatedText as u, Input as y } from "@bynder/design-system";
-import { IconCheckCircle as w } from "@bynder/icons";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useState as C } from "react";
+import i from "./styled-components.browser.esm.js";
+import { Flex as h } from "./Flex.js";
+import { Form as a } from "./Form.js";
+import { Input as O } from "./Input.js";
+import { TruncatedText as P } from "./TruncatedText.js";
+import { token as m } from "./token.js";
 import { __ as g } from "./index2.js";
 import "./AssetCard.js";
 import "./AssetList.js";
-import "./Chip.js";
+import "./Chip2.js";
 import "./Dropdown.js";
 import "./DropdownListItem.js";
 import "./MetapropertyFilterContent.js";
 import "./MetapropertyOption.js";
 import "./SmartFilterContent.js";
 import "./HorizontalScroll.js";
-import "./InfiniteScroll.js";
+import { InfiniteScroll as F } from "./InfiniteScroll.js";
 import "./Modal.js";
 import "./NoResults.js";
 import "./Oops.js";
 import "./ShadowRoot.js";
 import "./Skeleton.js";
-import { Spinner as C } from "./Spinner.js";
-const Y = ({
+import { Spinner as j } from "./Spinner.js";
+import { OptionComponent as v } from "./Option_new.js";
+const pt = ({
   metaproperty: t,
-  value: h,
-  onChange: $,
-  onOptionSelect: x,
-  autocompleteOptions: a,
-  isLoading: n,
-  selectedOptions: m
+  value: l,
+  onChange: d,
+  onOptionSelect: f,
+  autocompleteOptions: n,
+  isLoading: p,
+  selectedOptions: x
 }) => {
-  const { label: b, name: c, id: p } = t, f = (r) => {
-    $(p, r);
+  const { label: u, name: b, id: e } = t, [$, c] = C(1), w = (r) => {
+    c(1), d(e, r, 1);
+  }, y = () => {
+    const r = $ + 1;
+    d(e, l, r), c(r);
   };
-  return /* @__PURE__ */ o(k, { children: /* @__PURE__ */ l(s, { direction: "column", children: [
-    /* @__PURE__ */ o(v, { children: /* @__PURE__ */ l(O, { $isLoading: n, children: [
+  return /* @__PURE__ */ o(M, { children: /* @__PURE__ */ s(h, { direction: "column", children: [
+    /* @__PURE__ */ o(N, { children: /* @__PURE__ */ s(L, { $isLoading: p, children: [
       /* @__PURE__ */ o(
-        j,
+        S,
         {
           "data-testid": "metaproperty-title",
-          $isLoading: n,
+          $isLoading: p,
           htmlFor: "Project Code",
-          children: /* @__PURE__ */ o(u, { children: b })
+          children: /* @__PURE__ */ o(P, { children: u })
         }
       ),
       /* @__PURE__ */ o(
-        y,
+        O,
         {
           id: "Project Code",
           placeholder: g("Want to search for something?"),
-          value: h,
-          onChange: f,
+          value: l,
+          onChange: w,
           "data-testid": "autocomplete-input"
         }
       ),
-      n && /* @__PURE__ */ o(C, { isNotUsingMargin: !0 })
+      p && /* @__PURE__ */ o(j, { isNotUsingMargin: !0 })
     ] }) }),
     /* @__PURE__ */ o(
-      F,
+      k,
       {
-        $autocompleteOptions: a[p]?.metapropertyOptions.length,
-        children: a[p]?.metapropertyOptions?.length ? /* @__PURE__ */ o(s, { direction: "column", children: a[p]?.metapropertyOptions.map(
-          (r) => /* @__PURE__ */ l(
-            L,
-            {
-              $isLoading: n,
-              $isSelected: !!m[c]?.[r.id],
-              "data-testid": "autocomplete-option",
-              onClick: () => x(
-                c,
-                r,
-                !!t.isMultifilter
-              ),
-              children: [
-                r.label,
-                m[c]?.[r.id] ? /* @__PURE__ */ o(N, { className: "fade-in-down", children: /* @__PURE__ */ o(w, {}) }) : null
-              ]
-            },
-            r.id
-          )
-        ) }) : /* @__PURE__ */ o(S, { children: g("Results will appear here") })
+        $autocompleteOptions: n[e]?.metapropertyOptions.length,
+        children: n[e]?.metapropertyOptions?.length ? /* @__PURE__ */ o(h, { direction: "column", children: /* @__PURE__ */ o(
+          F,
+          {
+            isLoading: p,
+            hasNextPage: n[e]?.hasNextPage,
+            loadMore: y,
+            children: n[e]?.metapropertyOptions.map(
+              (r) => /* @__PURE__ */ o(
+                v,
+                {
+                  option: r,
+                  onClick: f,
+                  metapropertyName: b,
+                  isSelected: !!x[t.name]?.[r.id],
+                  metapropertyMultifilter: !!t.isMultifilter,
+                  showCount: !1
+                },
+                r.id
+              )
+            )
+          }
+        ) }) : /* @__PURE__ */ o(I, { children: g("Results will appear here") })
       }
     )
   ] }) });
-}, k = e.div`
+}, M = i.div`
 	border-right: 1px solid rgba(3, 16, 38, 0.1);
 	min-width: 224px;
 	height: 100%;
-`, v = e(d)`
-	padding: ${i.spacing5};
+`, N = i(a)`
+	padding: ${m.spacing5};
 	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);
-`, O = e(d.Group)`
+`, L = i(a.Group)`
 	display: flex;
 	flex-direction: column;
-	gap: ${i.spacing5};
+	gap: ${m.spacing5};
 	padding: 0;
 	position: relative;
 
@@ -104,45 +114,23 @@ const Y = ({
 		color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "inherit"} !important;
 		min-width: 220px !important;
 	}
-`, j = e(d.Label)`
+`, S = i(a.Label)`
 	color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "rgba(3, 16, 38, 0.88)"};
 	font-weight: 600;
-`, F = e.div`
+`, k = i.div`
 	display: flex;
 	justify-content: ${(t) => t.$autocompleteOptions ? "flex-start" : "center"};
 	align-items: ${(t) => t.$autocompleteOptions ? "flex-start" : "center"};
 	background: ${(t) => t.$autocompleteOptions ? "#fff" : "#f8f8f9"};
-	padding: ${i.spacing3} 0;
+	padding: ${(t) => t.$autocompleteOptions ? "0" : `${m.spacing3} 0`};
 	height: 100%;
 	min-height: 315px;
-`, L = e.div`
-	display: ${(t) => t.$isSelected ? "flex" : "block"};
-	justify-content: ${(t) => t.$isSelected ? "space-between" : "flex-start"};
-	cursor: pointer;
-	padding: ${i.spacing3} ${i.spacing5};
-	color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "inherit"};
-
-	&:hover {
-		background-color: rgba(3, 16, 38, 0.03);
-	}
-`, S = e.div`
+	max-height: 400px;
+	overflow-y: ${(t) => t.$autocompleteOptions ? "auto" : "visible"};
+	scrollbar-width: none;
+`, I = i.div`
 	color: rgba(3, 16, 38, 0.46);
-`, N = e.span`
-	display: flex;
-	align-items: center;
-	padding: 0 ${i.spacing3};
-	color: rgba(0, 34, 51, 0.8);
-	background-color: #f7f8f9;
-	border: 1px solid rgba(0, 34, 51, 0.1);
-	border-radius: ${i.spacing5};
-
-	svg {
-		max-width: ${i.spacing5};
-		max-height: ${i.spacing5};
-		margin-right: ${i.spacing2};
-	}
 `;
 export {
-  Y as Autocomplete
+  pt as Autocomplete
 };
-//# sourceMappingURL=Autocomplete_new.js.map

package/Axios2.js

@@ -0,0 +1,136 @@
+import d from "./utils6.js";
+import U from "./buildURL.js";
+import q from "./InterceptorManager.js";
+import R from "./dispatchRequest.js";
+import w from "./mergeConfig.js";
+import A from "./buildFullPath.js";
+import m from "./validator.js";
+import T from "./AxiosHeaders.js";
+const i = m.validators;
+class k {
+  constructor(t) {
+    this.defaults = t || {}, this.interceptors = {
+      request: new q(),
+      response: new q()
+    };
+  }
+  /**
+   * Dispatch a request
+   *
+   * @param {String|Object} configOrUrl The config specific for this request (merged with this.defaults)
+   * @param {?Object} config
+   *
+   * @returns {Promise} The Promise to be fulfilled
+   */
+  async request(t, e) {
+    try {
+      return await this._request(t, e);
+    } catch (s) {
+      if (s instanceof Error) {
+        let l = {};
+        Error.captureStackTrace ? Error.captureStackTrace(l) : l = new Error();
+        const a = l.stack ? l.stack.replace(/^.+\n/, "") : "";
+        try {
+          s.stack ? a && !String(s.stack).endsWith(a.replace(/^.+\n.+\n/, "")) && (s.stack += `
+` + a) : s.stack = a;
+        } catch {
+        }
+      }
+      throw s;
+    }
+  }
+  _request(t, e) {
+    typeof t == "string" ? (e = e || {}, e.url = t) : e = t || {}, e = w(this.defaults, e);
+    const { transitional: s, paramsSerializer: l, headers: a } = e;
+    s !== void 0 && m.assertOptions(s, {
+      silentJSONParsing: i.transitional(i.boolean),
+      forcedJSONParsing: i.transitional(i.boolean),
+      clarifyTimeoutError: i.transitional(i.boolean)
+    }, !1), l != null && (d.isFunction(l) ? e.paramsSerializer = {
+      serialize: l
+    } : m.assertOptions(l, {
+      encode: i.function,
+      serialize: i.function
+    }, !0)), e.allowAbsoluteUrls !== void 0 || (this.defaults.allowAbsoluteUrls !== void 0 ? e.allowAbsoluteUrls = this.defaults.allowAbsoluteUrls : e.allowAbsoluteUrls = !0), m.assertOptions(e, {
+      baseUrl: i.spelling("baseURL"),
+      withXsrfToken: i.spelling("withXSRFToken")
+    }, !0), e.method = (e.method || this.defaults.method || "get").toLowerCase();
+    let f = a && d.merge(
+      a.common,
+      a[e.method]
+    );
+    a && d.forEach(
+      ["delete", "get", "head", "post", "put", "patch", "common"],
+      (r) => {
+        delete a[r];
+      }
+    ), e.headers = T.concat(f, a);
+    const h = [];
+    let y = !0;
+    this.interceptors.request.forEach(function(n) {
+      typeof n.runWhen == "function" && n.runWhen(e) === !1 || (y = y && n.synchronous, h.unshift(n.fulfilled, n.rejected));
+    });
+    const c = [];
+    this.interceptors.response.forEach(function(n) {
+      c.push(n.fulfilled, n.rejected);
+    });
+    let u, o = 0, p;
+    if (!y) {
+      const r = [R.bind(this), void 0];
+      for (r.unshift.apply(r, h), r.push.apply(r, c), p = r.length, u = Promise.resolve(e); o < p; )
+        u = u.then(r[o++], r[o++]);
+      return u;
+    }
+    p = h.length;
+    let b = e;
+    for (o = 0; o < p; ) {
+      const r = h[o++], n = h[o++];
+      try {
+        b = r(b);
+      } catch (S) {
+        n.call(this, S);
+        break;
+      }
+    }
+    try {
+      u = R.call(this, b);
+    } catch (r) {
+      return Promise.reject(r);
+    }
+    for (o = 0, p = c.length; o < p; )
+      u = u.then(c[o++], c[o++]);
+    return u;
+  }
+  getUri(t) {
+    t = w(this.defaults, t);
+    const e = A(t.baseURL, t.url, t.allowAbsoluteUrls);
+    return U(e, t.params, t.paramsSerializer);
+  }
+}
+d.forEach(["delete", "get", "head", "options"], function(t) {
+  k.prototype[t] = function(e, s) {
+    return this.request(w(s || {}, {
+      method: t,
+      url: e,
+      data: (s || {}).data
+    }));
+  };
+});
+d.forEach(["post", "put", "patch"], function(t) {
+  function e(s) {
+    return function(a, f, h) {
+      return this.request(w(h || {}, {
+        method: t,
+        headers: s ? {
+          "Content-Type": "multipart/form-data"
+        } : {},
+        url: a,
+        data: f
+      }));
+    };
+  }
+  k.prototype[t] = e(), k.prototype[t + "Form"] = e(!0);
+});
+export {
+  k as default
+};

package/AxiosError.js

@@ -0,0 +1,54 @@
+import a from "./utils6.js";
+function e(t, i, o, E, r) {
+  Error.call(this), Error.captureStackTrace ? Error.captureStackTrace(this, this.constructor) : this.stack = new Error().stack, this.message = t, this.name = "AxiosError", i && (this.code = i), o && (this.config = o), E && (this.request = E), r && (this.response = r, this.status = r.status ? r.status : null);
+}
+a.inherits(e, Error, {
+  toJSON: function() {
+    return {
+      // Standard
+      message: this.message,
+      name: this.name,
+      // Microsoft
+      description: this.description,
+      number: this.number,
+      // Mozilla
+      fileName: this.fileName,
+      lineNumber: this.lineNumber,
+      columnNumber: this.columnNumber,
+      stack: this.stack,
+      // Axios
+      config: a.toJSONObject(this.config),
+      code: this.code,
+      status: this.status
+    };
+  }
+});
+const R = e.prototype, u = {};
+[
+  "ERR_BAD_OPTION_VALUE",
+  "ERR_BAD_OPTION",
+  "ECONNABORTED",
+  "ETIMEDOUT",
+  "ERR_NETWORK",
+  "ERR_FR_TOO_MANY_REDIRECTS",
+  "ERR_DEPRECATED",
+  "ERR_BAD_RESPONSE",
+  "ERR_BAD_REQUEST",
+  "ERR_CANCELED",
+  "ERR_NOT_SUPPORT",
+  "ERR_INVALID_URL"
+  // eslint-disable-next-line func-names
+].forEach((t) => {
+  u[t] = { value: t };
+});
+Object.defineProperties(e, u);
+Object.defineProperty(R, "isAxiosError", { value: !0 });
+e.from = (t, i, o, E, r, c) => {
+  const s = Object.create(R);
+  return a.toFlatObject(t, s, function(h) {
+    return h !== Error.prototype;
+  }, (n) => n !== "isAxiosError"), e.call(s, t.message, i, o, E, r), s.cause = t, s.name = t.name, c && Object.assign(s, c), s;
+};
+export {
+  e as default
+};