cetec-design-system 4.3.0-0 → 4.4.0-0

package/dist/index.js

@@ -974,7 +974,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$w = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$x = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -999,7 +999,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$w
+  getVariantProps: getVariantProps$x
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1667,7 +1667,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$v = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$w = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1678,7 +1678,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$v
+  getVariantProps: getVariantProps$w
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1721,7 +1721,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$u = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$v = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1740,7 +1740,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$u
+  getVariantProps: getVariantProps$v
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1797,7 +1797,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$t = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1819,7 +1819,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1856,7 +1856,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$s = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1881,7 +1881,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1908,7 +1908,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$r = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1944,7 +1944,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1971,7 +1971,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$q = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1982,7 +1982,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2013,7 +2013,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$p = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2047,7 +2047,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2086,7 +2086,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$o = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2103,7 +2103,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2130,7 +2130,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$n = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2141,7 +2141,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2179,7 +2179,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$m = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2206,7 +2206,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const codeBlockDefaultVariants = {
   "tone": "default",
@@ -2275,7 +2275,7 @@ const codeBlockVariantKeys = [
   "collapsed",
   "actionGutter"
 ];
-const getVariantProps$l = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
 const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   __recipe__: false,
   __name__: "codeBlock",
@@ -2311,7 +2311,7 @@ const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   splitVariantProps(props) {
     return splitProps$1(props, codeBlockVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2334,7 +2334,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$k = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2345,7 +2345,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$l
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2368,7 +2368,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$j = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$k = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2379,7 +2379,7 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$k
 });
 const drawerDefaultVariants = {
   "side": "right",
@@ -2426,7 +2426,7 @@ const drawerVariantKeys = [
   "size",
   "scrollable"
 ];
-const getVariantProps$i = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
 const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   __recipe__: false,
   __name__: "drawer",
@@ -2453,6 +2453,64 @@ const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, drawerVariantKeys);
   },
+  getVariantProps: getVariantProps$j
+});
+const filterTokenDefaultVariants = {};
+const filterTokenCompoundVariants = [];
+const filterTokenSlotNames = [
+  [
+    "root",
+    "filterToken__root"
+  ],
+  [
+    "part",
+    "filterToken__part"
+  ],
+  [
+    "field",
+    "filterToken__field"
+  ],
+  [
+    "operator",
+    "filterToken__operator"
+  ],
+  [
+    "value",
+    "filterToken__value"
+  ],
+  [
+    "valueText",
+    "filterToken__valueText"
+  ],
+  [
+    "count",
+    "filterToken__count"
+  ],
+  [
+    "editor",
+    "filterToken__editor"
+  ],
+  [
+    "remove",
+    "filterToken__remove"
+  ]
+];
+const filterTokenSlotFns = /* @__PURE__ */ filterTokenSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, filterTokenDefaultVariants, getSlotCompoundVariant(filterTokenCompoundVariants, slotName))]);
+const filterTokenFn = memo((props = {}) => {
+  return Object.fromEntries(filterTokenSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const filterTokenVariantKeys = [];
+const getVariantProps$i = (variants) => ({ ...filterTokenDefaultVariants, ...compact(variants) });
+const filterToken = /* @__PURE__ */ Object.assign(filterTokenFn, {
+  __recipe__: false,
+  __name__: "filterToken",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: filterTokenVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps$1(props, filterTokenVariantKeys);
+  },
   getVariantProps: getVariantProps$i
 });
 const formFieldDefaultVariants = {
@@ -15462,6 +15520,7 @@ const defaultLocaleLabels = {
   dismiss: "Dismiss",
   closeDialog: "Close dialog",
   removeItem: (item) => `Remove ${item}`,
+  removeFilter: (filter) => `Remove filter: ${filter}`,
   switchToTheme: (nextTheme) => `Switch to ${nextTheme} theme`,
   selectPlaceholder: "Select...",
   noResults: "No results found",
@@ -22570,6 +22629,130 @@ const DrawerFooter = (props) => {
   const classes = drawer();
   return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
 };
+const MAX_VISIBLE_VALUES = 2;
+const FilterToken = (props) => {
+  const {
+    field,
+    operator,
+    value,
+    state = "applied",
+    tone = "default",
+    operatorLocked,
+    editor,
+    disabled,
+    retainFocus,
+    onFieldClick,
+    onOperatorClick,
+    onValueClick,
+    onRemove,
+    removeLabel,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = filterToken();
+  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 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 part = (slot, content, onClick, extra) => onClick ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "button",
+      type: "button",
+      className: cx(classes.part, slot),
+      disabled,
+      onMouseDown: keepFocus,
+      onClick,
+      ...extra,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(Box, { as: "span", className: cx(classes.part, slot), ...extra, children: content });
+  const valueContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        ref: valueTextRef,
+        className: classes.valueText,
+        "aria-hidden": hidden > 0 || void 0,
+        children: shownValue || "…"
+      }
+    ),
+    hidden > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { as: "span", className: classes.count, "aria-hidden": true, children: `+${hidden}` }),
+      /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: fullValue })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("FilterToken"),
+      as: "span",
+      role: "group",
+      "aria-label": sentence,
+      className: cx(classes.root, className),
+      "data-state": state,
+      "data-tone": tone,
+      "data-disabled": disabled || void 0,
+      ...otherProps,
+      children: [
+        part(classes.field, field, onFieldClick ?? onValueClick),
+        part(
+          classes.operator,
+          operator,
+          operatorLocked ? void 0 : onOperatorClick,
+          operatorLocked ? { "data-locked": true } : void 0
+        ),
+        editor !== void 0 ? (
+          // `inert` keeps a disabled token's editor out of the tab order.
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              as: "span",
+              className: cx(classes.part, classes.editor),
+              inert: disabled || void 0,
+              children: [
+                shownValue && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.value, children: valueContent }),
+                editor
+              ]
+            }
+          )
+        ) : value !== void 0 && /* @__PURE__ */ jsx(Tooltip, { text: fullValue ?? "", disabled: hidden === 0 && !clipped, children: part(classes.value, valueContent, onValueClick) }),
+        onRemove && state !== "removing" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            type: "button",
+            className: classes.remove,
+            "aria-label": removeLabel ?? labels.removeFilter(sentence),
+            disabled,
+            onMouseDown: keepFocus,
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "16", "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+};
 const Required = () => {
   return /* @__PURE__ */ jsx(Text, { color: "text.danger", fontSize: "inherit", lineHeight: "tight", children: "*" });
 };
@@ -26031,6 +26214,7 @@ export {
   DrawerFooter,
   DrawerHeader,
   DsChainScope,
+  FilterToken,
   FormField,
   Heading,
   HighlightText,