@bynder/compact-view 5.2.1 → 5.2.2

package/SectionTitle.js

@@ -0,0 +1,17 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { textStyles as r } from "./textStyles.js";
+import { token as t } from "./token.js";
+function d({
+  children: o,
+  ...i
+}) {
+  return /* @__PURE__ */ e(c, { ...i, children: o });
+}
+const c = n.div.withConfig({
+  displayName: "SectionTitleStyled",
+  componentId: "sc-m0c82i-0"
+})(["", " overflow:hidden;padding:", " ", " ", ";color:", ";text-overflow:ellipsis;white-space:nowrap;"], r.uiTextS, t.spacing4, t.spacing5, t.spacing3, t.colorText);
+export {
+  d as SectionTitle
+};

package/Select.js

@@ -0,0 +1,49 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as h, createContext as S, useContext as f } from "react";
+import { Dropdown as e } from "./Dropdown2.js";
+import { Button as C } from "./Button.js";
+const a = S({
+  value: "",
+  onChange: () => {
+  }
+  // eslint-disable-line @typescript-eslint/no-empty-function
+});
+function r({
+  children: l,
+  isDisabled: c,
+  onChange: i,
+  value: o,
+  label: n,
+  icon: u,
+  "aria-labelledby": s,
+  "aria-label": m,
+  ...p
+}) {
+  const x = h(() => ({
+    value: o,
+    onChange: i
+  }), [i, o]);
+  return /* @__PURE__ */ t(a.Provider, { value: x, children: /* @__PURE__ */ t(e, { trigger: ({
+    isOpen: d,
+    ...b
+  }) => /* @__PURE__ */ t(C, { icon: u, isPressed: d, rightIcon: /* @__PURE__ */ t(e.Arrow, {}), isFullWidth: !0, isDisabled: c, role: "combobox", "aria-label": m, "aria-labelledby": s, ...b, "aria-haspopup": "listbox", children: /* @__PURE__ */ t(e.SelectButtonText, { children: n }) }), position: "bottom", role: "listbox", ...p, children: l }) });
+}
+r.Item = I;
+r.SectionTitle = e.SectionTitle;
+r.Divider = e.Divider;
+r.SearchInput = e.SearchInput;
+r.Text = e.Text;
+function I({
+  icon: l,
+  children: c,
+  isDisabled: i,
+  value: o
+}) {
+  const n = f(a);
+  return /* @__PURE__ */ t(e.Item, { isChecked: o === n.value, role: "option", icon: l, isDisabled: i, onClick: () => {
+    n.onChange(o);
+  }, children: c });
+}
+export {
+  r as Select
+};

package/SelectButtonText.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "./styled-components.browser.esm.js";
+import { TruncatedText as i } from "./TruncatedText.js";
+function d({
+  children: e,
+  ...n
+}) {
+  return /* @__PURE__ */ t(r, { ...n, children: /* @__PURE__ */ t(i, { children: e }) });
+}
+const r = o.span.withConfig({
+  displayName: "Text",
+  componentId: "sc-1mvxl6c-0"
+})(["width:100%;min-width:0;text-align:left;"]);
+export {
+  d as SelectButtonText
+};

package/SelectedItemContainer.js

@@ -1,28 +1,29 @@
 import { jsx as i, jsxs as s } from "react/jsx-runtime";
-import o from "styled-components";
-import { token as e, Checkbox as a } from "@bynder/design-system";
+import o from "./styled-components.browser.esm.js";
+import { Checkbox as a } from "./Checkbox.js";
+import { token as e } from "./token.js";
 import { StyledCheckboxWrapper as c } from "./Checkbox.styles.js";
