cetec-design-system 4.0.0-0 → 4.1.0-0

package/dist/index.js

@@ -2710,6 +2710,10 @@ const listItemSlotNames = [
     "beforeSlot",
     "listItem__beforeSlot"
   ],
+  [
+    "beforeContent",
+    "listItem__beforeContent"
+  ],
   [
     "afterSlot",
     "listItem__afterSlot"
@@ -3160,6 +3164,10 @@ const selectSlotNames = [
     "chips",
     "select__chips"
   ],
+  [
+    "before",
+    "select__before"
+  ],
   [
     "icon",
     "select__icon"
@@ -3171,6 +3179,7 @@ const selectFn = memo((props = {}) => {
 });
 const selectVariantKeys = [
   "size",
+  "before",
   "multiple",
   "autoSize"
 ];
@@ -3188,6 +3197,9 @@ const select = /* @__PURE__ */ Object.assign(selectFn, {
       "lg",
       "xl"
     ],
+    "before": [
+      "true"
+    ],
     "multiple": [
       "true"
     ],
@@ -15727,7 +15739,15 @@ const Breadcrumbs = (props) => {
       className: cx(classes.wrapper, className),
       ...otherProps,
       children: items == null ? void 0 : items.map((item, index2) => /* @__PURE__ */ jsxs(Text, { as: "li", children: [
-        item.href ? /* @__PURE__ */ jsx(Link, { href: item.href, className: classes.linkSegment, children: item.label }) : /* @__PURE__ */ jsx(Text, { className: classes.currentSegment, children: item.label }),
+        item.href ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: item.href,
+            onClick: item.onClick,
+            className: classes.linkSegment,
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx(Text, { className: classes.currentSegment, children: item.label }),
         index2 < (items == null ? void 0 : items.length) - 1 && /* @__PURE__ */ jsx(Text, { className: classes.slash, children: "/" })
       ] }, item.id))
     }
@@ -19239,8 +19259,11 @@ const Menu = (props) => {
       return;
     }
     const updateWrapperSize = () => {
-      const nextWidth = Math.ceil(sizeProbe.scrollWidth);
-      const nextHeight = Math.ceil(sizeProbe.scrollHeight);
+      const rect = sizeProbe.getBoundingClientRect();
+      const activeLevelEl = activeLevelRef.current;
+      const scrollbarWidth = activeLevelEl && !shouldUsePanelDiginProbeFill ? activeLevelEl.offsetWidth - activeLevelEl.clientWidth : 0;
+      const nextWidth = Math.ceil(rect.width) + scrollbarWidth;
+      const nextHeight = Math.ceil(rect.height);
       setWrapperSize((previous) => {
         if (previous.width === nextWidth && previous.height === nextHeight) {
           return previous;
@@ -19254,6 +19277,9 @@ const Menu = (props) => {
     updateWrapperSize();
     const resizeObserver = new ResizeObserver(updateWrapperSize);
     resizeObserver.observe(sizeProbe);
+    if (activeLevelRef.current) {
+      resizeObserver.observe(activeLevelRef.current);
+    }
     return () => {
       resizeObserver.disconnect();
     };
@@ -19265,7 +19291,8 @@ const Menu = (props) => {
     diginDepth,
     hasVisibleResults,
     isMenuVisible,
-    shouldUseDiginSizing
+    shouldUseDiginSizing,
+    shouldUsePanelDiginProbeFill
   ]);
   useLayoutEffect(() => {
     var _a2;
@@ -20637,7 +20664,14 @@ const ListItem = (props) => {
       "data-row-id": rowId,
       ...otherProps,
       children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-        before && /* @__PURE__ */ jsx(Box, { className: classes.beforeSlot, "aria-hidden": true, children: before }),
+        before && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cx(classes.beforeSlot, classes.beforeContent),
+            "aria-hidden": true,
+            children: before
+          }
+        ),
         variant === "checkbox" && /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -24010,6 +24044,7 @@ const getSelectedOptions = (options, value, multiple) => {
   return options.filter((option) => selectedValueSet.has(option.props.value));
 };
 const Select = (props) => {
+  var _a;
   const floatingLayer = useFloatingLayer();
   const {
     value: controlledValue,
@@ -24030,6 +24065,8 @@ const Select = (props) => {
     size: size2 = "md",
     density = defaultDensity,
     autoSize = false,
+    before,
+    clearable = true,
     "data-ds-component": dsComponentName,
     ...rest
   } = props;
@@ -24123,11 +24160,11 @@ const Select = (props) => {
   const labelsRef = useRef([]);
   const { isPositioned } = floating;
   useLayoutEffect(() => {
-    var _a;
+    var _a2;
     if (!isOpen || !isPositioned || initialActiveIndex === null) {
       return;
     }
-    (_a = itemRefs.current[initialActiveIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+    (_a2 = itemRefs.current[initialActiveIndex]) == null ? void 0 : _a2.scrollIntoView({ block: "nearest" });
   }, [isOpen, isPositioned]);
   const click = useClick(floating.context, {
     enabled: !disabled
@@ -24159,7 +24196,9 @@ const Select = (props) => {
     placeholder
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
-  const classes = select({ size: size2, multiple, autoSize });
+  const resolvedBefore = before ?? (multiple ? void 0 : (_a = options.find((option) => option.props.value === value)) == null ? void 0 : _a.props.before);
+  const hasBefore = resolvedBefore !== void 0 && resolvedBefore !== null && resolvedBefore !== false;
+  const classes = select({ size: size2, multiple, autoSize, before: hasBefore });
   const menuClasses = menu({
     density,
     layer: floatingLayer,
@@ -24177,7 +24216,7 @@ const Select = (props) => {
       setOpenedByKeyboard(true);
       setOpenState(true);
     }
-    if (!multiple && hasValue && (event.key === "Backspace" || event.key === "Delete")) {
+    if (!multiple && clearable && hasValue && (event.key === "Backspace" || event.key === "Delete")) {
       event.preventDefault();
       handleValueChange(null);
     }
@@ -24190,7 +24229,9 @@ const Select = (props) => {
       return;
     }
     if (value === optionValue) {
-      handleValueChange(null);
+      if (clearable) {
+        handleValueChange(null);
+      }
       setOpenState(false);
       return;
     }
@@ -24219,7 +24260,7 @@ const Select = (props) => {
       },
       selectedValue
     )),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       Box,
       {
         as: "div",
@@ -24244,37 +24285,40 @@ const Select = (props) => {
           onKeyDown: handleTriggerKeyDown
         }),
         ...otherProps,
-        children: multiple && selectedOptions.length > 0 ? /* @__PURE__ */ jsx(Box, { className: cx(classes.content, classes.chips), children: selectedOptions.map((option) => /* @__PURE__ */ jsx(
-          Box,
-          {
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-            },
-            onClick: (event) => {
-              event.stopPropagation();
+        children: [
+          hasBefore && /* @__PURE__ */ jsx(Box, { className: classes.before, "aria-hidden": true, children: resolvedBefore }),
+          multiple && selectedOptions.length > 0 ? /* @__PURE__ */ jsx(Box, { className: cx(classes.content, classes.chips), children: selectedOptions.map((option) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              onMouseDown: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  size: chipSize,
+                  dismissable: true,
+                  onDismiss: () => handleChipDismiss(option.props.value),
+                  children: option.props.label
+                }
+              )
             },
-            children: /* @__PURE__ */ jsx(
-              Chip,
-              {
-                size: chipSize,
-                dismissable: true,
-                onDismiss: () => handleChipDismiss(option.props.value),
-                children: option.props.label
-              }
-            )
-          },
-          option.props.value
-        )) }) : /* @__PURE__ */ jsx(
-          Box,
-          {
-            className: cx(
-              classes.content,
-              hasValue ? classes.value : classes.placeholder
-            ),
-            children: displayValue
-          }
-        )
+            option.props.value
+          )) }) : /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cx(
+                classes.content,
+                hasValue ? classes.value : classes.placeholder
+              ),
+              children: displayValue
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -24324,6 +24368,10 @@ const Select = (props) => {
               const optionLabel = getOptionText(option);
               const isSelected = multiple ? selectedValueSet.has(option.props.value) : value === option.props.value;
               const isPointed = !option.props.disabled && hasNavigated && activeIndex === index2;
+              const showClearIcon = clearable && isSelected && isPointed;
+              const optionBefore = option.props.before;
+              const hasOptionBefore = optionBefore !== void 0 && optionBefore !== null && optionBefore !== false;
+              const selectionIcon = showClearIcon ? "x" : "check";
               return /* @__PURE__ */ jsx(
                 ListItem,
                 {
@@ -24337,9 +24385,11 @@ const Select = (props) => {
                   variant: multiple ? "checkbox" : "default",
                   label: optionLabel,
                   description: option.props.description,
-                  iconBefore: !multiple ? isSelected && isPointed ? "x" : option.props.iconLeft ?? "check" : option.props.iconLeft,
-                  iconBeforeFill: !multiple ? isSelected ? "icon" : option.props.iconLeft ? void 0 : "transparent" : void 0,
-                  iconAfter: option.props.iconRight,
+                  before: hasOptionBefore ? optionBefore : void 0,
+                  iconBefore: hasOptionBefore ? void 0 : !multiple ? showClearIcon ? "x" : option.props.iconLeft ?? "check" : option.props.iconLeft,
+                  iconBeforeFill: hasOptionBefore ? void 0 : !multiple ? isSelected ? "icon" : option.props.iconLeft ? void 0 : "transparent" : void 0,
+                  iconAfter: hasOptionBefore && !multiple ? selectionIcon : option.props.iconRight,
+                  iconAfterFill: hasOptionBefore && !multiple ? isSelected ? "icon" : "transparent" : void 0,
                   ...getItemProps({
                     onClick: () => {
                       if (!option.props.disabled) {