cetec-design-system 4.8.0-0 → 4.9.1-0

package/dist/index.js

@@ -22761,12 +22761,31 @@ const DrawerFooter = (props) => {
   const classes = drawer();
   return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
 };
+const useClipped = (text2, mode) => {
+  const ref = useRef(null);
+  const [clipped, setClipped] = useState(false);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      setClipped(false);
+      return;
+    }
+    const check = () => setClipped(node.scrollWidth > node.clientWidth);
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [text2, mode]);
+  return [ref, clipped];
+};
 const MAX_VISIBLE_VALUES = 2;
 const FilterToken = (props) => {
   const {
     field,
     operator,
     value,
+    joined,
     state = "applied",
     tone = "default",
     operatorLocked,
@@ -22785,25 +22804,13 @@ const FilterToken = (props) => {
   const { labels } = useLocale();
   const values = Array.isArray(value) ? value : void 0;
   const fullValue = Array.isArray(value) ? value.join(", ") : value;
-  const hidden = values ? Math.max(0, values.length - MAX_VISIBLE_VALUES) : 0;
-  const shownValue = values ? values.slice(0, MAX_VISIBLE_VALUES).join(", ") : value;
-  const sentence = [field, operator, fullValue].filter(Boolean).join(" ");
+  const maxVisible = editor !== void 0 ? Infinity : MAX_VISIBLE_VALUES;
+  const hidden = values ? Math.max(0, values.length - maxVisible) : 0;
+  const shownValue = values ? values.slice(0, maxVisible).join(", ") : value;
+  const sentence = [field, operator, fullValue, joined == null ? void 0 : joined.operator, joined == null ? void 0 : joined.value].filter(Boolean).join(" ");
   const keepFocus = retainFocus ? (e) => e.preventDefault() : void 0;
-  const valueTextRef = useRef(null);
-  const [clipped, setClipped] = useState(false);
-  useLayoutEffect(() => {
-    const node = valueTextRef.current;
-    if (!node) {
-      setClipped(false);
-      return;
-    }
-    const check = () => setClipped(node.scrollWidth > node.clientWidth);
-    check();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(check);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [shownValue, editor]);
+  const [valueTextRef, clipped] = useClipped(shownValue, editor);
+  const [joinedTextRef, joinedClipped] = useClipped(joined == null ? void 0 : joined.value, editor);
   const part = (slot, content, onClick, extra) => onClick ? /* @__PURE__ */ jsx(
     Box,
     {
@@ -22833,6 +22840,13 @@ const FilterToken = (props) => {
       /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: fullValue })
     ] })
   ] });
+  const joinedOperator = joined && part(
+    classes.operator,
+    joined.operator,
+    operatorLocked ? void 0 : onOperatorClick,
+    operatorLocked ? { "data-locked": true } : void 0
+  );
+  const joinedContent = joined && /* @__PURE__ */ jsx(Box, { as: "span", ref: joinedTextRef, className: classes.valueText, children: joined.value });
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -22863,11 +22877,21 @@ const FilterToken = (props) => {
               inert: disabled || void 0,
               children: [
                 shownValue && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.value, children: valueContent }),
+                joined && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  part(classes.operator, joined.operator, void 0),
+                  /* @__PURE__ */ jsx(Box, { as: "span", className: classes.value, children: joinedContent })
+                ] }),
                 editor
               ]
             }
           )
-        ) : value !== void 0 && /* @__PURE__ */ jsx(Tooltip, { text: fullValue ?? "", disabled: hidden === 0 && !clipped, children: part(classes.value, valueContent, onValueClick) }),
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          value !== void 0 && /* @__PURE__ */ jsx(Tooltip, { text: fullValue ?? "", disabled: hidden === 0 && !clipped, children: part(classes.value, valueContent, onValueClick) }),
+          joined && /* @__PURE__ */ jsxs(Fragment, { children: [
+            joinedOperator,
+            /* @__PURE__ */ jsx(Tooltip, { text: joined.value, disabled: !joinedClipped, children: part(classes.value, joinedContent, onValueClick) })
+          ] })
+        ] }),
         onRemove && state !== "removing" && /* @__PURE__ */ jsx(
           Box,
           {