@bynder/compact-view 5.1.4 → 5.2.1

package/ContextAction.js

@@ -1,42 +1,49 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { IconOpenInNew as l, IconCrop as a, IconMore as C } from "@bynder/icons";
-import { Card as i, Dropdown as o } from "@bynder/design-system";
-import { useConfig as p } from "./ConfigContext.js";
-import { __ as w } from "./index2.js";
-function g({ transformBaseUrl: s, portalUrl: r, onOpenDAT: c }) {
-  const { hideExternalAccess: e, selectionMode: d } = p(), t = d === "SingleSelectFile" && s;
-  return !t && e ? null : !t && !e ? /* @__PURE__ */ n(
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { IconOpenInNew as s, IconCrop as a, IconMore as p } from "@bynder/icons";
+import { Card as i, Dropdown as e } from "@bynder/design-system";
+import { useConfig as w } from "./ConfigContext.js";
+import { __ as h } from "./index2.js";
+function _({ dragState: r, transformBaseUrl: d, portalUrl: l, onOpenDAT: c }) {
+  const { hideExternalAccess: o, selectionMode: m } = w(), t = m === "SingleSelectFile" && d;
+  return !t && o ? null : !t && !o && r !== "select" ? /* @__PURE__ */ n(
     i.ContextActionButton,
     {
-      "aria-label": w("Open in new tab"),
+      "aria-label": h("Open in new tab"),
       onClick: () => {
-        window.open(r, "_blank");
+        window.open(l, "_blank");
       },
-      children: /* @__PURE__ */ n(l, {})
+      children: /* @__PURE__ */ n(s, {})
     }
-  ) : t && e ? /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "New transformation", onClick: c, children: /* @__PURE__ */ n(a, {}) }) : /* @__PURE__ */ u(
-    o,
+  ) : t && o ? /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "New transformation", onClick: c, children: /* @__PURE__ */ n(a, {}) }) : /* @__PURE__ */ C(
+    e,
     {
-      trigger: ({ isOpen: m, ...f }) => /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "Menu", isPressed: m, ...f, children: /* @__PURE__ */ n(C, {}) }),
+      trigger: ({ isOpen: u, ...f }) => r !== "select" ? /* @__PURE__ */ n(
+        i.ContextActionButton,
+        {
+          "aria-label": "Menu",
+          isPressed: u,
+          ...f,
+          children: /* @__PURE__ */ n(p, {})
+        }
+      ) : null,
       isClosedOnScroll: !0,
       children: [
         /* @__PURE__ */ n(
-          o.Item,
+          e.Item,
           {
-            icon: /* @__PURE__ */ n(l, {}),
+            icon: /* @__PURE__ */ n(s, {}),
             onClick: () => {
-              window.open(r, "_blank");
+              window.open(l, "_blank");
             },
             children: "Open asset"
           }
         ),
-        /* @__PURE__ */ n(o.Divider, {}),
-        /* @__PURE__ */ n(o.Item, { icon: /* @__PURE__ */ n(a, {}), onClick: c, children: "New transformation" })
+        /* @__PURE__ */ n(e.Divider, {}),
+        /* @__PURE__ */ n(e.Item, { icon: /* @__PURE__ */ n(a, {}), onClick: c, children: "New transformation" })
       ]
     }
   );
 }
 export {
-  g as ContextAction
+  _ as ContextAction
 };
-//# sourceMappingURL=ContextAction.js.map

package/Dat.js

@@ -87,4 +87,3 @@ const U = y.div`
 export {
   L as Dat
 };
-//# sourceMappingURL=Dat.js.map

package/DatDropdownItem.js

@@ -44,4 +44,3 @@ const I = b(s.Item)`
 export {
   L as DatDropdownItem
 };
-//# sourceMappingURL=DatDropdownItem.js.map

package/DesignSystemContext.js

@@ -9,4 +9,3 @@ function a(r) {
 export {
   a as DesignSystemProvider
 };
-//# sourceMappingURL=DesignSystemContext.js.map

package/DirectionSelect.js

@@ -40,4 +40,3 @@ const S = n(m)`
 export {
   b as DirectionSelect
 };
-//# sourceMappingURL=DirectionSelect.js.map

package/DocumentIcon.js

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

package/DomainInput.js

@@ -36,4 +36,3 @@ const g = t.div`
 export {
   C as DomainInput
 };
-//# sourceMappingURL=DomainInput.js.map

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 "use-debounce";
+import { token as G } from "@bynder/design-system";
 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
+  }), [M, $] = 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 !== M && $(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]);
   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,
