cetec-design-system 3.3.0-0 → 3.4.0-0

package/dist/index.js

@@ -14948,6 +14948,21 @@ const createOverlayMiddleware = (options = {}) => {
     ...extras
   ];
 };
+const availableHeightMiddleware = (options = {}) => {
+  const { matchReferenceWidth = false, padding = 8 } = options;
+  return size({
+    padding,
+    apply({ rects, elements, availableHeight }) {
+      if (matchReferenceWidth) {
+        elements.floating.style.minWidth = `${rects.reference.width}px`;
+      }
+      elements.floating.style.setProperty(
+        "--available-height",
+        `${Math.max(availableHeight, 0)}px`
+      );
+    }
+  });
+};
 const useOverlayFloating = (options) => {
   const {
     open,
@@ -15003,13 +15018,15 @@ const Tooltip = (props) => {
     placement = "bottom",
     offset: offset2 = 8,
     delay,
+    disabled = false,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
   const [isOpen, setIsOpen] = useState(false);
+  if (disabled && isOpen) setIsOpen(false);
   const arrowRef = useRef(null);
   const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
-    open: isOpen,
+    open: isOpen && !disabled,
     onOpenChange: setIsOpen,
     placement,
     middleware: createOverlayMiddleware({
@@ -15017,10 +15034,10 @@ const Tooltip = (props) => {
       extras: [arrow({ element: arrowRef })]
     })
   });
-  const hover = useHover(context2, { move: false, delay });
-  const focus = useFocus(context2);
-  const dismiss = useDismiss(context2);
-  const role = useRole(context2, { role: "tooltip" });
+  const hover = useHover(context2, { move: false, delay, enabled: !disabled });
+  const focus = useFocus(context2, { enabled: !disabled });
+  const dismiss = useDismiss(context2, { enabled: !disabled });
+  const role = useRole(context2, { role: "tooltip", enabled: !disabled });
   const { getReferenceProps, getFloatingProps } = useInteractions([
     hover,
     focus,
@@ -15042,7 +15059,7 @@ const Tooltip = (props) => {
         children
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
+    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
       Box,
       {
         ...dsComponent("Tooltip"),
@@ -16555,6 +16572,7 @@ const ChipGroupContext = createContext(
 const useChipGroup = () => {
   return useContext(ChipGroupContext);
 };
+const MAX_VISIBLE_ITEMS = 2;
 const Chip = (props) => {
   const groupContext = useChipGroup();
   const fieldContext = useFieldContext();
@@ -16562,6 +16580,7 @@ const Chip = (props) => {
   const {
     size: sizeProp,
     children,
+    items,
     before,
     after,
     loading,
@@ -16591,19 +16610,20 @@ const Chip = (props) => {
   const isDisabled = disabled || loading;
   const isSelectable = value !== void 0 && groupContext !== null;
   const hasPrimaryAction = Boolean(onClick) || isSelectable;
+  const isEmpty = (items == null ? void 0 : items.length) === 0;
   const isMultiSelected = isSelectable && value !== void 0 && groupContext !== null && groupContext.type === "multi" && Array.isArray(groupContext.value) && groupContext.value.includes(value);
   const isSelected = isSelectable && groupContext !== null ? groupContext.type === "single" ? groupContext.value === value : isMultiSelected : false;
   const hasBefore = Boolean(before) || isMultiSelected;
   const hasAfter = Boolean(after) || dismissable;
   useEffect(() => {
-    if (!isSelectable || isDisabled || !registerChip || !unregisterChip || value === void 0) {
+    if (!isSelectable || isDisabled || isEmpty || !registerChip || !unregisterChip || value === void 0) {
       return;
     }
     registerChip(value, buttonRef);
     return () => {
       unregisterChip(value);
     };
-  }, [isDisabled, isSelectable, registerChip, unregisterChip, value]);
+  }, [isDisabled, isEmpty, isSelectable, registerChip, unregisterChip, value]);
   const classes = chip({
     size: size2,
     before: hasBefore,
@@ -16674,7 +16694,9 @@ const Chip = (props) => {
     }
     return 0;
   };
-  const resolvedDismissLabel = dismissLabel || `Remove ${children}`;
+  const isOverflowing = items !== void 0 && items.length > MAX_VISIBLE_ITEMS;
+  const label2 = items ? isOverflowing ? `${items.slice(0, MAX_VISIBLE_ITEMS).join(", ")} +${items.length - MAX_VISIBLE_ITEMS}` : items.join(", ") : children;
+  const resolvedDismissLabel = dismissLabel || `Remove ${items ? items.join(", ") : children}`;
   const handleDismissClick = (e) => {
     e.stopPropagation();
     onDismiss == null ? void 0 : onDismiss();
@@ -16704,7 +16726,10 @@ const Chip = (props) => {
   const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     isMultiSelected && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.slot, children: /* @__PURE__ */ jsx(Icon, { name: "check", fill: "icon.inverse", "aria-hidden": true }) }),
     renderSlot(before, "before"),
-    /* @__PURE__ */ jsx(Box, { as: "span", className: classes.mainContent, children }),
+    /* @__PURE__ */ jsx(Box, { as: "span", className: classes.mainContent, children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": isOverflowing || void 0, children: label2 }),
+      isOverflowing && /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: items.join(", ") })
+    ] }) : label2 }),
     renderSlot(after, "after")
   ] });
   const body = hasPrimaryAction ? /* @__PURE__ */ jsx(
@@ -16734,6 +16759,7 @@ const Chip = (props) => {
     {
       as: "span",
       className: classes.body,
+      tabIndex: isOverflowing && !isDisabled ? 0 : void 0,
       "data-deleted": deleted ? true : void 0,
       "data-disabled": isDisabled || void 0,
       "data-error": error2 || void 0,
@@ -16742,6 +16768,9 @@ const Chip = (props) => {
       children: bodyContent
     }
   );
+  if (isEmpty) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -16757,7 +16786,7 @@ const Chip = (props) => {
       "aria-invalid": invalid || void 0,
       ...otherProps,
       children: [
-        body,
+        items ? /* @__PURE__ */ jsx(Tooltip, { text: items.join(", "), disabled: !isOverflowing || loading, children: body }) : body,
         dismissable && dismissButton,
         loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", centered: true })
       ]
@@ -18455,9 +18484,14 @@ const Menu = (props) => {
   } = props;
   const [className, otherProps] = splitProps(rest);
   const userStyle = otherProps.style;
-  const classes = menu({ density, panel, layer: floatingLayer });
-  const listClassName = list({ density });
   const hasReference = Boolean(trigger) && !inline;
+  const classes = menu({
+    density,
+    panel,
+    layer: floatingLayer,
+    scrollable: hasReference && !panel
+  });
+  const listClassName = list({ density });
   const [uncontrolledOpen, setUncontrolledOpen] = useState(
     defaultOpen ?? false
   );
@@ -18493,7 +18527,7 @@ const Menu = (props) => {
     placement,
     strategy,
     middleware: createOverlayMiddleware({
-      extras: [size()]
+      extras: [availableHeightMiddleware()]
     })
   });
   const listRef = useRef([]);
@@ -18600,6 +18634,25 @@ const Menu = (props) => {
   const shouldUsePanelDiginProbeFill = Boolean(panel) && subMenuInteraction === "digin";
   const shouldUseDiginSizing = subMenuInteraction === "digin" && hasVisibleResults;
   const sizeProbeRef = useRef(null);
+  const activeLevelRef = useRef(null);
+  const activeBackHeaderRef = useRef(null);
+  useLayoutEffect(() => {
+    const levelEl = activeLevelRef.current;
+    const headerEl = activeBackHeaderRef.current;
+    if (!levelEl) return;
+    if (!headerEl) {
+      levelEl.style.removeProperty("--menu-back-header-height");
+      return;
+    }
+    const update = () => levelEl.style.setProperty(
+      "--menu-back-header-height",
+      `${headerEl.offsetHeight}px`
+    );
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(headerEl);
+    return () => observer.disconnect();
+  }, [diginDepth, density, hasVisibleResults]);
   useLayoutEffect(() => {
     if (!isMenuVisible || !shouldUseDiginSizing) {
       setWrapperSize({ width: null, height: null });
@@ -18737,6 +18790,7 @@ const Menu = (props) => {
                     children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
                       Box,
                       {
+                        ref: activeLevelRef,
                         className: classes.level,
                         style: {
                           flex: `0 0 ${levelWidthPercent}%`
@@ -18747,6 +18801,7 @@ const Menu = (props) => {
                             {
                               as: "button",
                               type: "button",
+                              ref: activeBackHeaderRef,
                               className: classes.backHeader,
                               onClick: rootContextValue.onPopDiginLevel,
                               children: [
@@ -19255,7 +19310,8 @@ const SubMenu = (props) => {
   const resolvedDensity = typeof density === "string" ? density : rootContext.density;
   const classes = menu({
     density: resolvedDensity,
-    layer: floatingLayer
+    layer: floatingLayer,
+    scrollable: true
   });
   const listClassName = list({ density: resolvedDensity });
   const itemClassName = listItem({
@@ -19303,7 +19359,8 @@ const SubMenu = (props) => {
     middleware: [
       offset({ mainAxis: 0, alignmentAxis: -4 }),
       flip(),
-      shift({ padding: 8 })
+      shift({ padding: 8 }),
+      availableHeightMiddleware()
     ]
   });
   const hover = useHover(floating.context, {
@@ -23180,7 +23237,7 @@ const Select = (props) => {
     name,
     disabled = false,
     error: error2 = false,
-    size: size$12 = "md",
+    size: size2 = "md",
     density = defaultDensity,
     autoSize = false,
     "data-ds-component": dsComponentName,
@@ -23259,19 +23316,8 @@ const Select = (props) => {
       extras: [
         // Floating UI only positions the listbox; without a height cap a long
         // option list overflows the viewport on whichever side flip() picks.
-        // Only measured values are written here; the `menu` recipe's
-        // `scrollable` variant applies the cap and scrolling. `padding`
-        // mirrors the overlay middleware's default `shiftPadding`.
-        size({
-          padding: 8,
-          apply({ rects, elements, availableHeight }) {
-            elements.floating.style.minWidth = `${rects.reference.width}px`;
-            elements.floating.style.setProperty(
-              "--available-height",
-              `${Math.max(availableHeight, 0)}px`
-            );
-          }
-        })
+        // The `menu` recipe's `scrollable` variant applies the cap.
+        availableHeightMiddleware({ matchReferenceWidth: true })
       ]
     })
   });
@@ -23315,14 +23361,14 @@ const Select = (props) => {
     placeholder
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
-  const classes = select({ size: size$12, multiple, autoSize });
+  const classes = select({ size: size2, multiple, autoSize });
   const menuClasses = menu({
     density,
     layer: floatingLayer,
     scrollable: true
   });
   const hasValue = value !== null && value !== void 0 && value !== "";
-  const chipSize = resolveChipSize(size$12);
+  const chipSize = resolveChipSize(size2);
   const accessibleName = typeof displayValue === "string" && displayValue.length > 0 ? displayValue : placeholder;
   const handleTriggerKeyDown = (event) => {
     if (disabled) {