@bynder/compact-view 5.2.0 → 5.2.2

package/Item4.js

@@ -0,0 +1,190 @@
+import { jsx as t, jsxs as E } from "react/jsx-runtime";
+import { useState as F, useContext as V, useEffect as C } from "react";
+import s, { css as H } from "./styled-components.browser.esm.js";
+import { useHover as ee } from "./useHover.js";
+import { useFocusRing as oe } from "./useFocusRing.js";
+import { useLayer as ne } from "react-laag";
+import { IconCheck as te, IconArrowRight as re } from "./index4.js";
+import { textStyles as ie } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { Checkbox as A } from "./Checkbox.js";
+import { useId as I } from "./useId.js";
+import { useKeyDown as L } from "./useKeyDown.js";
+import { Switch as M } from "./Switch.js";
+import { Container as ae } from "./Container2.js";
+import { useDropdownContext as se } from "./context3.js";
+import { ItemContext as R } from "./itemContext.js";
+function Ke({
+  children: n,
+  isDisabled: i,
+  icon: f,
+  checkedVariant: m = "checkmark",
+  checkboxProps: j,
+  isChecked: c = !1,
+  badge: v,
+  onClick: $,
+  submenu: O,
+  role: D,
+  ...N
+}) {
+  const [h, l] = F(!1), [b, x] = F(!1), p = I("dropdown-item"), y = I("dropdown-item-label"), q = I("dropdown-submenu"), r = !!O, {
+    dispatch: d,
+    ...a
+  } = se(), u = a.highlightedItemId === p, W = V(R), {
+    isFocusVisible: P,
+    focusProps: B
+  } = oe(), {
+    hoverProps: z
+  } = ee({
+    onHoverStart: () => {
+      r && l(!0);
+    },
+    onHoverEnd: () => {
+      r && l(!1);
+    }
+  }), T = h && r, {
+    triggerProps: G,
+    layerProps: J,
+    renderLayer: Q
+  } = ne({
+    isOpen: T,
+    auto: !0,
+    placement: "right-start",
+    possiblePlacements: ["right-end", "right-start", "left-start", "left-end"],
+    triggerOffset: -4,
+    onParentClose: () => {
+    }
+  });
+  C(() => {
+    d({
+      type: "add-item",
+      payload: {
+        id: p,
+        parentId: W,
+        isDisabled: i,
+        isSelected: m === "checkmark" ? c : void 0
+      }
+    });
+  }), C(() => {
+    b && d({
+      type: "highlight-submenu"
+    });
+  }, [d, b]), C(() => {
+    a.hasSearch || a.isKeepingFocusOnTrigger || u && document.querySelector("#" + p)?.focus();
+  }, [a.hasSearch, a.isKeepingFocusOnTrigger, p, u]), L("ArrowLeft", (o) => {
+    r && b && (d({
+      type: "highlight-item",
+      payload: p
+    }), l(!1), x(!1), o.preventDefault());
+  }), L("ArrowRight", (o) => {
+    u && r && (l(!0), x(!0), o.preventDefault());
+  });
+  const U = le(m), g = ce(D, m, c), X = g === "menuitemcheckbox" || g === "menuitemradio" || g === "option" ? c : void 0, Y = r ? {
+    "aria-haspopup": !0,
+    "aria-expanded": h,
+    "aria-controls": q
+  } : {};
+  function w(o) {
+    if ($?.(o), !r) {
+      if (g === "menuitemcheckbox") {
+        d({
+          type: "keep-highlight"
+        });
+        return;
+      }
+      a.close();
+    }
+  }
+  function Z(o) {
+    r && (o.key === " " || o.key === "Enter") && ($?.(o), l((_) => {
+      const K = !_;
+      return x(K), K;
+    }), o.preventDefault());
+  }
+  return /* @__PURE__ */ t(R.Provider, { value: p, children: /* @__PURE__ */ E(
+    pe,
+    {
+      ...z,
+      ...G,
+      onClick: (o) => o.stopPropagation(),
+      children: [
+        /* @__PURE__ */ E(
+          k,
+          {
+            disabled: i,
+            "aria-disabled": i,
+            $isChecked: c,
+            "aria-checked": X,
+            "aria-selected": a.hasSearch || a.isKeepingFocusOnTrigger ? u : void 0,
+            role: g,
+            as: N.href ? "a" : "button",
+            onClick: w,
+            tabIndex: -1,
+            id: p,
+            onKeyDown: Z,
+            $isHighlighted: u || P,
+            $isSubmenuOpen: h,
+            className: U,
+            ...Y,
+            ...B,
+            ...N,
+            onMouseEnter: () => r && l(!0),
+            children: [
+              m === "checkbox" && /* @__PURE__ */ t(me, { onClick: (o) => o.stopPropagation(), children: /* @__PURE__ */ t(
+                A,
+                {
+                  ...j,
+                  isChecked: c,
+                  isDisabled: i,
+                  "aria-labelledby": y,
+                  onChange: w
+                }
+              ) }),
+              f && /* @__PURE__ */ t(ue, { children: f }),
+              /* @__PURE__ */ t(de, { id: y, children: n }),
+              m === "checkmark" && c && /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(te, {}) }),
+              v && /* @__PURE__ */ t(S, { children: v }),
+              m === "switch" && /* @__PURE__ */ t(S, { onClick: (o) => o.stopPropagation(), children: /* @__PURE__ */ t(M, { isChecked: c, isDisabled: i, "aria-labelledby": y, onChange: w }) }),
+              r && /* @__PURE__ */ t(ge, { $isActive: h || P || u, children: /* @__PURE__ */ t(re, {}) })
+            ]
+          }
+        ),
+        T && Q(/* @__PURE__ */ t(fe, { "data-testid": "ds-dropdown-submenu", id: q, ...J, onMouseLeave: () => l(!1), children: O }))
+      ]
+    }
+  ) });
+}
+function ce(n, i, f) {
+  return n || (i === "checkbox" || i === "switch" ? "menuitemcheckbox" : i === "checkmark" && f ? "menuitemradio" : "menuitem");
+}
+function le(n) {
+  return n === "checkbox" ? A.pointerEventsClassname : n === "switch" ? M.pointerEventsClassname : "";
+}
+const pe = s.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-10x21qo-0"
+})(["position:relative;"]), k = s.button.withConfig({
+  displayName: "ItemStyled",
+  componentId: "sc-10x21qo-1"
+})(["", " display:flex;align-items:center;box-sizing:border-box;width:100%;height:36px;margin:0;padding:0 ", ";border:none;background:none;color:", ";outline:none;font-family:", ";text-decoration:none;cursor:pointer;", " ", " &:hover{background:", ";color:", ";}&:active{background:", ";color:", ";}&:disabled{background:none;color:", ";cursor:default;}"], ie.uiTextS, e.spacing5, (n) => n.$isChecked ? e.colorText : e.colorTextMuted, e.brandFontStackBase, (n) => n.$isSubmenuOpen && H(["background:", ";color:", ";"], e.gray25, e.gray800), (n) => n.$isHighlighted && H(["background:", ";color:", ";"], e.gray50, e.gray800), e.gray25, e.colorText, e.gray50, e.gray800, e.colorTextDisabled), me = s.span.withConfig({
+  displayName: "CheckboxContainer",
+  componentId: "sc-10x21qo-2"
+})(["display:flex;flex:none;justify-content:center;align-items:center;width:24px;height:24px;margin-right:", ";"], e.spacing3), ue = s.span.withConfig({
+  displayName: "Icon",
+  componentId: "sc-10x21qo-3"
+})(["display:flex;flex:none;justify-content:center;align-items:center;width:24px;height:24px;margin-right:", ";"], e.spacing3), de = s.span.withConfig({
+  displayName: "Label",
+  componentId: "sc-10x21qo-4"
+})(["flex:1;overflow:hidden;min-width:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;"]), S = s.span.withConfig({
+  displayName: "RightContainer",
+  componentId: "sc-10x21qo-5"
+})(["flex:none;margin:0 ", ";&:last-child{margin-right:calc(", " * -1);}"], e.spacing3, e.spacing2), ge = s.span.withConfig({
+  displayName: "SubmenuIconContainer",
+  componentId: "sc-10x21qo-6"
+})(["flex:none;margin-right:calc(", " * -1);margin-left:", ";color:", ";", ":hover,", ":active{color:", ";}"], e.spacing3, e.spacing3, (n) => n.$isActive ? e.gray400 : e.gray200, k, k, e.gray400), fe = s(ae).withConfig({
+  displayName: "SubMenuContainer",
+  componentId: "sc-10x21qo-7"
+})(["margin-top:calc(", " * -1);"], e.spacing3);
+export {
+  Ke as Item
+};