-import { __ as l } from "./index2.js";
-function $({
+import { __ as p } from "./index2.js";
+function b({
   title: t,
   onRemove: r,
   children: n
 }) {
-  return /* @__PURE__ */ i(p, { title: t, children: /* @__PURE__ */ s(c, { $isChecked: !0, $isFlex: !0, children: [
+  return /* @__PURE__ */ i(l, { title: t, children: /* @__PURE__ */ s(c, { $isChecked: !0, $isFlex: !0, children: [
     /* @__PURE__ */ i(
       a,
       {
-        "aria-label": l("Deselect"),
+        "aria-label": p("Deselect"),
         id: `deselect-${t}`,
         isChecked: !0,
         onChange: r,
         "data-testid": "metaproperty-option"
       }
     ),
-    /* @__PURE__ */ i(d, { htmlFor: `deselect-${t}`, children: n })
+    /* @__PURE__ */ i(m, { htmlFor: `deselect-${t}`, children: n })
   ] }) });
 }
-const p = o.li`
+const l = o.li`
 	display: flex;
 	flex: 1 1 0%;
 	align-items: center;
@@ -30,7 +31,7 @@ const p = o.li`
 	padding: ${e.spacing2} calc(${e.spacing6} - 4px) ${e.spacing2} ${e.spacing4};
 	height: 48px;
 	border-bottom: 1px solid rgba(0, 34, 51, 0.1);
-`, d = o.label`
+`, m = o.label`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -39,5 +40,5 @@ const p = o.li`
 	cursor: pointer;
 `;
 export {
-  $ as SelectedItemContainer
+  b as SelectedItemContainer
 };

package/SelectedItems.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { styled as e } from "styled-components";
-import { token as l } from "@bynder/design-system";
+import e from "./styled-components.browser.esm.js";
+import { token as l } from "./token.js";
 import { AssetItem as r } from "./AssetItem.js";
 import { CollectionItem as a } from "./CollectionItem.js";
 function f({ selection: i }) {

package/SelectionFooter.js

@@ -1,7 +1,8 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import d from "styled-components";
-import { token as n, Button as r } from "@bynder/design-system";
-import { IconSteps as b } from "@bynder/icons";
+import p from "./styled-components.browser.esm.js";
+import { Button as r } from "./Button.js";
+import { token as n } from "./token.js";
+import { IconSteps as b } from "./index4.js";
 import { Dropdown as v } from "./Dropdown.js";
 import { __ as o } from "./index2.js";
 import { useSelection as w } from "./SelectionContext.js";
@@ -13,7 +14,7 @@ import { Tooltip as M } from "./Tooltip.js";
 import { useSimilaritySearchStore as _ } from "./useSimilaritySearchStore.js";
 import { useSimilarityAssets as $ } from "./getSimilarityAssets.js";
 function L() {
-  const { selection: i, clear: a, selectAll: p } = w(), { selectionMode: l, selectAllOption: f } = I(), g = k.use.page(), { setIsSelected: S, isEnabled: u } = _(), { search: h, resetData: x } = $(), s = i.length >= 1 ? i.filter(
+  const { selection: i, clear: a, selectAll: d } = w(), { selectionMode: l, selectAllOption: f } = I(), g = k.use.page(), { setIsSelected: S, isEnabled: u } = _(), { search: h, resetData: x } = $(), s = i.length >= 1 ? i.filter(
     (t) => t.type === "asset" && t.value.__typename === "Image"
   ).map((t) => t.value.databaseId ? t.value.databaseId : t.value.id) : [], y = () => {
     x(), S(!0), h(s), a();
@@ -29,7 +30,7 @@ function L() {
           children: () => /* @__PURE__ */ e(A, { selection: i })
         }
       ),
-      l === "MultiSelect" && f && g.page === "assets" && /* @__PURE__ */ e(r, { variant: "secondary", onClick: p, children: o("Select all") }),
+      l === "MultiSelect" && f && g.page === "assets" && /* @__PURE__ */ e(r, { variant: "secondary", onClick: d, children: o("Select all") }),
       /* @__PURE__ */ e(r, { variant: "clean", onClick: a, children: o("Clear selection") })
     ] }),
     l === "MultiSelect" && u && s.length > 0 && /* @__PURE__ */ e(M, { text: o("Show similar"), margin: "right", marginAmount: "spacing3", children: /* @__PURE__ */ e(
@@ -44,7 +45,7 @@ function L() {
     /* @__PURE__ */ e(C, { selection: i })
   ] });
 }
-const j = d.div`
+const j = p.div`
 	display: flex;
 	flex-shrink: 0;
 	z-index: 10;
@@ -53,7 +54,7 @@ const j = d.div`
 	align-items: center;
 	box-shadow: 0 -1px 0 0 rgba(0, 34, 51, 0.1), 0 -1px 6px 0 rgba(0, 34, 51, 0.1);
 	animation: var(--fade-in-down);
-`, D = d.span`
+`, D = p.span`
 	display: flex;
 	flex-grow: 1;
 	align-items: center;

package/Serializer.js

@@ -0,0 +1,27 @@
+import { RULESET as i, KEYFRAMES as f, COMMENT as n, DECLARATION as p, IMPORT as E, LAYER as v } from "./Enum.js";
+import { strlen as t } from "./Utility.js";
+function a(r, s) {
+  for (var o = "", u = 0; u < r.length; u++)
+    o += s(r[u], u, r, s) || "";
+  return o;
+}
+function A(r, s, o, u) {
+  switch (r.type) {
+    case v:
+      if (r.children.length) break;
+    case E:
+    case p:
+      return r.return = r.return || r.value;
+    case n:
+      return "";
+    case f:
+      return r.return = r.value + "{" + a(r.children, u) + "}";
+    case i:
+      if (!t(r.value = r.props.join(","))) return "";
+  }
+  return t(o = a(r.children, u)) ? r.return = r.value + "{" + o + "}" : "";
+}
+export {
+  a as serialize,
+  A as stringify
+};

package/ShadowRootInternal.js

@@ -1,28 +1,28 @@
 import { jsx as r } from "react/jsx-runtime";
 import l, { useState as c, useEffect as d } from "react";
 import { createPortal as u } from "react-dom";
-import i from "styled-components";
+import i from "./styled-components.browser.esm.js";
 import { RootElementProvider as m } from "./RootElementContext.js";
 import p from "./Styles.css.js";
 import { DesignSystemProvider as h } from "./DesignSystemContext.js";
-function S(o) {
+function S(t) {
   try {
-    return o.attachShadow({ mode: "open" });
+    return t.attachShadow({ mode: "open" });
   } catch {
     return null;
   }
 }
-function x({ children: o, isContainerMode: e = !1 }) {
-  const t = l.useRef(null), [n, a] = c(null);
+function x({ children: t, isContainerMode: e = !1 }) {
+  const o = l.useRef(null), [n, a] = c(null);
   return d(() => {
-    if (t.current === null)
+    if (o.current === null)
       return;
-    const s = S(t.current);
-    w(s), s && f(document.head, y), a(s ?? t.current);
+    const f = S(o.current);
+    w(f), f && s(document.head, y), a(f ?? o.current);
   }, []), /* @__PURE__ */ r(
     "div",
     {
-      ref: t,
+      ref: o,
       style: {
         display: "flex",
         height: "100%"
@@ -34,7 +34,7 @@ function x({ children: o, isContainerMode: e = !1 }) {
           {
             $isContainerMode: e,
             "data-testid": "ShadowRootInternalContainer",
-            children: o
+            children: t
           }
         ),
         n
@@ -42,13 +42,13 @@ function x({ children: o, isContainerMode: e = !1 }) {
     }
   );
 }
-function w(o) {
-  const t = "@import url(https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/css/vendor/font-awesome.min.css);" + p;
-  f(o ?? document.head, t);
+function w(t) {
+  const o = "@import url(https://d8ejoa1fys2rk.cloudfront.net/5.0.5/includes/css/vendor/font-awesome.min.css);" + p;
+  s(t ?? document.head, o);
 }
-function f(o, e) {
-  const t = document.createElement("style"), n = document.createTextNode(e);
-  t.appendChild(n), o.appendChild(t);
+function s(t, e) {
+  const o = document.createElement("style"), n = document.createTextNode(e);
+  o.appendChild(n), t.appendChild(o);
 }
 const y = `
 @font-face {
@@ -69,7 +69,7 @@ const y = `
     font-style: normal;
   }
 `, v = i.div`
-	width: ${(o) => o.$isContainerMode ? "100%" : "auto"};
+	width: ${(t) => t.$isContainerMode ? "100%" : "auto"};
 	font-family: 'Source Sans Pro';
 `;
 export {

package/Sidebar.js

@@ -0,0 +1,17 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
+function m({
+  hasNoBorder: o = !1,
+  children: i,
+  ...t
+}) {
+  return /* @__PURE__ */ e(d, { $hasBorder: !o, ...t, children: i });
+}
+const d = n.aside.withConfig({
+  displayName: "Container",
+  componentId: "sc-j4b2sq-0"
+})(["overflow-y:auto;box-sizing:border-box;width:272px;height:100%;padding:", " 0;border-right:", ";"], r.spacing5, (o) => o.$hasBorder ? `1px solid ${r.gray100}` : void 0);
+export {
+  m as Sidebar
+};

package/Skeleton.js

@@ -1,17 +1,17 @@
 import { jsx as i } from "react/jsx-runtime";
-import { keyframes as n, styled as o } from "styled-components";
-import { token as e } from "@bynder/design-system";
-function g({ width: t = 100 }) {
+import n, { keyframes as o } from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+function l({ width: t = 100 }) {
   return /* @__PURE__ */ i(a, { width: t, "data-testid": "skeleton", children: "‌" });
 }
-const r = n`
+const r = o`
 	0% {
 		left: -500px;
 	}
 	100% {
 		left: 100%;
 	}
-`, a = o.span`
+`, a = n.span`
 	overflow: hidden;
 	display: inline-block;
 	position: relative;
@@ -38,5 +38,5 @@ const r = n`
 	}
 `;
 export {
-  g as Skeleton
+  l as Skeleton
 };

package/Slider.constants.js

@@ -0,0 +1,6 @@
+const o = ["ArrowLeft", "ArrowDown"], r = ["ArrowRight", "ArrowUp"], R = [...o, ...r];
+export {
+  R as ARROW_KEYS,
+  o as DECREMENT_ARROW_KEYS,
+  r as INCREMENT_ARROW_KEYS
+};

package/Slider.js

@@ -0,0 +1,128 @@
+import { jsxs as $, jsx as l } from "react/jsx-runtime";
+import { useState as C, useRef as N } from "react";
+import { Input as T } from "./Input.js";
+import { RangeInput as J } from "./RangeInput.js";
+import { Container as Q, InputContainer as L, IconStyled as W, SliderContainer as Z } from "./styles.js";
+import { DragRange as v } from "./DragRange.js";
+import { ARROW_KEYS as P, DECREMENT_ARROW_KEYS as nn } from "./Slider.constants.js";
+function cn({
+  min: a,
+  max: o,
+  inputPosition: s = "none",
+  value: t,
+  onChange: f,
+  iconLeft: V,
+  iconRight: A,
+  isFromCenter: X = !1,
+  isInactive: _ = !1,
+  isTooltipHidden: j = !1,
+  isDisabled: d = !1,
+  step: c = "1",
+  "aria-label": B,
+  ariaLabelLeftInput: O,
+  ariaLabelRightInput: U,
+  ...Y
+}) {
+  const [g, m] = C(""), [M, p] = C("none"), b = N(0), y = N(null), u = Array.isArray(t), D = u ? t[1] - t[0] : 0, q = c?.includes(".") ? c.split(".")[1].length : 0;
+  function R(n) {
+    return Number(n.toFixed(q));
+  }
+  function k(n) {
+    return u ? R(Math.max(a, Math.min(o - D, t[0] + n))) : t;
+  }
+  function z(n) {
+    n.preventDefault(), b.current = n.clientX, window.addEventListener("mousemove", F), window.addEventListener("mouseup", I);
+  }
+  function F(n) {
+    if (!u || !y.current)
+      return;
+    const e = Number(c ?? 1), r = (n.clientX - b.current) / y.current.clientWidth, i = Math.round(r * (o - a) / e) * e, K = k(i), H = R(Math.min(o, K + D));
+    f([K, H]);
+  }
+  function I(n) {
+    window.removeEventListener("mousemove", F), window.removeEventListener("mouseup", I), b.current = n.clientX;
+  }
+  function G(n) {
+    if (!u)
+      return;
+    const e = Number(c ?? 1);
+    if (P.includes(n.key)) {
+      n.preventDefault();
+      const r = k(nn.includes(n.key) ? -e : e), i = R(Math.min(o, r + D));
+      return f([r, i]);
+    }
+  }
+  function h(n, e) {
+    return u ? e === "min-input" && n < a ? a : e === "max-input" && n > o ? o : n : n > o ? o : n < a ? a : n;
+  }
+  function w(n) {
+    const e = parseFloat(n.target.value);
+    if (u) {
+      if (n.target.name === "min-input" && e < t[1]) {
+        const r = h(e, "min-input");
+        f([r, t[1]]);
+      }
+      if (n.target.name === "max-input" && t[0] < e) {
+        const r = h(e, "max-input");
+        f([t[0], r]);
+      }
+    } else {
+      const r = h(e);
+      f(r);
+    }
+  }
+  function x(n, e, r) {
+    if (n.key === "Enter" && n.target.blur(), ["ArrowUp", "ArrowDown"].includes(n.key)) {
+      n.preventDefault();
+      let i = parseFloat(n.currentTarget.value) || Number(e);
+      switch (n.key) {
+        case "ArrowUp": {
+          i = i + Number(c);
+          break;
+        }
+        case "ArrowDown": {
+          i = i - Number(c);
+          break;
+        }
+      }
+      i = h(i, r), w({
+        target: {
+          name: r,
+          value: String(i)
+        }
+      }), m(String(i));
+    }
+  }
+  const S = String(u ? t[0] : t), E = String(u ? t[1] : t);
+  return /* @__PURE__ */ $(Q, { ...Y, children: [
+    (s === "left" || s === "both") && /* @__PURE__ */ l(L, { $min: a, $max: o, "data-testid": "ds-slider-input-left", children: /* @__PURE__ */ l(T, { "aria-label": O, onChange: m, value: M === "left" ? g : S, type: "number", onFocus: () => {
+      m(S), p("left");
+    }, onBlur: () => {
+      w({
+        target: {
+          name: "min-input",
+          value: g
+        }
+      }), p("none");
+    }, onKeyDown: (n) => x(n, S, "min-input"), isDisabled: d }) }),
+    V && /* @__PURE__ */ l(W, { $isDisabled: d, children: V }),
+    /* @__PURE__ */ $(Z, { ref: y, children: [
+      u && /* @__PURE__ */ l(v, { max: o, min: a, value: t, onKeyDown: G, onMouseDown: z }),
+      /* @__PURE__ */ l(J, { min: a, max: o, value: t, inputPosition: s, onChange: w, isFromCenter: X, isInactive: _, isTooltipHidden: j, isDisabled: d, step: c, "aria-label": B })
+    ] }),
+    A && /* @__PURE__ */ l(W, { $isDisabled: d, children: A }),
+    (s === "right" || s === "both") && /* @__PURE__ */ l(L, { $min: a, $max: o, "data-testid": "ds-slider-input-right", children: /* @__PURE__ */ l(T, { "aria-label": U, onChange: m, value: M === "right" ? g : E, type: "number", onFocus: () => {
+      m(E), p("right");
+    }, onBlur: () => {
+      w({
+        target: {
+          name: "max-input",
+          value: g
+        }
+      }), p("none");
+    }, onKeyDown: (n) => x(n, E, "max-input"), isDisabled: d }) })
+  ] });
+}
+export {
+  cn as Slider
+};

package/SmartFilterContent.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import o from "styled-components";
-import { token as p } from "@bynder/design-system";
+import o from "./styled-components.browser.esm.js";
+import { token as p } from "./token.js";
 import "./MetapropertyFilterContent.js";
 o.div`
 	display: flex;

package/SmartFilterSelect_new.js

@@ -1,7 +1,7 @@
 import { jsxs as O, jsx as o } from "react/jsx-runtime";
 import { useState as a } from "react";
-import n from "styled-components";
-import { token as i } from "@bynder/design-system";
+import n from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
 import { useGetFilterOptions as F } from "./getFilterOptions.js";
 import { InfiniteScroll as S } from "./InfiniteScroll.js";
 import { OptionComponent as v } from "./Option_new.js";