cetec-design-system 4.7.0-0 → 4.9.0-0

package/dist/icon-metadata.json

@@ -459,6 +459,28 @@
     "category": "System objects",
     "deprecated": false
   },
+  "barcode-reader-off": {
+    "aliases": [
+      "upc",
+      "qr",
+      "products",
+      "shopping",
+      "scanner",
+      "barcode",
+      "gun",
+      "handheld",
+      "device",
+      "scanning",
+      "point of sale",
+      "offline",
+      "off",
+      "unavailable",
+      "disabled"
+    ],
+    "tags": [],
+    "category": "System objects",
+    "deprecated": false
+  },
   "barricade": {
     "aliases": [
       "construction",

package/dist/index.js

@@ -3974,6 +3974,7 @@ const IconNames = {
   attachment: "attachment",
   bank: "bank",
   "barcode-off": "barcode-off",
+  "barcode-reader-off": "barcode-reader-off",
   "barcode-reader": "barcode-reader",
   barcode: "barcode",
   barricade: "barricade",
@@ -22760,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,
@@ -22784,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,
     {
@@ -22832,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,
     {
@@ -22862,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,
           {