package/Label.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import e from "./styled-components.browser.esm.js";
+import { textStyles as a } from "./textStyles.js";
+import { token as o } from "./token.js";
+import { useGroupParent as d } from "./useGroupContext.js";
+function u({
+  children: t,
+  secondaryText: n,
+  htmlFor: r,
+  id: l,
+  ...p
+}) {
+  return d("Label"), /* @__PURE__ */ i(s, { htmlFor: r, id: l, ...p, children: [
+    t,
+    n ? /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ c(h, { children: " " }),
+      n
+    ] }) : null
+  ] });
+}
+const s = e.label.withConfig({
+  displayName: "LabelStyled",
+  componentId: "sc-7rhip3-0"
+})(["", " display:block;margin:0 0 ", ";padding:0;border:none;color:", ";"], a.uiTextM, o.spacing3, o.colorText), m = e.span.withConfig({
+  displayName: "SecondaryText",
+  componentId: "sc-7rhip3-1"
+})(["color:", ";"], o.colorTextMuted), h = e.span.withConfig({
+  displayName: "Space",
+  componentId: "sc-7rhip3-2"
+})(["display:inline-block;width:", ";"], o.spacing3);
+export {
+  u as Label
+};

package/LeftArrow.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "styled-components";
-import { IconArrowLeft as i } from "@bynder/icons";
-import { Button as e } from "@bynder/design-system";
+import t from "./styled-components.browser.esm.js";
+import { IconArrowLeft as i } from "./index4.js";
+import { Button as e } from "./Button.js";
 function p(r) {
   return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
     e,
@@ -28,4 +28,3 @@ const a = t.div`
 export {
   p as LeftArrow
 };
-//# sourceMappingURL=LeftArrow.js.map

package/List.js

@@ -0,0 +1,25 @@
+import { jsx as n } from "react/jsx-runtime";
+import e from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
+import { Divider as p } from "./Divider.js";
+import { ConcealedAction as d } from "./ConcealedAction.js";
+import { Group as s } from "./Group2.js";
+import { Item as c } from "./Item.js";
+function o({
+  children: i,
+  isContained: r = !1,
+  ...m
+}) {
+  return /* @__PURE__ */ n(a, { $isContained: r, ...m, children: i });
+}
+o.Group = s;
+o.Item = c;
+o.Divider = p;
+o.ConcealedAction = d;
+const a = e.div.withConfig({
+  displayName: "ListStyled",
+  componentId: "sc-1cm11o3-0"
+})(["padding:", ";"], (i) => i.$isContained ? `0 ${t.spacing5}` : `${t.spacing3} 0`);
+export {
+  o as List
+};

package/ListItem.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Dropdown as i } from "./Dropdown2.js";
+function n({
+  children: o,
+  ...t
+}) {
+  return /* @__PURE__ */ r(i.ListItem, { ...t, role: "option", children: o });
+}
+export {
+  n as ListItem
+};

package/ListItem2.js

@@ -0,0 +1,58 @@
+import { jsx as s, jsxs as I, Fragment as k } from "react/jsx-runtime";
+import { useEffect as m } from "react";
+import v from "./styled-components.browser.esm.js";
+import { IconCheck as y } from "./index4.js";
+import { token as a } from "./token.js";
+import { useId as S } from "./useId.js";
+import { useDropdownContext as w } from "./context3.js";
+import { List as x } from "./List.js";
+function E({
+  children: p,
+  isDisabled: r,
+  isChecked: t = !1,
+  onClick: g,
+  role: n = "menuitem",
+  rightElements: c,
+  ...u
+}) {
+  const o = S("dropdown-item"), {
+    dispatch: f,
+    ...e
+  } = w(), i = e.highlightedItemId === o;
+  m(() => {
+    f({
+      type: "add-item",
+      payload: {
+        id: o,
+        parentId: void 0,
+        isDisabled: r,
+        isSelected: t
+      }
+    });
+  }), m(() => {
+    e.hasSearch || e.isKeepingFocusOnTrigger || i && document.querySelector("#" + o)?.focus();
+  }, [e.hasSearch, e.isKeepingFocusOnTrigger, o, i]);
+  function l() {
+    g?.(), e.close();
+  }
+  const d = t ? /* @__PURE__ */ s(y, { style: {
+    color: a.gray800
+  } }) : null;
+  return /* @__PURE__ */ s(
+    C,
+    {
+      onClick: (h) => h.stopPropagation(),
+      children: /* @__PURE__ */ s(x.Item, { isSelected: i, isDisabled: r, onClick: l, "aria-disabled": r, "aria-checked": n === "menuitemradio" || n === "option" ? t : void 0, "aria-selected": e.hasSearch || e.isKeepingFocusOnTrigger ? i : void 0, role: n, rightElements: c ? /* @__PURE__ */ I(k, { children: [
+        c,
+        d
+      ] }) : d, id: o, ...u, children: p })
+    }
+  );
+}
+const C = v.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-1msckna-0"
+})(["--ds-list-item-border-radius-override:0;--ds-list-item-focus-ring-override:none;padding:0 ", ";"], a.spacing4);
+export {
+  E as ListItem
+};

package/ListItem4.js

@@ -0,0 +1,37 @@
+import { jsxs as e, jsx as c } from "react/jsx-runtime";
+import t from "./styled-components.browser.esm.js";
+import { textStyles as p } from "./textStyles.js";
+import { token as n } from "./token.js";
+import { internalTokens as d } from "./themes3.js";
+function u({
+  children: l,
+  subtext: i,
+  thumbnail: o,
+  rightElements: m,
+  ...r
+}) {
+  return /* @__PURE__ */ e(s, { ...r, children: [
+    o && /* @__PURE__ */ c(a, { children: o }),
+    /* @__PURE__ */ e(f, { children: [
+      l,
+      i ? /* @__PURE__ */ c(h, { children: i }) : null
+    ] }),
+    m
+  ] });
+}
+const s = t.div.withConfig({
+  displayName: "ItemStyled",
+  componentId: "sc-1hpfyv0-0"
+})(["display:flex;gap:", ";align-items:center;margin-inline:calc(", " * -1);padding:", " ", ";"], n.spacing3, n.spacing5, n.spacing3, n.spacing5), a = t.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-1hpfyv0-1"
+})(["flex:none;"]), f = t.div.withConfig({
+  displayName: "Content",
+  componentId: "sc-1hpfyv0-2"
+})(["", " flex:1;min-width:0;"], p.uiTextM), h = t.div.withConfig({
+  displayName: "Subtext",
+  componentId: "sc-1hpfyv0-3"
+})(["", " color:", ";"], p.uiTextS, d["tooltip-secondary-text-color"]);
+export {
+  u as ListItem
+};

package/LoginComponent.js

@@ -29,4 +29,3 @@ function b(i) {
 export {
   b as LoginComponent
 };
-//# sourceMappingURL=LoginComponent.js.map

package/LoginContext.js

@@ -82,4 +82,3 @@ export {
   Q as useAuth,
   N as useIsLoggedIn
 };
-//# sourceMappingURL=LoginContext.js.map

package/MetapropertyFilterContent.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import i from "styled-components";
-import { token as o } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
 import "./MetapropertyOption.js";
 i.div`
 	h1 {
@@ -22,4 +22,3 @@ i.ul`
 	list-style: none;
 	margin: 0;
 `;
-//# sourceMappingURL=MetapropertyFilterContent.js.map

package/MetapropertyOption.js

@@ -1,7 +1,6 @@
 import "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as i } from "@bynder/design-system";
-import "@bynder/icons";
+import r from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
 import "./Checkbox.styles.js";
 r.span`
 	display: flex;
@@ -21,4 +20,3 @@ r.span`
 r.i`
 	margin-right: ${i.spacing4};
 `;
-//# sourceMappingURL=MetapropertyOption.js.map

package/Middleware.js

@@ -0,0 +1,49 @@
+import { RULESET as g, KEYFRAMES as x, DECLARATION as $, WEBKIT as w, MOZ as n, MS as y } from "./Enum.js";
+import { combine as A, replace as u, sizeof as M, match as R, assign as h, filter as E } from "./Utility.js";
+import { copy as i, lift as t } from "./Tokenizer.js";
+import { serialize as S } from "./Serializer.js";
+import { prefix as T } from "./Prefixer.js";
+function B(r) {
+  var o = M(r);
+  return function(f, s, p, d) {
+    for (var c = "", a = 0; a < o; a++)
+      c += r[a](f, s, p, d) || "";
+    return c;
+  };
+}
+function C(r) {
+  return function(o) {
+    o.root || (o = o.return) && r(o);
+  };
+}
+function D(r, o, f, s) {
+  if (r.length > -1 && !r.return)
+    switch (r.type) {
+      case $:
+        r.return = T(r.value, r.length, f);
+        return;
+      case x:
+        return S([i(r, { value: u(r.value, "@", "@" + w) })], s);
+      case g:
+        if (r.length)
+          return A(f = r.props, function(p) {
+            switch (R(p, s = /(::plac\w+|:read-\w+)/)) {
+              // :read-(only|write)
+              case ":read-only":
+              case ":read-write":
+                t(i(r, { props: [u(p, /:(read-\w+)/, ":" + n + "$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+              // :placeholder
+              case "::placeholder":
+                t(i(r, { props: [u(p, /:(plac\w+)/, ":" + w + "input-$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, ":" + n + "$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, y + "input-$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+            }
+            return "";
+          });
+    }
+}
+export {
+  B as middleware,
+  D as prefixer,
+  C as rulesheet
+};

package/Middleware2.js

@@ -0,0 +1,49 @@
+import { RULESET as g, KEYFRAMES as x, DECLARATION as $, WEBKIT as w, MOZ as n, MS as y } from "./Enum.js";
+import { combine as A, replace as u, sizeof as M, match as R, assign as h, filter as E } from "./Utility.js";
+import { copy as i, lift as t } from "./Tokenizer.js";
+import { serialize as S } from "./Serializer.js";
+import { prefix as T } from "./Prefixer.js";
+function B(r) {
+  var o = M(r);
+  return function(f, s, p, d) {
+    for (var c = "", a = 0; a < o; a++)
+      c += r[a](f, s, p, d) || "";
+    return c;
+  };
+}
+function C(r) {
+  return function(o) {
+    o.root || (o = o.return) && r(o);
+  };
+}
+function D(r, o, f, s) {
+  if (r.length > -1 && !r.return)
+    switch (r.type) {
+      case $:
+        r.return = T(r.value, r.length, f);
+        return;
+      case x:
+        return S([i(r, { value: u(r.value, "@", "@" + w) })], s);
+      case g:
+        if (r.length)
+          return A(f = r.props, function(p) {
+            switch (R(p, s = /(::plac\w+|:read-\w+)/)) {
+              // :read-(only|write)
+              case ":read-only":
+              case ":read-write":
+                t(i(r, { props: [u(p, /:(read-\w+)/, ":" + n + "$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+              // :placeholder
+              case "::placeholder":
+                t(i(r, { props: [u(p, /:(plac\w+)/, ":" + w + "input-$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, ":" + n + "$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, y + "input-$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+            }
+            return "";
+          });
+    }
+}
+export {
+  B as middleware,
+  D as prefixer,
+  C as rulesheet
+};

package/Modal.js

@@ -1,8 +1,8 @@
 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 a from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
 import { ShadowRoot as C } from "./ShadowRoot.js";
 const d = p(null), N = () => g(d);
 function P({
@@ -45,4 +45,3 @@ export {
   P as Modal,
   N as useModalContext
 };
-//# sourceMappingURL=Modal.js.map

package/Modal2.js

@@ -0,0 +1,31 @@
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
+import { ModalBase as o } from "./ModalBase.js";
+function H({
+  isOpen: t,
+  onClose: l,
+  size: d,
+  isCloseButtonHidden: f,
+  isClosedOnOverlayClick: i,
+  title: m,
+  secondaryInfo: p,
+  additionalActions: s,
+  thumbnail: u,
+  children: x,
+  actionPrimary: r,
+  actionSecondary: a,
+  actionTertiary: c,
+  container: h,
+  onCloseAnimationEnd: j,
+  sidebar: n,
+  ...M
+}) {
+  return /* @__PURE__ */ B(o, { isOpen: t, onClose: l, isClosedOnOverlayClick: i, isCloseButtonHidden: f, size: d, onCloseAnimationEnd: j, container: h, ...M, children: [
+    /* @__PURE__ */ e(o.Header, { title: m, secondaryInfo: p, thumbnail: u, additionalActions: s }),
+    n ? /* @__PURE__ */ e(o.Sidebar, { children: n }) : null,
+    /* @__PURE__ */ e(o.Content, { children: x }),
+    r && /* @__PURE__ */ e(o.Footer, { actionPrimary: r, actionSecondary: a, actionTertiary: c })
+  ] });
+}
+export {
+  H as Modal
+};