@bynder/compact-view 5.2.0 → 5.2.2

package/Dropdown2.js

@@ -0,0 +1,169 @@
+import { jsx as g, jsxs as P } from "react/jsx-runtime";
+import { useReducer as B, useRef as y, useEffect as I, useCallback as F, useMemo as W } from "react";
+import { useLayer as j, mergeRefs as O } from "react-laag";
+import { useKeyDown as n } from "./useKeyDown.js";
+import { useId as K } from "./useId.js";
+import { Arrow as N } from "./Arrow.js";
+import { Container as U } from "./Container2.js";
+import { Item as V } from "./Item4.js";
+import { SectionTitle as q } from "./SectionTitle.js";
+import { DropdownContext as _ } from "./context3.js";
+import { getUseLayerOptions as z } from "./getUseLayerOptions.js";
+import { reducer as G, initialState as J } from "./state.js";
+import { SelectButtonText as Q } from "./SelectButtonText.js";
+import { Divider as X } from "./Divider.js";
+import { SearchInput as Y } from "./SearchInput2.js";
+import { Text as Z } from "./Text22.js";
+import { useScrollHighlightedIntoView as $ } from "./useScrollHighlightedIntoView.js";
+import { ListItem as ee } from "./ListItem2.js";
+import { getFirstShadowElement as te, isInShadow as re } from "./shadowdom2.js";
+import { useOffset as ie, OffsetContext as oe } from "./OffsetContext.js";
+import { calculateContainerMaxHeight as ne } from "./calculateContainerMaxHeight.js";
+function i({
+  children: x,
+  trigger: w,
+  position: c = "bottom-left",
+  isClosedOnScroll: m = !1,
+  isKeepingFocusOnTrigger: f = !1,
+  containerRef: S,
+  onOpen: v,
+  onClose: D,
+  minWidth: T,
+  role: C,
+  noMaxHeight: E = !1,
+  ...L
+}) {
+  const [e, r] = B(G, J), l = y(!0), s = y(), p = K("dropdown-menu");
+  I(() => {
+    if (l.current) {
+      l.current = !1;
+      return;
+    }
+    e.isOpen ? (r({
+      type: "highlight-current-item"
+    }), v?.()) : D?.();
+  }, [e.isOpen]), $(e.highlightedItemId, e.hasSearch);
+  const o = F(() => {
+    e.isOpen && (r({
+      type: "close"
+    }), s?.current?.focus());
+  }, [e.isOpen]);
+  I(() => {
+    function t() {
+      o();
+    }
+    if (m && e.isOpen)
+      return document.addEventListener("scroll", t), () => {
+        document.removeEventListener("scroll", t);
+      };
+  }, [m, o, e.isOpen]), n("Tab", () => {
+    e.isOpen && o();
+  }), n("Escape", () => {
+    e.isOpen && o();
+  }), n("Enter", (t) => {
+    e.isOpen && e.highlightedItemId && (document.querySelector("#" + e.highlightedItemId)?.click(), t.preventDefault());
+  }), n("ArrowDown", (t) => {
+    e.isOpen && (r({
+      type: "highlight-next"
+    }), t.preventDefault());
+  }), n("ArrowUp", (t) => {
+    e.isOpen && (r({
+      type: "highlight-previous"
+    }), t.preventDefault());
+  });
+  const k = W(() => ({
+    dispatch: r,
+    close: o,
+    highlightedItemId: e.highlightedItemId,
+    hasSearch: e.hasSearch,
+    isKeepingFocusOnTrigger: f,
+    menuId: p
+  }), [o, f, e.hasSearch, e.highlightedItemId, p]), h = ie(), d = 16, {
+    renderLayer: R,
+    triggerProps: {
+      ref: A
+    },
+    layerProps: a,
+    triggerBounds: u
+  } = j({
+    isOpen: e.isOpen,
+    /**
+     * Until https://github.com/everweij/react-laag/issues/84 is fixed,
+     * we can't use the onOutsideClick option in the Shadow DOM.
+     */
+    onOutsideClick: re(s.current) ? void 0 : () => r({
+      type: "close"
+    }),
+    onParentClose() {
+      r({
+        type: "close"
+      });
+    },
+    onDisappear: (t) => {
+      t === "full" && r({
+        type: "close"
+      });
+    },
+    triggerOffset: h,
+    containerOffset: d,
+    auto: !0,
+    container: te(s.current),
+    ...z(c)
+  }), b = c === "bottom" ? {
+    width: u?.width,
+    minWidth: "initial",
+    maxWidth: "initial"
+  } : {};
+  function H(t) {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), r({
+      type: "toggle-from-keyboard"
+    }));
+  }
+  const M = ne(E, u, {
+    triggerOffset: h,
+    containerOffset: d
+  });
+  return /* @__PURE__ */ g(_.Provider, { value: k, children: /* @__PURE__ */ P("div", { ...L, children: [
+    w({
+      isOpen: e.isOpen,
+      onClick: () => {
+        r({
+          type: "toggle"
+        });
+      },
+      "aria-haspopup": !0,
+      "aria-expanded": e.isOpen,
+      "aria-controls": p,
+      "aria-activedescendant": e.highlightedItemId || void 0,
+      onKeyDown: H,
+      ref: O(A, s)
+    }, {
+      open: () => {
+        r({
+          type: "open"
+        });
+      },
+      close: () => {
+        r({
+          type: "close"
+        });
+      }
+    }),
+    e.isOpen && R(/* @__PURE__ */ g(U, { id: p, ...a, ref: O(a.ref, S), style: {
+      ...a.style,
+      ...b
+    }, minWidth: T, role: C, dynamicMaxHeight: M, children: x }))
+  ] }) });
+}
+i.Divider = X;
+i.Item = V;
+i.ListItem = ee;
+i.SectionTitle = q;
+i.Arrow = N;
+i.SelectButtonText = Q;
+i.SearchInput = Y;
+i.Text = Z;
+i.OffsetContext = oe;
+export {
+  i as Dropdown
+};

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 S from "./styled-components.browser.esm.js";
+import { token as m } from "./token.js";
+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

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as e } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as o } from "@bynder/design-system";
-import { IconCheck as a } from "@bynder/icons";
+import r from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+import { IconCheck as a } from "./index4.js";
 function m({ selected: i = !1, ...t }) {
   return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ e(
     c,
@@ -49,4 +49,3 @@ const c = r.button`
 export {
   m as DropdownListItem
 };
-//# sourceMappingURL=DropdownListItem.js.map

package/Enum.js

@@ -0,0 +1,12 @@
+var r = "-ms-", a = "-moz-", v = "-webkit-", E = "comm", e = "rule", m = "decl", M = "@import", R = "@keyframes", T = "@layer";
+export {
+  E as COMMENT,
+  m as DECLARATION,
+  M as IMPORT,
+  R as KEYFRAMES,
+  T as LAYER,
+  a as MOZ,
+  r as MS,
+  e as RULESET,
+  v as WEBKIT
+};

package/ErrorIcon.js

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

package/ErrorMessage.js

@@ -1,40 +1,40 @@
-import { jsxs as e, Fragment as c, jsx as r } from "react/jsx-runtime";
-import i from "styled-components";
-import { token as n, Button as a } from "@bynder/design-system";
-import { __ as t } from "./index2.js";
+import { jsxs as e, Fragment as c, jsx as n } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { Button as a } from "./Button.js";
+import { token as t } from "./token.js";
+import { __ as r } from "./index2.js";
 import { ErrorIcon as s } from "./ErrorIcon.js";
-function u(o) {
+function S(o) {
   return /* @__PURE__ */ e(c, { children: [
-    /* @__PURE__ */ r(s, {}),
-    /* @__PURE__ */ r(l, { children: t("Oops! Something went wrong") }),
-    /* @__PURE__ */ r(p, { children: t("Please try again or get in contact with our customer support.") }),
+    /* @__PURE__ */ n(s, {}),
+    /* @__PURE__ */ n(l, { children: r("Oops! Something went wrong") }),
+    /* @__PURE__ */ n(p, { children: r("Please try again or get in contact with our customer support.") }),
     /* @__PURE__ */ e(m, { children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ n(
         a,
         {
           variant: "secondary",
-          title: t("Send report"),
+          title: r("Send report"),
           onClick: o.onClickSend,
           isDisabled: o.isReportSent,
-          children: o.isReportSent ? t("Report sent") : t("Send report...")
+          children: o.isReportSent ? r("Report sent") : r("Send report...")
         }
       ),
-      /* @__PURE__ */ r(a, { variant: "primary", title: t("Try again"), onClick: o.onClickRetry, children: t("Try again") })
+      /* @__PURE__ */ n(a, { variant: "primary", title: r("Try again"), onClick: o.onClickRetry, children: r("Try again") })
     ] })
   ] });
 }
 const l = i.h1`
-	margin-top: ${n.spacing8};
-	font-size: ${n.fontSize400};
+	margin-top: ${t.spacing8};
+	font-size: ${t.fontSize400};
 `, p = i.span`
-	margin-top: ${n.spacing5};
-	color: ${n.colorTextDisabled};
+	margin-top: ${t.spacing5};
+	color: ${t.colorTextDisabled};
 `, m = i.div`
-	margin-top: ${n.spacing7};
+	margin-top: ${t.spacing7};
 	display: flex;
-	gap: ${n.spacing3};
+	gap: ${t.spacing3};
 `;
 export {
-  u as ErrorMessage
+  S as ErrorMessage
 };
-//# sourceMappingURL=ErrorMessage.js.map

package/FieldSelect.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import t from "styled-components";
-import { token as l } from "@bynder/design-system";
+import t from "./styled-components.browser.esm.js";
+import { token as l } from "./token.js";
 import { Dropdown as f } from "./Dropdown.js";
 import { __ as i } from "./index2.js";
 import { useOrderingByPage as p } from "./useOrderingStore.js";
 import { useRouterSelectors as g } from "./useRouterStore.js";
 import { DropdownListItem as u } from "./DropdownListItem.js";
-function R({ options: e }) {
+function $({ options: e }) {
   const d = g.use.page(), [o, a] = p(d.page), s = {
     CREATED_AT: i("Date added"),
     NAME: i("Name"),
@@ -69,6 +69,5 @@ const S = t.ul`
 	color: ${(e) => e.$isDisabled ? "rgba(0, 34, 51, 0.5)" : "#212c40"};
 `;
 export {
-  R as FieldSelect
+  $ as FieldSelect
 };
-//# sourceMappingURL=FieldSelect.js.map

package/FilePlaceholder.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+function p({
+  children: o,
+  ...n
+}) {
+  return /* @__PURE__ */ r(t, { ...n, children: /* @__PURE__ */ r(d, { children: o }) });
+}
+const t = i.div.withConfig({
+  displayName: "Placeholder",
+  componentId: "sc-1xjrejg-0"
+})(["display:grid;place-items:center;min-height:100px;"]), d = i.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-1xjrejg-1"
+})(["display:grid;place-items:center;width:60px;height:70px;border-radius:", ";background:", ";color:", ";"], e.brandRadiusBase, e.gray10, e.gray600);
+export {
+  p as FilePlaceholder
+};