@bynder/compact-view 5.2.0 → 5.2.2

package/DatDropdownItem.js

@@ -1,25 +1,26 @@
-import { jsxs as u, Fragment as d, jsx as i } from "react/jsx-runtime";
-import { useState as p, useEffect as g } from "react";
-import b from "styled-components";
-import { IconArrowRight as w, IconCrop as x } from "@bynder/icons";
-import { List as s, Thumbnail as l } from "@bynder/design-system";
+import { jsxs as u, Fragment as p, jsx as i } from "react/jsx-runtime";
+import { useState as d, useEffect as g } from "react";
+import b from "./styled-components.browser.esm.js";
+import { IconArrowRight as w, IconCrop as x } from "./index4.js";
+import { List as l } from "./List.js";
+import { Thumbnail as s } from "./Thumbnail.js";
 import { useDat as D } from "./useDatStore.js";
-function L({ transformBaseUrl: r, asset: e, toggleDropdown: f }) {
-  const { transformation: t, openDat: c } = D(), [h, m] = p(), n = t?.preset?.content?.io?.length ?? 0;
+function S({ transformBaseUrl: n, asset: m, toggleDropdown: f }) {
+  const { transformation: t, openDat: c } = D(), [h, e] = d(), o = t?.preset?.content?.io?.length ?? 0;
   return g(() => {
     if (t?.url) {
-      const { url: o } = t, a = "io=transform:fill,width:40,height:40";
-      o.includes("io=transform:fill") && m(
-        o.replace(/io=transform:fill,width:[0-9]+,height:[0-9]+/, a)
-      ), m(`${o}&${a}`);
+      const { url: r } = t, a = "io=transform:fill,width:40,height:40";
+      r.includes("io=transform:fill") && e(
+        r.replace(/io=transform:fill,width:[0-9]+,height:[0-9]+/, a)
+      ), e(`${r}&${a}`);
     }
-  }, [t]), r ? /* @__PURE__ */ u(d, { children: [
-    /* @__PURE__ */ i(s.Divider, {}),
+  }, [t]), n ? /* @__PURE__ */ u(p, { children: [
+    /* @__PURE__ */ i(l.Divider, {}),
     /* @__PURE__ */ i(
       I,
       {
-        thumbnail: !t || n === 0 ? /* @__PURE__ */ i(l, { icon: /* @__PURE__ */ i(x, {}), "data-testid": "crop-icon" }) : /* @__PURE__ */ i(
-          l,
+        thumbnail: !t || o === 0 ? /* @__PURE__ */ i(s, { icon: /* @__PURE__ */ i(x, {}), "data-testid": "crop-icon" }) : /* @__PURE__ */ i(
+          s,
           {
             variant: "content",
             imageUrl: h,
@@ -28,20 +29,19 @@ function L({ transformBaseUrl: r, asset: e, toggleDropdown: f }) {
         ),
         rightElements: /* @__PURE__ */ i(w, {}),
         onClick: () => {
-          f(), c(r, e, e.name);
+          f(), c(n, m, m.name);
         },
-        subtext: t && n > 0 ? `${n} transformation${n === 1 ? "" : "s"}` : "",
+        subtext: t && o > 0 ? `${o} transformation${o === 1 ? "" : "s"}` : "",
         children: "New transformation"
       }
     )
   ] }) : null;
 }
-const I = b(s.Item)`
+const I = b(l.Item)`
 	max-width: 100%;
 	width: 340px;
 	margin-left: 0;
 `;
 export {
-  L as DatDropdownItem
+  S as DatDropdownItem
 };
-//# sourceMappingURL=DatDropdownItem.js.map

package/DesignSystemContext.js

@@ -1,12 +1,11 @@
 import { jsx as e } from "react/jsx-runtime";
-import { StyleSheetManager as o } from "styled-components";
-import { DesignSystemProvider as i } from "@bynder/design-system";
+import { StyleSheetManager as o } from "./styled-components.browser.esm.js";
+import { DesignSystemProvider as i } from "./DesignSystemProvider.js";
 import { useRootElement as n } from "./RootElementContext.js";
-function a(r) {
+function l(r) {
   const t = n();
   return /* @__PURE__ */ e(o, { target: t, children: /* @__PURE__ */ e(i, { zIndexBase: 1e6, children: r.children }) });
 }
 export {
-  a as DesignSystemProvider
+  l as DesignSystemProvider
 };
-//# sourceMappingURL=DesignSystemContext.js.map

package/DesignSystemProvider.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import u, { useMemo as f } from "react";
+import { ThemeStyles as l } from "./theme.js";
+import { Button as a } from "./Button.js";
+import { LocalizationProvider as p } from "./localization.js";
+const t = 10001, v = u.createContext({
+  zIndexBase: t
+});
+function D({
+  children: n,
+  noTheme: i,
+  zIndexBase: r = t,
+  buttonVersion: m = "modern",
+  dateFnsLocale: o,
+  locale: s = "en-US"
+}) {
+  const c = f(() => ({
+    zIndexBase: r,
+    dateFnsLocale: o
+  }), [o, r]);
+  return /* @__PURE__ */ e(v.Provider, { value: c, children: /* @__PURE__ */ e(p, { locale: s, children: /* @__PURE__ */ d(a.VersionProvider, { value: m, children: [
+    !i && /* @__PURE__ */ e(l, {}),
+    n
+  ] }) }) });
+}
+export {
+  v as DesignSystemContext,
+  D as DesignSystemProvider
+};

package/DirectionSelect.js

@@ -1,12 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
-import n from "styled-components";
-import { IconSortOrder as l } from "@bynder/icons";
-import { Button as m, token as t } from "@bynder/design-system";
+import { jsx as e } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { IconSortOrder as m } from "./index4.js";
+import { Button as l } from "./Button.js";
+import { token as t } from "./token.js";
 import { __ as r } from "./index2.js";
-import { useOrderingByPage as g } from "./useOrderingStore.js";
-import { useRouterSelectors as f } from "./useRouterStore.js";
-function b({ nlSearch: e = !1 }) {
-  const c = f.use.page(), [i, s] = g(c.page), d = {
+import { useOrderingByPage as f } from "./useOrderingStore.js";
+import { useRouterSelectors as g } from "./useRouterStore.js";
+function k({ nlSearch: o = !1 }) {
+  const c = g.use.page(), [i, s] = f(c.page), d = {
     ASC: r("Ascending"),
     DESC: r("Descending")
   }, p = {
@@ -16,28 +17,27 @@ function b({ nlSearch: e = !1 }) {
   function a() {
     s({ field: i.field, direction: p[i.direction] });
   }
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     S,
     {
       variant: "clean",
       isSmall: !0,
       title: d[i.direction],
       onClick: a,
-      icon: /* @__PURE__ */ o(u, { $isAscending: i.direction === "ASC" }),
-      isDisabled: e
+      icon: /* @__PURE__ */ e(u, { $isAscending: i.direction === "ASC" }),
+      isDisabled: o
     }
   );
 }
-const S = n(m)`
+const S = n(l)`
 	border-radius: 5px 0 0 5px;
 	border: 1px solid #d9dee1;
 	height: 42px;
-`, u = n(l)`
+`, u = n(m)`
 	width: ${t.spacing6};
 	height: ${t.spacing6};
-	${(e) => e.$isAscending && "transform: scaleY(-1)"}
+	${(o) => o.$isAscending && "transform: scaleY(-1)"}
 `;
 export {
-  b as DirectionSelect
+  k as DirectionSelect
 };
-//# sourceMappingURL=DirectionSelect.js.map

package/Divider.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+function p({
+  direction: t = "horizontal",
+  ...o
+}) {
+  return t === "horizontal" ? /* @__PURE__ */ n(a, { ...o }) : /* @__PURE__ */ n(e, { role: "separator", ...o });
+}
+const a = r.hr.withConfig({
+  displayName: "HorizontalDivider",
+  componentId: "sc-galaug-0"
+})(["box-sizing:content-box;height:1px;margin:0;padding:", " 0;border:none;background:", ";background-clip:content-box;"], i.spacing3, i.gray100a), e = r.div.withConfig({
+  displayName: "VerticalDivider",
+  componentId: "sc-galaug-1"
+})(["box-sizing:content-box;width:1px;min-height:100%;margin:0;padding:0 ", ";background:", ";background-clip:content-box;"], i.spacing2, i.gray100a);
+export {
+  p as Divider,
+  a as HorizontalDivider,
+  e as VerticalDivider
+};

package/DocumentIcon.js

@@ -66,4 +66,3 @@ function r() {
 export {
   r as DocumentIcon
 };
-//# sourceMappingURL=DocumentIcon.js.map

package/DomainInput.js

@@ -1,39 +1,39 @@
 import { jsx as n } from "react/jsx-runtime";
-import t from "styled-components";
-import { token as m, InputField as h } from "@bynder/design-system";
+import r from "./styled-components.browser.esm.js";
+import { InputField as m } from "./InputField.js";
+import { token as h } from "./token.js";
 import { Spinner as c } from "./Spinner.js";
-import { __ as o } from "./index2.js";
-function C({ status: i, isReadOnly: e, value: r, onChange: a, onSubmit: l }) {
+import { __ as e } from "./index2.js";
+function D({ status: i, isReadOnly: o, value: t, onChange: a, onSubmit: l }) {
   function d(p) {
     i === "valid" && p.keyCode === 13 && l();
   }
   return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(
-    h,
+    m,
     {
       type: "url",
-      value: r,
+      value: t,
       placeholder: "yourdomain.bynder.com",
-      label: o("Enter the portal domain"),
+      label: e("Enter the portal domain"),
       onChange: a,
       onKeyDown: d,
       isInvalid: i === "invalid",
-      helperText: i === "invalid" && o("This portal domain does not exist"),
-      hasClearButton: i !== "validating" && !e,
+      helperText: i === "invalid" && e("This portal domain does not exist"),
+      hasClearButton: i !== "validating" && !o,
       iconRight: i === "validating" ? /* @__PURE__ */ n(v, { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ n(c, { isRelative: !0, isNotUsingMargin: !0 }) }) : void 0,
-      isDisabled: e,
+      isDisabled: o,
       "data-testid": "login-input"
     }
   ) });
 }
-const g = t.div`
-	margin: ${m.spacing4} 0;
+const g = r.div`
+	margin: ${h.spacing4} 0;
 	width: 320px;
-`, v = t.div`
+`, v = r.div`
 	height: 100%;
 	display: flex;
 	align-items: center;
 `;
 export {
-  C as DomainInput
+  D as DomainInput
 };
-//# sourceMappingURL=DomainInput.js.map

package/DragRange.js

@@ -0,0 +1,25 @@
+import { jsx as d } from "react/jsx-runtime";
+import g from "./styled-components.browser.esm.js";
+function f({
+  max: t,
+  min: n,
+  onKeyDown: o,
+  onMouseDown: i,
+  value: e
+}) {
+  function r(a) {
+    return (a - n) / (t - n) * 100;
+  }
+  return /* @__PURE__ */ d(s, { $left: r(e[0]), $width: r(e[1]) - r(e[0]), role: "presentation", "data-testid": "ds-slider-drag-range", onKeyDown: o, onMouseDown: i });
+}
+const s = g.div.withConfig({
+  displayName: "StyledDragRange",
+  componentId: "sc-1mv2tts-0"
+})(["position:absolute;left:", "%;width:", "%;height:100%;cursor:pointer;"], ({
+  $left: t
+}) => t, ({
+  $width: t
+}) => t);
+export {
+  f as DragRange
+};

package/DragSelect.js

@@ -1,12 +1,13 @@
-import { jsx as j } from "react/jsx-runtime";
-import z, { useState as T, useRef as S, useEffect as f, useCallback as x } from "react";
-import { createPortal as G } from "react-dom";
-import { useDebounce as W } from "use-debounce";
+import { jsx as Y } from "react/jsx-runtime";
+import j, { useState as T, useRef as I, useEffect as f, useCallback as w } from "react";
+import { createPortal as z } from "react-dom";
+import { useDebounce as q } from "./index.module2.js";
+import { token as G } from "./token.js";
 import { useRootElement as H } from "./RootElementContext.js";
 const L = {
   x: null,
   y: null
-}, K = 0, J = "data-drag-select-id", O = "drag-select-container", V = 10, $ = 50, Q = 10, de = ({
+}, K = 0, J = "data-drag-select-id", x = "drag-select-container", W = 10, V = 50, Q = 10, fe = ({
   dragContainer: n,
   selectionBoxCustomAttr: e,
   onSelect: m,
@@ -14,100 +15,105 @@ const L = {
   onDragStart: h,
   onDragEnd: u
 }) => {
-  const [E, R] = T(L), [d, D] = T(L), [C] = W(d, V, {
+  const [E, R] = T(L), [d, D] = T(L), [C] = q(d, W, {
     leading: !0,
-    maxWait: V
-  }), [M, X] = T(), o = H(), w = z.useMemo(
-    () => Z(
+    maxWait: W
+  }), [_, $] = T(), o = H(), O = j.useMemo(
+    () => ee(
       E,
       C,
       o.querySelector(".cv-root")
     ),
     [E, C, o]
-  ), [N] = W(
-    w,
-    $,
+  ), [N] = q(
+    O,
+    V,
     {
       leading: !1,
-      maxWait: $
+      maxWait: V
     }
-  ), [v, Y] = T([]), y = se(v), c = S(E), g = S(d), i = S(
+  ), [v, F] = T([]), y = se(v), c = I(E), g = I(d), i = I(
     c.current.x !== null && c.current.y !== null && g.current.x !== null && g.current.y !== null
-  ), B = S({
+  ), B = I({
     shiftKey: !1,
     metaKey: !1
   });
   f(() => (document.addEventListener("keydown", p, !1), document.addEventListener("keyup", p, !1), () => {
     document.removeEventListener("keydown", p, !1), document.removeEventListener("keyup", p, !1);
   }), []);
-  const p = ({ shiftKey: t, metaKey: r }) => {
-    const s = t || r ? "inverse" : "select";
-    B.current = { shiftKey: t, metaKey: r }, i.current && s !== M && X(s);
+  const p = ({ shiftKey: t, metaKey: s }) => {
+    const r = t || s ? "inverse" : "select";
+    B.current = { shiftKey: t, metaKey: s }, i.current && r !== _ && $(r);
   };
   f(() => {
     let t;
-    return typeof h == "function" && i.current ? (p(B.current), h(M ?? "select")) : typeof u == "function" && !i.current && (t = setTimeout(() => u(M ?? "select"), Q)), () => clearTimeout(t);
-  }, [i.current, M]);
+    return typeof h == "function" && i.current ? (p(B.current), h(_ ?? "select")) : typeof u == "function" && !i.current && (t = setTimeout(() => u(_ ?? "select"), Q)), () => clearTimeout(t);
+  }, [i.current, _]);
   const A = (t) => {
-    c.current = t, R(t), k();
-  }, U = (t) => {
-    g.current = t, D(t), k();
-  }, k = () => {
+    c.current = t, R(t), b();
+  }, k = (t) => {
+    g.current = t, D(t), b();
+  }, b = () => {
     i.current = c.current.x !== null && c.current.y !== null && g.current.x !== null && g.current.y !== null;
-  }, I = x(({ clientY: t, clientX: r }) => {
-    const s = c.current.x !== null, a = Math.abs(c.current.x ?? 0 - r) >= 1 || Math.abs(c.current.y ?? 0 - t) >= 1;
-    !s || !a || U({
-      x: r,
+  }, S = w(({ clientY: t, clientX: s }) => {
+    const r = c.current.x !== null, a = Math.abs(c.current.x ?? 0 - s) >= 1 || Math.abs(c.current.y ?? 0 - t) >= 1;
+    !r || !a || k({
+      x: s,
       y: t
     });
-  }, []), _ = x(() => {
-    o.removeEventListener("mousemove", I), o.removeEventListener("mouseup", _), A(L), U(L);
-  }, [I, o]), P = x(
-    ({ clientY: t, clientX: r, button: s }) => {
-      s === K && (o.addEventListener("mousemove", I), o.addEventListener("mouseup", _), A({
-        x: r,
+  }, []), M = w(() => {
+    o.removeEventListener("mousemove", S), o.removeEventListener("mouseup", M), A(L), k(L);
+  }, [S, o]), P = w(
+    ({ clientY: t, clientX: s, button: r }) => {
+      r === K && (o.addEventListener("mousemove", S), o.addEventListener("mouseup", M), A({
+        x: s,
         y: t
       }));
     },
-    [I, _, o]
+    [S, M, o]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
   f(() => {
     const t = o.querySelector(n);
-    return t && (ne(o), t.addEventListener("mousedown", P)), () => {
-      t && (t.removeEventListener("mousedown", P), oe(o));
+    return t && (oe(o), t.addEventListener("mousedown", P)), () => {
+      t && (t.removeEventListener("mousedown", P), re(o));
     };
-  }, [n, P, I, _, o]), f(() => {
-    const t = o.querySelectorAll(`[${J}]`), r = Array.from(t).reduce((s, a) => {
-      const b = te(a);
-      return a instanceof HTMLElement && ee(b, N) && a.dataset.dragSelectId && s.push(a.dataset.dragSelectId), s;
+  }, [n, P, S, M, o]), f(() => {
+    const t = o.querySelectorAll(`[${J}]`), s = Array.from(t).reduce((r, a) => {
+      const X = ne(a);
+      return a instanceof HTMLElement && te(X, N) && a.dataset.dragSelectId && r.push(a.dataset.dragSelectId), r;
     }, []);
-    Y(r);
+    F(s);
   }, [N, o]), f(() => {
     if (!y || y === v || !i.current)
       return;
-    const t = v.filter((s) => !y.includes(s)), r = y.filter(
-      (s) => !v.includes(s)
+    const t = v.filter((r) => !y.includes(r)), s = y.filter(
+      (r) => !v.includes(r)
     );
-    t.length && m(t), r.length && l(r);
+    t.length && m(t), s.length && l(s);
   }, [v, y, m, l, i]);
-  const q = o.querySelector(`#${O}`);
-  return !i.current || !q ? null : G(
-    /* @__PURE__ */ j(
+  const U = o.querySelector(`#${x}`);
+  return !i.current || !U ? null : z(
+    /* @__PURE__ */ Y(
       "div",
       {
         ...e,
-        style: e.style ? {
-          ...F,
+        style: {
+          ...Z,
           ...e.style,
-          ...w
-        } : { ...F, ...w },
+          ...O,
+          borderColor: G.brandPrimary500,
+          borderStyle: "solid",
+          borderWidth: 2,
+          // This is brandColour300 in rgba with 0.2 opacity
+          background: "rgba(148, 189, 255, 0.2)"
+        },
         "data-testid": "drag-selection"
       }
     ),
-    q
+    U
   );
-}, F = { position: "absolute", zIndex: 100 }, Z = (n, e, m) => {
+}, Z = { position: "absolute", zIndex: 100 }, ee = (n, e, m) => {
   if (!n.x || !n.y || !e.x || !e.y || !m)
     return { left: 0, top: 0, height: 0, width: 0 };
   const l = m.getBoundingClientRect(), h = Math.max(e.x, 0);
@@ -117,7 +123,7 @@ const L = {
   let d = Math.abs(h - n.x);
   const D = l.width + l.left - u - 4;
   return d = Math.min(d, D), { left: u, top: E, height: R, width: d };
-}, ee = (n, e) => n.left <= e.left + e.width && n.left + n.width >= e.left && n.top <= e.top + e.height && n.top + n.height >= e.top, te = (n) => {
+}, te = (n, e) => n.left <= e.left + e.width && n.left + n.width >= e.left && n.top <= e.top + e.height && n.top + n.height >= e.top, ne = (n) => {
   const e = n.getBoundingClientRect();
   return {
     left: e.left,
@@ -125,20 +131,19 @@ const L = {
     height: e.height,
     width: e.width
   };
-}, ne = (n) => {
-  const e = document.createElement("div");
-  e.id = O, n.appendChild(e);
 }, oe = (n) => {
-  const e = n.querySelector(`#${O}`);
+  const e = document.createElement("div");
+  e.id = x, n.appendChild(e);
+}, re = (n) => {
+  const e = n.querySelector(`#${x}`);
   e && e.remove();
 }, se = (n) => {
-  const e = S();
+  const e = I();
   return f(() => {
     e.current = n;
   }), e.current;
 };
 export {
-  de as DragSelect,
-  Z as getSelectionBoxRect
+  fe as DragSelect,
+  ee as getSelectionBoxRect
 };
-//# sourceMappingURL=DragSelect.js.map

package/Dropdown.js

@@ -1,12 +1,13 @@
-import { jsxs as l, Fragment as w, jsx as i } from "react/jsx-runtime";
+import { jsxs as c, Fragment as w, jsx as i } from "react/jsx-runtime";
 import { useState as h, useRef as D, useMemo as $ } from "react";
-import r from "styled-components";
-import { token as v, Button as x } from "@bynder/design-system";
+import r from "./styled-components.browser.esm.js";
+import { Button as v } from "./Button.js";
+import { token as x } from "./token.js";
 import { DropdownContent as C } from "./DropdownContent.js";
 import { useAssetFilter as A } from "./AssetFilterContext.js";
-function N({
+function O({
   buttonKind: t = "clean",
-  direction: c = "Down",
+  direction: l = "Down",
   isSmall: m,
   fadeIn: f,
   isMetapropertyDropdown: u,
@@ -15,9 +16,9 @@ function N({
   const a = A(), s = b(), [e, p] = h(!1), d = D(null), o = () => {
     p((g) => !g), a.setDropdownState(!a.isDropdownActive);
   };
-  return /* @__PURE__ */ l(w, { children: [
-    /* @__PURE__ */ i(I, { $fadeIn: !!f, children: /* @__PURE__ */ l(
-      x,
+  return /* @__PURE__ */ c(w, { children: [
+    /* @__PURE__ */ i(I, { $fadeIn: !!f, children: /* @__PURE__ */ c(
+      v,
       {
         variant: t,
         isSmall: m,
@@ -40,7 +41,7 @@ function N({
       {
         isPaddingContent: n.isPaddingContent,
         onClickOutside: o,
-        direction: c,
+        direction: l,
         target: d,
         id: s,
         isMetapropertyDropdown: u,
@@ -59,7 +60,7 @@ const I = r.div`
 	text-transform: inherit;
 	${(t) => t.$fadeIn ? "animation: var(--fade-in-down);" : ""}
 `, S = r.i`
-	margin-left: ${v.spacing3};
+	margin-left: ${x.spacing3};
 	transition: transform 200ms;
 	${(t) => t.$active ? "transform: rotate(180deg);" : ""}
 `, k = r.span`
@@ -67,6 +68,5 @@ const I = r.div`
 	align-items: center;
 `;
 export {
-  N as Dropdown
+  O as Dropdown
 };
-//# sourceMappingURL=Dropdown.js.map