+  }, []), _ = w(() => {
+    o.removeEventListener("mousemove", S), o.removeEventListener("mouseup", _), A(L), k(L);
+  }, [S, o]), P = w(
+    ({ clientY: t, clientX: s, button: r }) => {
+      r === K && (o.addEventListener("mousemove", S), o.addEventListener("mouseup", _), A({
+        x: s,
         y: t
       }));
     },
-    [I, _, o]
+    [S, _, 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, _, 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

@@ -69,4 +69,3 @@ const I = r.div`
 export {
   N as Dropdown
 };
-//# sourceMappingURL=Dropdown.js.map

package/DropdownContent.js

@@ -1,59 +1,74 @@
-import { jsx as b } from "react/jsx-runtime";
-import { useRef as W, useState as y, useLayoutEffect as R } from "react";
-import { createPortal as D } from "react-dom";
-import { styled as H } from "styled-components";
-import { token as k } from "@bynder/design-system";
-import { useClickOutside as O } from "./useClickOutside.js";
-import { useRootElement as P } from "./RootElementContext.js";
-import { concatClasses as S } from "./class.js";
-function U(t) {
-  const n = W(null), [, d] = y(0);
-  O([t.target, n], t.onClickOutside);
-  const i = !!document.querySelector("#compactViewContainer");
-  R(() => {
-    d(
+import { jsx as L } from "react/jsx-runtime";
+import { useRef as O, useState as l, useLayoutEffect as g } from "react";
+import { createPortal as P } from "react-dom";
+import { styled as S } from "styled-components";
+import { token as m } from "@bynder/design-system";
+import { useClickOutside as z } from "./useClickOutside.js";
+import { useRootElement as V } from "./RootElementContext.js";
+import { concatClasses as j } from "./class.js";
+function Q(t) {
+  const e = O(null), [, h] = l(0);
+  z([t.target, e], t.onClickOutside);
+  const d = !!document.querySelector("#compactViewContainer");
+  g(() => {
+    h(
       t.target.current !== null ? t.target.current.getBoundingClientRect().x : 0
     );
   }, [t.target]);
-  const c = P();
-  if (c === null || t.target.current === null)
+  const [x, w] = l(600);
+  g(() => {
+    const n = () => {
+      if (!t.target.current) return;
+      const a = t.target.current.getBoundingClientRect(), E = window.innerHeight - (a.top + a.height), $ = a.top, u = 600, k = Math.max(E, $);
+      let r = Math.min(
+        u,
+        k,
+        window.innerHeight
+      );
+      r < u && (r = Math.max(0, r)), w(r);
+    };
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, [t.target, t.direction]);
+  const s = V();
+  if (s === null || t.target.current === null)
     return null;
-  const a = () => t.isMetapropertyDropdown ? i ? "39%" : o < 1120 ? u : 1120 : 300, s = () => {
-    const v = n.current && r + n.current.clientWidth > o ? void 0 : r;
-    return i ? "initial" : v;
-  }, e = t.target.current.getBoundingClientRect(), r = e.x, o = window.innerWidth - 32, u = o - 16, l = 280, m = a(), g = 600, f = s(), x = n.current && r + n.current.clientWidth > o ? 24 : void 0, h = t.direction === "Down" ? e.top + e.height : void 0, w = t.direction === "Up" ? window.innerHeight - e.top : void 0, C = {
-    left: f,
-    right: x,
-    top: h,
-    bottom: w,
-    minWidth: l,
-    maxWidth: m,
-    maxHeight: g
-  }, p = S("cv-root cv-dropdown");
-  return D(
-    /* @__PURE__ */ b(
-      B,
+  const f = () => t.isMetapropertyDropdown ? d ? "39%" : i < 1120 ? C : 1120 : 300, v = () => {
+    const n = e.current && c + e.current.clientWidth > i ? void 0 : c;
+    return d ? "initial" : n;
+  }, o = t.target.current.getBoundingClientRect(), c = o.x, i = window.innerWidth - 32, C = i - 16, H = 280, p = f(), b = "auto", M = v(), W = e.current && c + e.current.clientWidth > i ? 24 : void 0, R = t.direction === "Down" ? o.top + o.height : void 0, y = t.direction === "Up" ? window.innerHeight - o.top : void 0, B = {
+    left: M,
+    right: W,
+    top: R,
+    bottom: y,
+    minWidth: H,
+    maxWidth: p,
+    // Subtract spacing7 for bottom padding if not at max height to account for bottom padding.
+    maxHeight: `calc(${x}px - ${m.spacing7})`,
+    overflow: b
+  }, D = j("cv-root cv-dropdown");
+  return P(
+    /* @__PURE__ */ L(
+      q,
       {
         role: "menu",
         id: t.id,
-        className: p,
-        ref: n,
-        style: C,
+        className: D,
+        ref: e,
+        style: B,
         isPaddingContent: t.isPaddingContent,
         children: t.children
       }
     ),
-    c
+    s
   );
 }
-const B = H.div`
-	padding: ${({ isPaddingContent: t }) => t ? `${k.spacing3} 0` : "0"};
+const q = S.div`
+	padding: ${({ isPaddingContent: t }) => t ? `${m.spacing3} 0` : "0"};
 	user-select: none;
 	border-radius: 6px;
 	border: 1px solid rgba(3, 16, 38, 0.17);
 	box-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 8px 12px -2px rgba(3, 16, 38, 0.1);
 `;
 export {
-  U as DropdownContent
+  Q as DropdownContent
 };
-//# sourceMappingURL=DropdownContent.js.map

package/DropdownListItem.js

@@ -49,4 +49,3 @@ const c = r.button`
 export {
   m as DropdownListItem
 };
-//# sourceMappingURL=DropdownListItem.js.map

package/ErrorIcon.js

@@ -45,4 +45,3 @@ function e() {
 export {
   e as ErrorIcon
 };
-//# sourceMappingURL=ErrorIcon.js.map

package/ErrorMessage.js

@@ -37,4 +37,3 @@ const l = i.h1`
 export {
   u as ErrorMessage
 };
-//# sourceMappingURL=ErrorMessage.js.map

package/FieldSelect.js

@@ -71,4 +71,3 @@ const S = t.ul`
 export {
   R as FieldSelect
 };
-//# sourceMappingURL=FieldSelect.js.map